First commit

src/routes/[orgSlug]/+layout.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		data: {
+			org: { id: string; name: string; slug: string };
+			role: string;
+		};
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
+
+	const navItems = [
+		{ href: `/${data.org.slug}`, label: "Overview", icon: "home" },
+		{
+			href: `/${data.org.slug}/documents`,
+			label: "Documents",
+			icon: "file",
+		},
+		{ href: `/${data.org.slug}/kanban`, label: "Kanban", icon: "kanban" },
+		{
+			href: `/${data.org.slug}/calendar`,
+			label: "Calendar",
+			icon: "calendar",
+		},
+		{
+			href: `/${data.org.slug}/settings`,
+			label: "Settings",
+			icon: "settings",
+		},
+	];
+
+	function isActive(href: string): boolean {
+		return $page.url.pathname === href;
+	}
+</script>
+
+<div class="flex h-screen bg-dark">
+	<aside class="w-64 bg-surface border-r border-light/10 flex flex-col">
+		<div class="p-4 border-b border-light/10">
+			<h1 class="text-lg font-semibold text-light truncate">
+				{data.org.name}
+			</h1>
+			<p class="text-xs text-light/50 capitalize">{data.role}</p>
+		</div>
+
+		<nav class="flex-1 p-2 space-y-1">
+			{#each navItems as item}
+				<a
+					href={item.href}
+					class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors {isActive(
+						item.href,
+					)
+						? 'bg-primary text-white'
+						: 'text-light/70 hover:bg-light/5 hover:text-light'}"
+				>
+					{#if item.icon === "home"}
+						<svg
+							class="w-5 h-5"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path
+								d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+							/>
+							<polyline points="9,22 9,12 15,12 15,22" />
+						</svg>
+					{:else if item.icon === "file"}
+						<svg
+							class="w-5 h-5"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path
+								d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+							/>
+							<polyline points="14,2 14,8 20,8" />
+						</svg>
+					{:else if item.icon === "kanban"}
+						<svg
+							class="w-5 h-5"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<rect x="3" y="3" width="18" height="18" rx="2" />
+							<line x1="9" y1="3" x2="9" y2="21" />
+							<line x1="15" y1="3" x2="15" y2="21" />
+						</svg>
+					{:else if item.icon === "calendar"}
+						<svg
+							class="w-5 h-5"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<rect x="3" y="4" width="18" height="18" rx="2" />
+							<line x1="16" y1="2" x2="16" y2="6" />
+							<line x1="8" y1="2" x2="8" y2="6" />
+							<line x1="3" y1="10" x2="21" y2="10" />
+						</svg>
+					{:else if item.icon === "settings"}
+						<svg
+							class="w-5 h-5"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<circle cx="12" cy="12" r="3" />
+							<path
+								d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
+							/>
+						</svg>
+					{/if}
+					{item.label}
+				</a>
+			{/each}
+		</nav>
+
+		<div class="p-4 border-t border-light/10">
+			<a
+				href="/"
+				class="flex items-center gap-2 text-sm text-light/50 hover:text-light transition-colors"
+			>
+				<svg
+					class="w-4 h-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<path d="m15 18-6-6 6-6" />
+				</svg>
+				All Organizations
+			</a>
+		</div>
+	</aside>
+
+	<main class="flex-1 overflow-auto">
+		{@render children()}
+	</main>
+</div>