MangoPig
95 lines
2.9 KiB
TypeScript
95 lines
2.9 KiB
TypeScript
import { useNavigate } from "@solidjs/router";
|
|
import { For, type JSX } from "solid-js";
|
|
import { User } from "../../../lib/icons";
|
|
import { useAppShellData } from "../../app-shell/data/app-shell.context";
|
|
import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
|
|
import { profileMenuSections } from "../../app-shell/data/shell.data";
|
|
import styles from "./ProfileMenu.module.scss";
|
|
|
|
type ProfileMenuProps = {
|
|
id: string;
|
|
menuRef?: (element: HTMLDivElement) => void;
|
|
onSelect: () => void;
|
|
variant?: "popover" | "workspace";
|
|
};
|
|
|
|
export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
|
|
const variant = props.variant ?? "popover";
|
|
const appShellData = useAppShellData();
|
|
const navigate = useNavigate();
|
|
const activeUserProfile = () => appShellData.activeUserProfile();
|
|
|
|
const handleSelect = (actionId: string): void => {
|
|
if (actionId === "account-settings" || actionId === "security" || actionId === "theme-preferences") {
|
|
navigate(getWorkspaceSurfaceRoute("settings"));
|
|
}
|
|
|
|
props.onSelect();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
id={props.id}
|
|
classList={{
|
|
[styles.menu]: true,
|
|
[styles.menuWorkspace]: variant === "workspace",
|
|
}}
|
|
role="menu"
|
|
aria-label="Profile menu"
|
|
ref={props.menuRef}
|
|
data-ui="profile-menu"
|
|
data-variant={variant}
|
|
>
|
|
<div class={styles.summary} data-slot="profile-summary">
|
|
<div class={styles.avatar} aria-hidden="true">
|
|
<span class={styles.avatarRing} />
|
|
<span class={styles.avatarCore}>
|
|
<User size={16} strokeWidth={2} />
|
|
</span>
|
|
</div>
|
|
|
|
<div class={styles.summaryCopy}>
|
|
<strong class={styles.name}>{activeUserProfile().name}</strong>
|
|
<span class={styles.email}>{activeUserProfile().email}</span>
|
|
<span class={styles.role}>{activeUserProfile().roleLabel}</span>
|
|
<span class={styles.context}>{activeUserProfile().contextLabel}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class={styles.sections} data-slot="profile-sections">
|
|
<For each={profileMenuSections}>
|
|
{(section): JSX.Element => (
|
|
<div class={styles.section} data-slot="profile-section" data-section-id={section.id}>
|
|
<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",
|
|
}}
|
|
data-slot="profile-action"
|
|
data-action-id={item.id}
|
|
data-tone={item.tone ?? "default"}
|
|
onClick={() => handleSelect(item.id)}
|
|
>
|
|
<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>
|
|
);
|
|
};
|