Use shadcn/ui built-in check for sidebar state (#72)

* feat: use shadcn built-in check for sidebar state

* chore: remove unused import

Author: JoeyMckenzie

app/Http/Middleware/HandleInertiaRequests.php

@@ -49,7 +49,8 @@ public function share(Request $request): array
             'ziggy' => fn (): array => [
                 ...(new Ziggy)->toArray(),
                 'location' => $request->url(),
-            ]
+            ],
+            'sidebarOpen' => $request->cookie('sidebar_state') === 'true',
         ];
     }
 }

bootstrap/app.php

@@ -14,7 +14,7 @@
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware) {
-        $middleware->encryptCookies(except: ['appearance']);
+        $middleware->encryptCookies(except: ['appearance', 'sidebar_state']);
 
         $middleware->web(append: [
             HandleAppearance::class,

resources/js/components/app-shell.tsx

@@ -1,29 +1,18 @@
 import { SidebarProvider } from '@/components/ui/sidebar';
-import { useState } from 'react';
+import { SharedData } from '@/types';
+import { usePage } from '@inertiajs/react';
 
 interface AppShellProps {
     children: React.ReactNode;
     variant?: 'header' | 'sidebar';
 }
 
 export function AppShell({ children, variant = 'header' }: AppShellProps) {
-    const [isOpen, setIsOpen] = useState(() => (typeof window !== 'undefined' ? localStorage.getItem('sidebar') !== 'false' : true));
-
-    const handleSidebarChange = (open: boolean) => {
-        setIsOpen(open);
-
-        if (typeof window !== 'undefined') {
-            localStorage.setItem('sidebar', String(open));
-        }
-    };
+    const isOpen = usePage<SharedData>().props.sidebarOpen;
 
     if (variant === 'header') {
         return <div className="flex min-h-screen w-full flex-col">{children}</div>;
     }
 
-    return (
-        <SidebarProvider defaultOpen={isOpen} open={isOpen} onOpenChange={handleSidebarChange}>
-            {children}
-        </SidebarProvider>
-    );
+    return <SidebarProvider defaultOpen={isOpen}>{children}</SidebarProvider>;
 }

resources/js/types/index.d.ts

@@ -27,6 +27,7 @@ export interface SharedData {
     quote: { message: string; author: string };
     auth: Auth;
     ziggy: Config & { location: string };
+    sidebarOpen: boolean;
     [key: string]: unknown;
 }