Generated by Spark: Would be nice if sidebar pushed content to right

2026-04-24 13:44:54 +00:00 · 2026-01-17 17:51:12 +00:00
parent feaa7d7a9e
commit 6c05d8daab
3 changed files with 100 additions and 96 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,6 +8,7 @@ import { BrowserRouter, useLocation } from 'react-router-dom'
 console.log('[APP_ROUTER] ✅ React Router imported')

 import { AppHeader } from '@/components/organisms'
+import { NavigationMenu } from '@/components/organisms/NavigationMenu'
 console.log('[APP_ROUTER] ✅ Header components imported')

 import { LoadingFallback } from '@/components/molecules'
@@ -33,6 +34,9 @@ console.log('[APP_ROUTER] ✅ Component registry imported')
 import { RouterProvider } from '@/router'
 console.log('[APP_ROUTER] ✅ Router provider imported')

+import { SidebarProvider, SidebarInset, Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'
+console.log('[APP_ROUTER] ✅ Sidebar provider imported')
+
 const { GlobalSearch, KeyboardShortcutsDialog, PreviewDialog } = DialogRegistry
 const { PWAInstallPrompt, PWAUpdatePrompt, PWAStatusBar } = PWARegistry
 console.log('[APP_ROUTER] ✅ Dialog and PWA components registered')
@@ -186,87 +190,99 @@ function AppLayout() {
  console.log('[APP_ROUTER] 🎨 Rendering AppLayout UI')
  
  return (
-    <div className="h-screen flex flex-col bg-background">
+    <SidebarProvider defaultOpen={true}>
      <Suspense fallback={<div className="h-1 bg-primary animate-pulse" />}>
        <PWAStatusBar />
      </Suspense>
      <Suspense fallback={null}>
        <PWAUpdatePrompt />
      </Suspense>
-      <AppHeader
+      
+      <NavigationMenu
        activeTab={currentPage}
        onTabChange={navigateToPage}
        featureToggles={featureToggles}
        errorCount={errorCount}
-        lastSaved={lastSaved}
-        currentProject={getCurrentProject()}
-        onProjectLoad={handleProjectLoad}
-        onSearch={() => {
-          console.log('[APP_ROUTER] 🔍 Search opened')
-          setSearchOpen(true)
-        }}
-        onShowShortcuts={() => {
-          console.log('[APP_ROUTER] ⌨️ Shortcuts dialog opened')
-          setShortcutsOpen(true)
-        }}
-        onGenerateAI={() => {
-          console.log('[APP_ROUTER] 🤖 AI generation requested')
-          toast.info('AI generation coming soon')
-        }}
-        onExport={() => {
-          console.log('[APP_ROUTER] 📤 Export requested')
-          toast.info('Export coming soon')
-        }}
-        onPreview={() => {
-          console.log('[APP_ROUTER] 👁️ Preview opened')
-          setPreviewOpen(true)
-        }}
-        onShowErrors={() => {
-          console.log('[APP_ROUTER] ⚠️ Navigating to errors page')
-          navigateToPage('errors')
-        }}
      />
-      <div className="flex-1 overflow-hidden">
-        <RouterProvider 
-          featureToggles={featureToggles}
-          stateContext={{
-            files,
-            models,
-            components,
-            componentTrees,
-            workflows,
-            lambdas,
-            theme,
-            playwrightTests,
-            storybookStories,
-            unitTests,
-            flaskConfig,
-            nextjsConfig,
-            npmSettings,
-            featureToggles,
-            activeFileId,
-          }}
-          actionContext={{
-            handleFileChange,
-            setActiveFileId,
-            handleFileClose,
-            handleFileAdd,
-            setModels,
-            setComponents,
-            setComponentTrees,
-            setWorkflows,
-            setLambdas,
-            setTheme,
-            setPlaywrightTests,
-            setStorybookStories,
-            setUnitTests,
-            setFlaskConfig,
-            setNextjsConfig,
-            setNpmSettings,
-            setFeatureToggles,
-          }}
-        />
-      </div>
+      
+      <SidebarInset>
+        <div className="h-screen flex flex-col bg-background">
+          <AppHeader
+            activeTab={currentPage}
+            onTabChange={navigateToPage}
+            featureToggles={featureToggles}
+            errorCount={errorCount}
+            lastSaved={lastSaved}
+            currentProject={getCurrentProject()}
+            onProjectLoad={handleProjectLoad}
+            onSearch={() => {
+              console.log('[APP_ROUTER] 🔍 Search opened')
+              setSearchOpen(true)
+            }}
+            onShowShortcuts={() => {
+              console.log('[APP_ROUTER] ⌨️ Shortcuts dialog opened')
+              setShortcutsOpen(true)
+            }}
+            onGenerateAI={() => {
+              console.log('[APP_ROUTER] 🤖 AI generation requested')
+              toast.info('AI generation coming soon')
+            }}
+            onExport={() => {
+              console.log('[APP_ROUTER] 📤 Export requested')
+              toast.info('Export coming soon')
+            }}
+            onPreview={() => {
+              console.log('[APP_ROUTER] 👁️ Preview opened')
+              setPreviewOpen(true)
+            }}
+            onShowErrors={() => {
+              console.log('[APP_ROUTER] ⚠️ Navigating to errors page')
+              navigateToPage('errors')
+            }}
+          />
+          <div className="flex-1 overflow-hidden">
+            <RouterProvider 
+              featureToggles={featureToggles}
+              stateContext={{
+                files,
+                models,
+                components,
+                componentTrees,
+                workflows,
+                lambdas,
+                theme,
+                playwrightTests,
+                storybookStories,
+                unitTests,
+                flaskConfig,
+                nextjsConfig,
+                npmSettings,
+                featureToggles,
+                activeFileId,
+              }}
+              actionContext={{
+                handleFileChange,
+                setActiveFileId,
+                handleFileClose,
+                handleFileAdd,
+                setModels,
+                setComponents,
+                setComponentTrees,
+                setWorkflows,
+                setLambdas,
+                setTheme,
+                setPlaywrightTests,
+                setStorybookStories,
+                setUnitTests,
+                setFlaskConfig,
+                setNextjsConfig,
+                setNpmSettings,
+                setFeatureToggles,
+              }}
+            />
+          </div>
+        </div>
+      </SidebarInset>

      <Suspense fallback={null}>
        <GlobalSearch
@@ -302,7 +318,7 @@ function AppLayout() {
      <Suspense fallback={null}>
        <PWAInstallPrompt />
      </Suspense>
-    </div>
+    </SidebarProvider>
  )
 }

--- a/src/components/organisms/AppHeader.tsx
+++ b/src/components/organisms/AppHeader.tsx
@@ -1,5 +1,5 @@
 import { AppBranding, Breadcrumb, SaveIndicator } from '@/components/molecules'
-import { NavigationMenu } from '@/components/organisms/NavigationMenu'
+import { SidebarTrigger } from '@/components/ui/sidebar'
 import { ToolbarActions } from '@/components/organisms/ToolbarActions'
 import { ProjectManager } from '@/components/ProjectManager'
 import { FeatureToggles, Project } from '@/types/project'
@@ -42,12 +42,7 @@ export function AppHeader({
        <div className="px-4 sm:px-6 py-3 sm:py-4">
          <Flex justify="between" align="center" gap="sm">
            <Flex align="center" gap="sm" className="flex-1 min-w-0">
-              <NavigationMenu
-                activeTab={activeTab}
-                onTabChange={onTabChange}
-                featureToggles={featureToggles}
-                errorCount={errorCount}
-              />
+              <SidebarTrigger />
              <AppBranding />
              <SaveIndicator lastSaved={lastSaved} />
            </Flex>
--- a/src/components/organisms/NavigationMenu.tsx
+++ b/src/components/organisms/NavigationMenu.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import { Button } from '@/components/ui/button'
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'
-import { List, CaretDoubleDown, CaretDoubleUp } from '@phosphor-icons/react'
+import { CaretDoubleDown, CaretDoubleUp } from '@phosphor-icons/react'
 import { NavigationItem, NavigationGroupHeader } from '@/components/molecules'
 import { navigationGroups, NavigationItemData } from '@/lib/navigation-config'
 import { FeatureToggles } from '@/types/project'
@@ -22,7 +22,6 @@ export function NavigationMenu({
  featureToggles,
  errorCount = 0,
 }: NavigationMenuProps) {
-  const [open, setOpen] = useState(false)
  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
    new Set(['overview', 'development', 'automation', 'design', 'backend', 'testing', 'tools'])
  )
@@ -31,7 +30,6 @@ export function NavigationMenu({

  const handleItemClick = (value: string) => {
    onTabChange(value)
-    setOpen(false)
  }
  
  const handleItemHover = (value: string) => {
@@ -84,16 +82,9 @@ export function NavigationMenu({
  }

  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
-        <Button variant="outline" size="icon" className="shrink-0">
-          <List size={20} weight="bold" />
-        </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="w-80">
-        <SheetHeader>
-          <SheetTitle>Navigation</SheetTitle>
-        </SheetHeader>
+    <Sidebar side="left" collapsible="offcanvas">
+      <SidebarHeader className="px-4 py-4 border-b">
+        <h2 className="text-lg font-semibold">Navigation</h2>
        <div className="flex gap-2 mt-4">
          <Button
            variant="outline"
@@ -114,8 +105,10 @@ export function NavigationMenu({
            Collapse All
          </Button>
        </div>
-        <ScrollArea className="h-[calc(100vh-12rem)] mt-4">
-          <div className="space-y-2">
+      </SidebarHeader>
+      <SidebarContent>
+        <ScrollArea className="h-full px-4">
+          <div className="space-y-2 py-4">
            {navigationGroups.map((group) => {
              const visibleItemsCount = getVisibleItemsCount(group.id)
              if (visibleItemsCount === 0) return null
@@ -161,7 +154,7 @@ export function NavigationMenu({
            })}
          </div>
        </ScrollArea>
-      </SheetContent>
-    </Sheet>
+      </SidebarContent>
+    </Sidebar>
  )
 }