Feat: Frontend app shell

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -0,0 +1,48 @@
+// 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>
+	);
+};