60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
// Path: Frontend/src/components/shell/TopBar/TopBar.tsx
|
|
|
|
import { For, type JSX } from "solid-js";
|
|
import type { Theme } from "../../../theme/runtime";
|
|
import { topBarActions } from "../data/shell.data";
|
|
import { DepartmentSelector } from "../DepartmentSelector/DepartmentSelector";
|
|
import { NotificationsNav } from "./NotificationsNav";
|
|
import { ThemeToggle } from "./ThemeToggle";
|
|
import { UserNav } from "./UserNav";
|
|
import styles from "./TopBar.module.scss";
|
|
|
|
type TopBarProps = {
|
|
theme: Theme;
|
|
onToggleTheme: VoidFunction;
|
|
isMobileViewport: boolean;
|
|
isNotificationsOpen: boolean;
|
|
isProfileOpen: boolean;
|
|
onToggleNotifications: VoidFunction;
|
|
onToggleProfile: VoidFunction;
|
|
};
|
|
|
|
export const TopBar = (props: TopBarProps): JSX.Element => {
|
|
return (
|
|
<header class={styles.topBar} data-ui="top-bar">
|
|
<div class={styles.identity} data-slot="top-bar-identity">
|
|
<span class={styles.eyebrow}>Moku Work</span>
|
|
<DepartmentSelector />
|
|
</div>
|
|
|
|
<div class={styles.controls} data-slot="top-bar-controls">
|
|
<div class={styles.actions} data-slot="top-bar-actions">
|
|
<For each={topBarActions}>
|
|
{(item): JSX.Element => {
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<button class={styles.actionButton} type="button" aria-label={item.label} title={item.label} data-slot="top-bar-action" data-action-id={item.id}>
|
|
<Icon size={18} strokeWidth={2} />
|
|
</button>
|
|
);
|
|
}}
|
|
</For>
|
|
</div>
|
|
|
|
<NotificationsNav
|
|
isMobileViewport={props.isMobileViewport}
|
|
isMobileWorkspaceOpen={props.isNotificationsOpen}
|
|
onToggleMobileWorkspace={props.onToggleNotifications}
|
|
/>
|
|
<ThemeToggle theme={props.theme} onToggle={props.onToggleTheme} />
|
|
<UserNav
|
|
isMobileViewport={props.isMobileViewport}
|
|
isMobileWorkspaceOpen={props.isProfileOpen}
|
|
onToggleMobileWorkspace={props.onToggleProfile}
|
|
/>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|