refactor: implement layout store for sidebar state management; update AppLayout and NavigationSidebar components to utilize new store

Author: tikazyq

packages/web/app/AppLayout.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { NavigationSidebar, ErrorBoundary, AppLayoutSkeleton, TopNavbar } from '@/components';
+import { AppLayoutSkeleton, ErrorBoundary, NavigationSidebar, TopNavbar } from '@/components';
 import { SidebarProvider } from '@/components/ui/sidebar';
+import { useLayoutStore } from '@/stores';
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -11,6 +12,8 @@ interface AppLayoutProps {
 export function AppLayout({ children }: AppLayoutProps) {
   const [mounted, setMounted] = useState(false);
 
+  const { sidebarOpen, setSidebarOpen } = useLayoutStore();
+
   // Handle client-side hydration
   useEffect(() => {
     setMounted(true);
@@ -25,7 +28,13 @@ export function AppLayout({ children }: AppLayoutProps) {
     <ErrorBoundary>
       <div className="min-h-screen bg-background w-full">
         <TopNavbar />
-        <SidebarProvider>
+        <SidebarProvider
+          defaultOpen={sidebarOpen}
+          open={sidebarOpen}
+          onOpenChange={(open) => {
+            setSidebarOpen(open);
+          }}
+        >
           <div className="flex w-full h-[calc(100vh-3rem)]">
             <NavigationSidebar />
             <div className="flex-1 flex flex-col w-full">

packages/web/app/components/layout/NavigationSidebar.tsx

@@ -11,13 +11,13 @@ import {
   SidebarMenuItem,
   SidebarTrigger,
 } from '@/components/ui/sidebar';
-import { Home, Package, SquareKanban } from 'lucide-react';
+import { Home, SquareKanban } from 'lucide-react';
 
 interface SidebarItem {
   key: string;
   label: string;
   icon: React.ReactNode;
-  path: string;
+  onClick?: () => void;
 }
 
 export function NavigationSidebar() {
@@ -37,98 +37,48 @@ export function NavigationSidebar() {
     return false;
   };
 
-  // Get contextual menu items based on current path
-  const getMenuItems = () => {
-    if (!mounted) return [];
-
-    const pathParts = pathname.split('/').filter(Boolean);
-
-    // Overview page (/)
-    if (pathname === '/') {
-      return [
-        {
-          key: 'projects',
-          label: 'Projects',
-          icon: <Package size={16} />,
-        },
-      ];
-    }
-
-    // Projects page (/projects)
-    if (pathname === '/projects') {
-      return [
-        {
-          key: 'projects',
-          label: 'Projects',
-          icon: <Package size={16} />,
-        },
-      ];
+  const getProjectId = () => {
+    const matched = pathname.match(/\/projects\/(\w+)/);
+    if (matched) {
+      return matched[1];
     }
+    return null;
+  };
 
-    if (pathname.match(/^\/projects\/\w+\/devlogs/)) {
-    }
+  const projectsMenuItems = [
+    {
+      key: 'overview',
+      label: 'Overview',
+      icon: <Home size={16} />,
+      onClick: () => router.push('/projects'),
+    },
+  ];
+  const projectDetailMenuItems = [
+    {
+      key: 'overview',
+      label: 'Overview',
+      icon: <Home size={16} />,
+      onClick: () => router.push(`/projects/${getProjectId()}`),
+    },
+    {
+      key: 'list',
+      label: 'Devlogs',
+      icon: <SquareKanban size={16} />,
+      onClick: () => router.push(`/projects/${getProjectId()}/devlogs`),
+    },
+  ];
 
-    // Project detail page (/projects/[id])
-    if (pathParts.length === 2 && pathParts[0] === 'projects') {
-      return [
-        {
-          key: 'overview',
-          label: 'Overview',
-          icon: <Home size={16} />,
-        },
-        {
-          key: 'list',
-          label: 'Devlogs',
-          icon: <SquareKanban size={16} />,
-        },
-      ];
-    }
+  // Get contextual menu items based on current path
+  const getMenuItems = (): SidebarItem[] => {
+    if (!mounted) return [];
 
-    // Project devlogs page (/projects/[id]/devlogs)
-    if (pathParts.length === 3 && pathParts[0] === 'projects' && pathParts[2] === 'devlogs') {
-      return [
-        {
-          key: 'overview',
-          label: 'Overview',
-          icon: <Home size={16} />,
-        },
-        {
-          key: 'list',
-          label: 'Devlogs',
-          icon: <SquareKanban size={16} />,
-        },
-      ];
-    }
+    const pathParts = pathname.split('/').filter(Boolean);
 
-    // Devlog detail page (/projects/[id]/devlogs/[devlogId])
-    if (pathParts.length === 4 && pathParts[0] === 'projects' && pathParts[2] === 'devlogs') {
-      return [
-        {
-          key: 'overview',
-          label: 'Overview',
-          icon: <Home size={16} />,
-        },
-        {
-          key: 'list',
-          label: 'Devlogs',
-          icon: <SquareKanban size={16} />,
-        },
-      ];
+    if (pathParts.length < 2) {
+      return projectsMenuItems;
+    } else {
+      return projectDetailMenuItems;
     }
-
-    // Default fallback
-    return [
-      {
-        key: 'overview',
-        label: 'Overview',
-        icon: <Home size={16} />,
-      },
-      {
-        key: 'projects',
-        label: 'Projects',
-        icon: <Package size={16} />,
-      },
-    ];
   };
 
   // Determine selected key based on current pathname and menu items
@@ -161,6 +111,7 @@ export function NavigationSidebar() {
               <SidebarMenuButton
                 isActive={getSelectedKey() === item.key}
                 className="flex items-center gap-3 px-4 py-3 text-sm font-medium min-h-[44px] rounded-md"
+                onClick={item.onClick}
               >
                 {item.icon}
                 <span>{item.label}</span>

packages/web/app/stores/index.ts

@@ -1,4 +1,5 @@
 // Export all stores
+export * from './layout-store';
 export * from './project-store';
 export * from './devlog-store';
 export * from './realtime-store';

packages/web/app/stores/layout-store.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+interface LayoutState {
+  // State
+  sidebarOpen: boolean;
+
+  // Actions
+  setSidebarOpen: (open: boolean) => void;
+}
+
+export const useLayoutStore = create<LayoutState>()(
+  subscribeWithSelector((set) => ({
+    sidebarOpen: false,
+
+    // Action to set sidebar open state
+    setSidebarOpen: (open: boolean) => set({ sidebarOpen: open }),
+  })),
+);