Feat: Build out server shell

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

@@ -1,23 +1,42 @@
 // Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
 
-import { For, Show, type JSX } from "solid-js";
-import { workspaceSidebarItems } from "../data/shell.data";
+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="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>
+		<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 class={styles.section}>
+			<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={workspaceSidebarItems}>
+						<For each={serverSidebarItems}>
 							{(item): JSX.Element => {
 								const Icon = item.icon;