From 6e474248183507e55bc4118501396aa5880def83 Mon Sep 17 00:00:00 2001 From: abullaisi Date: Thu, 16 Jul 2026 14:43:41 +0700 Subject: [PATCH] app: prototype-style shell for dashboard/explore/start (presentational only) Collapsible sidenav on the elevated card surface: logo, member nav with icons and active states, 232px to 64px icon rail persisted in localStorage, hidden below 900px. Pages are wrapped only; no wallet, data, or logic changes. Co-Authored-By: Claude Fable 5 --- packages/web/app/dashboard/page.tsx | 5 +- packages/web/app/explore/page.tsx | 5 +- packages/web/app/start/page.tsx | 5 +- .../web/components/app-shell/app-shell.tsx | 12 ++ .../web/components/app-shell/app-sidenav.tsx | 156 ++++++++++++++++++ 5 files changed, 174 insertions(+), 9 deletions(-) create mode 100644 packages/web/components/app-shell/app-shell.tsx create mode 100644 packages/web/components/app-shell/app-sidenav.tsx 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 ( +
+ +
{children}
+
+ ); +} 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 ( + + ); +}