MangoPig
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
};
|