Feat: Add profile menu

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

@@ -4,9 +4,27 @@ import type { JSX } from "solid-js";
 import { User } from "../../../lib/icons";
 import styles from "./UserNavButton.module.scss";
 
-export const UserNavButton = (): JSX.Element => {
+type UserNavButtonProps = {
+	isOpen: boolean;
+	menuId: string;
+	onToggle: () => void;
+};
+
+export const UserNavButton = (props: UserNavButtonProps): JSX.Element => {
 	return (
-		<button class={styles.userButton} type="button" aria-label="Open profile" title="Open profile">
+		<button
+			classList={{
+				[styles.userButton]: true,
+				[styles.userButtonOpen]: props.isOpen,
+			}}
+			type="button"
+			aria-label={props.isOpen ? "Close profile menu" : "Open profile menu"}
+			title={props.isOpen ? "Close profile menu" : "Open profile menu"}
+			aria-haspopup="menu"
+			aria-controls={props.menuId}
+			aria-expanded={props.isOpen}
+			onClick={props.onToggle}
+		>
 			<span class={styles.spinContainer} aria-hidden="true">
 				<span class={styles.spinRing} />
 			</span>