Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: Add responsive workspace shell

Browse Source
This commit is contained in:
MangoPig
2026-06-17 10:52:14 +01:00
parent 5d86a5124b
commit 85bf971547
24 changed files with 1153 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
Frontend/src/components/shell/TopBar/ProfileMenu.tsx
View File

@@ -5,13 +5,25 @@ import styles from "./ProfileMenu.module.scss";
type ProfileMenuProps = {
id: string;
menuRef: (element: HTMLDivElement) => void;
menuRef?: (element: HTMLDivElement) => void;
onSelect: () => void;
variant?: "popover" | "workspace";
};
export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
const variant = props.variant ?? "popover";
return (
<div id={props.id} class={styles.menu} role="menu" aria-label="Profile menu" ref={props.menuRef}>
<div
id={props.id}
classList={{
[styles.menu]: true,
[styles.menuWorkspace]: variant === "workspace",
}}
role="menu"
aria-label="Profile menu"
ref={props.menuRef}
>
<div class={styles.summary}>
<div class={styles.avatar} aria-hidden="true">
<span class={styles.avatarRing} />
@@ -28,34 +40,36 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
</div>
</div>
<For each={profileMenuSections}>
{(section): JSX.Element => (
<div class={styles.section}>
<For each={section.items}>
{(item): JSX.Element => {
const Icon = item.icon;
<div class={styles.sections}>
<For each={profileMenuSections}>
{(section): JSX.Element => (
<div class={styles.section}>
<For each={section.items}>
{(item): JSX.Element => {
const Icon = item.icon;
return (
<button
type="button"
role="menuitem"
classList={{
[styles.item]: true,
[styles.itemDanger]: item.tone === "danger",
}}
onClick={props.onSelect}
>
<span class={styles.itemIcon} aria-hidden="true">
<Icon size={16} strokeWidth={2} />
</span>
<span class={styles.itemLabel}>{item.label}</span>
</button>
);
}}
</For>
</div>
)}
</For>
return (
<button
type="button"
role="menuitem"
classList={{
[styles.item]: true,
[styles.itemDanger]: item.tone === "danger",
}}
onClick={props.onSelect}
>
<span class={styles.itemIcon} aria-hidden="true">
<Icon size={16} strokeWidth={2} />
</span>
<span class={styles.itemLabel}>{item.label}</span>
</button>
);
}}
</For>
</div>
)}
</For>
</div>
</div>
);
};