68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
// Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
|
|
|
|
import { For, Show, createSignal, type JSX } from "solid-js";
|
|
import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
|
|
import { serverSidebarItems } from "../data/shell.data";
|
|
import styles from "./WorkspaceSidebar.module.scss";
|
|
|
|
export const WorkspaceSidebar = (): JSX.Element => {
|
|
const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
|
|
|
|
return (
|
|
<aside class={styles.sidebar} aria-label="Server navigation">
|
|
<div
|
|
classList={{
|
|
[styles.header]: true,
|
|
[styles.headerDrawerOpen]: isProjectDrawerOpen(),
|
|
}}
|
|
>
|
|
<ProjectSelector
|
|
isOpen={isProjectDrawerOpen()}
|
|
onToggle={(): void => {
|
|
setIsProjectDrawerOpen(true);
|
|
}}
|
|
onClose={(): void => {
|
|
setIsProjectDrawerOpen(false);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
classList={{
|
|
[styles.section]: true,
|
|
[styles.sectionHidden]: isProjectDrawerOpen(),
|
|
}}
|
|
>
|
|
<span class={styles.sectionLabel}>Navigation</span>
|
|
<div class={styles.navScroller}>
|
|
<ul class={styles.navList} role="list">
|
|
<For each={serverSidebarItems}>
|
|
{(item): JSX.Element => {
|
|
const Icon = item.icon;
|
|
|
|
return (
|
|
<li>
|
|
<button
|
|
type="button"
|
|
classList={{
|
|
[styles.navItem]: true,
|
|
[styles.navItemActive]: !!item.active,
|
|
}}
|
|
>
|
|
<Icon class={styles.icon} size={18} strokeWidth={2} />
|
|
<span class={styles.label}>{item.label}</span>
|
|
<Show when={item.meta}>
|
|
<span class={styles.itemMeta}>{item.meta}</span>
|
|
</Show>
|
|
</button>
|
|
</li>
|
|
);
|
|
}}
|
|
</For>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|