diff --git a/packages/web/app/dashboard/page.tsx b/packages/web/app/dashboard/page.tsx
index 693d594..0af1e77 100644
--- a/packages/web/app/dashboard/page.tsx
+++ b/packages/web/app/dashboard/page.tsx
@@ -1,9 +1,8 @@
+import { AppShell } from '@/components/app-shell/app-shell';
import { DashboardShell } from '@/components/dashboard/dashboard-shell';
export default function DashboardPage() {
return (
-
-
-
+
);
}
diff --git a/packages/web/app/explore/page.tsx b/packages/web/app/explore/page.tsx
index 57aef5c..709a5d2 100644
--- a/packages/web/app/explore/page.tsx
+++ b/packages/web/app/explore/page.tsx
@@ -1,10 +1,9 @@
+import { AppShell } from '@/components/app-shell/app-shell';
import { ExploreView } from '@/components/explore/explore-view';
/** Public discovery page: browse communities or all published content. */
export default function ExplorePage() {
return (
-
-
-
+
);
}
diff --git a/packages/web/app/start/page.tsx b/packages/web/app/start/page.tsx
index a483a75..a801307 100644
--- a/packages/web/app/start/page.tsx
+++ b/packages/web/app/start/page.tsx
@@ -1,9 +1,8 @@
+import { AppShell } from '@/components/app-shell/app-shell';
import { StartWizard } from '@/components/onboarding/start-wizard';
export default function StartPage() {
return (
-
-
-
+
);
}
diff --git a/packages/web/components/app-shell/app-shell.tsx b/packages/web/components/app-shell/app-shell.tsx
new file mode 100644
index 0000000..608e057
--- /dev/null
+++ b/packages/web/components/app-shell/app-shell.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+
+import { AppSidenav } from '@/components/app-shell/app-sidenav';
+
+export function AppShell({ children }: { children: ReactNode }) {
+ return (
+
+ );
+}
diff --git a/packages/web/components/app-shell/app-sidenav.tsx b/packages/web/components/app-shell/app-sidenav.tsx
new file mode 100644
index 0000000..fba80f6
--- /dev/null
+++ b/packages/web/components/app-shell/app-sidenav.tsx
@@ -0,0 +1,156 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const SIDEBAR_STORAGE_KEY = 'komunify-app-sidebar';
+
+const navItems = [
+ {
+ label: 'Dashboard',
+ href: '/dashboard',
+ icon: (
+
+ ),
+ },
+ {
+ label: 'Explore',
+ href: '/explore',
+ icon: (
+
+ ),
+ },
+ {
+ label: 'Start',
+ href: '/start',
+ icon: (
+
+ ),
+ },
+] as const;
+
+export function AppSidenav() {
+ const pathname = usePathname();
+ const [collapsed, setCollapsed] = useState(false);
+
+ useEffect(() => {
+ const storedValue = window.localStorage.getItem(SIDEBAR_STORAGE_KEY);
+
+ if (storedValue !== null) {
+ setCollapsed(storedValue === 'true');
+ }
+ }, []);
+
+ function toggleSidebar() {
+ setCollapsed((currentValue) => {
+ const nextValue = !currentValue;
+ window.localStorage.setItem(SIDEBAR_STORAGE_KEY, String(nextValue));
+ return nextValue;
+ });
+ }
+
+ return (
+
+ );
+}