49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
// Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
|
||
|
||
import { For, Show, type JSX } from "solid-js";
|
||
import { workspaceSidebarItems } from "../data/shell.data";
|
||
import styles from "./WorkspaceSidebar.module.scss";
|
||
|
||
export const WorkspaceSidebar = (): JSX.Element => {
|
||
return (
|
||
<aside class={styles.sidebar} aria-label="Workspace navigation">
|
||
<div class={styles.header}>
|
||
<span class={styles.eyebrow}>Workspace</span>
|
||
<h2 class={styles.title}>Product Operations</h2>
|
||
<p class={styles.meta}>A barebone shell for Moku’s first real workspace layout.</p>
|
||
</div>
|
||
|
||
<div class={styles.section}>
|
||
<span class={styles.sectionLabel}>Navigation</span>
|
||
<div class={styles.navScroller}>
|
||
<ul class={styles.navList} role="list">
|
||
<For each={workspaceSidebarItems}>
|
||
{(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>
|
||
);
|
||
};
|