Refactor: improve code modularity

Frontend/src/components/top-bar/TopBar/NotificationsNav.tsx

@@ -0,0 +1,38 @@
+import { createUniqueId, Show, type JSX } from "solid-js";
+import { NotificationsButton } from "./NotificationsButton";
+import { NotificationsMenu } from "./NotificationsMenu";
+import { createDesktopMenuController } from "./createDesktopMenuController";
+import styles from "./NotificationsNav.module.scss";
+
+type NotificationsNavProps = {
+	isMobileViewport: boolean;
+	isMobileWorkspaceOpen: boolean;
+	onToggleMobileWorkspace: VoidFunction;
+};
+
+export const NotificationsNav = (props: NotificationsNavProps): JSX.Element => {
+	const menuId = createUniqueId();
+
+	return (
+		<Show
+			when={props.isMobileViewport}
+			fallback={<DesktopNotificationsNav />}
+		>
+			<div class={styles.root}>
+				<NotificationsButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
+			</div>
+		</Show>
+	);
+};
+
+const DesktopNotificationsNav = (): JSX.Element => {
+	const controller = createDesktopMenuController();
+	const menuId = createUniqueId();
+
+	return (
+		<div class={styles.root} ref={controller.setRootRef}>
+			<NotificationsButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
+			{controller.isOpen() ? <NotificationsMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
+		</div>
+	);
+};