Feat: Add profile menu

Frontend/src/components/shell/TopBar/ProfileMenu.tsx

@@ -0,0 +1,61 @@
+import { For, type JSX } from "solid-js";
+import { User } from "../../../lib/icons";
+import { activeUserProfile, profileMenuSections } from "../data/shell.data";
+import styles from "./ProfileMenu.module.scss";
+
+type ProfileMenuProps = {
+	id: string;
+	menuRef: (element: HTMLDivElement) => void;
+	onSelect: () => void;
+};
+
+export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
+	return (
+		<div id={props.id} class={styles.menu} role="menu" aria-label="Profile menu" ref={props.menuRef}>
+			<div class={styles.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>
+
+			<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>
+		</div>
+	);
+};