39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { createUniqueId, Show, type JSX } from "solid-js";
|
|
import { ProfileMenu } from "./ProfileMenu";
|
|
import { UserNavButton } from "./UserNavButton";
|
|
import { createDesktopMenuController } from "./createDesktopMenuController";
|
|
import styles from "./UserNav.module.scss";
|
|
|
|
type UserNavProps = {
|
|
isMobileViewport: boolean;
|
|
isMobileWorkspaceOpen: boolean;
|
|
onToggleMobileWorkspace: VoidFunction;
|
|
};
|
|
|
|
export const UserNav = (props: UserNavProps): JSX.Element => {
|
|
const menuId = createUniqueId();
|
|
|
|
return (
|
|
<Show
|
|
when={props.isMobileViewport}
|
|
fallback={<DesktopUserNav />}
|
|
>
|
|
<div class={styles.root}>
|
|
<UserNavButton isOpen={props.isMobileWorkspaceOpen} menuId={menuId} onToggle={props.onToggleMobileWorkspace} />
|
|
</div>
|
|
</Show>
|
|
);
|
|
};
|
|
|
|
const DesktopUserNav = (): JSX.Element => {
|
|
const controller = createDesktopMenuController();
|
|
const menuId = createUniqueId();
|
|
|
|
return (
|
|
<div class={styles.root} ref={controller.setRootRef}>
|
|
<UserNavButton isOpen={controller.isOpen()} menuId={menuId} onToggle={controller.toggleMenu} />
|
|
{controller.isOpen() ? <ProfileMenu id={menuId} menuRef={controller.setMenuRef} onSelect={controller.closeMenu} /> : null}
|
|
</div>
|
|
);
|
|
};
|