Feat: Add notifications menu

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

@@ -0,0 +1,36 @@
+import type { JSX } from "solid-js";
+import { Bell } from "../../../lib/icons";
+import { unreadNotificationCount } from "../data/shell.data";
+import styles from "./NotificationsButton.module.scss";
+
+type NotificationsButtonProps = {
+	isOpen: boolean;
+	menuId: string;
+	onToggle: () => void;
+};
+
+export const NotificationsButton = (props: NotificationsButtonProps): JSX.Element => {
+	const hasUnread = unreadNotificationCount > 0;
+	const unreadLabel = hasUnread ? `, ${unreadNotificationCount} unread` : "";
+
+	return (
+		<button
+			classList={{
+				[styles.button]: true,
+				[styles.buttonOpen]: props.isOpen,
+			}}
+			type="button"
+			aria-label={`${props.isOpen ? "Close" : "Open"} notifications${unreadLabel}`}
+			title={`${props.isOpen ? "Close" : "Open"} notifications`}
+			aria-haspopup="menu"
+			aria-controls={props.menuId}
+			aria-expanded={props.isOpen}
+			onClick={props.onToggle}
+		>
+			<span class={styles.iconWrap} aria-hidden="true">
+				<Bell size={18} strokeWidth={2} />
+				{hasUnread ? <span class={styles.badge}>{unreadNotificationCount}</span> : null}
+			</span>
+		</button>
+	);
+};