Use shadcn built-in check for sidebar state (#82)

* fix: use sidebar cookie for state

* chore: rename sidebar cookie

* Adding update to have sidebar open by default

* Update HandleInertiaRequests.php

---------

Co-authored-by: Tony Lea <[email protected]>
Co-authored-by: Taylor Otwell <[email protected]>

Author: 3 people

app/Http/Middleware/HandleInertiaRequests.php

@@ -50,6 +50,7 @@ public function share(Request $request): array
                 ...(new Ziggy)->toArray(),
                 'location' => $request->url(),
             ],
+            'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $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/AppShell.vue

@@ -1,30 +1,22 @@
 <script setup lang="ts">
 import { SidebarProvider } from '@/components/ui/sidebar';
-import { onMounted, ref } from 'vue';
+import { usePage } from '@inertiajs/vue3';
+import { SharedData } from '@/types';
 
 interface Props {
     variant?: 'header' | 'sidebar';
 }
 
 defineProps<Props>();
 
-const isOpen = ref(true);
-
-onMounted(() => {
-    isOpen.value = localStorage.getItem('sidebar') !== 'false';
-});
-
-const handleSidebarChange = (open: boolean) => {
-    isOpen.value = open;
-    localStorage.setItem('sidebar', String(open));
-};
+const isOpen = usePage<SharedData>().props.sidebarOpen;
 </script>
 
 <template>
     <div v-if="variant === 'header'" class="flex min-h-screen w-full flex-col">
         <slot />
     </div>
-    <SidebarProvider v-else :default-open="isOpen" :open="isOpen" @update:open="handleSidebarChange">
+    <SidebarProvider v-else :default-open="isOpen">
         <slot />
     </SidebarProvider>
 </template>

resources/js/components/ui/sidebar/utils.ts

@@ -1,7 +1,7 @@
 import { createContext } from 'radix-vue';
 import type { ComputedRef, Ref } from 'vue';
 
-export const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 export const SIDEBAR_WIDTH = '16rem';
 export const SIDEBAR_WIDTH_MOBILE = '18rem';

resources/js/types/index.d.ts

@@ -23,6 +23,7 @@ export interface SharedData extends PageProps {
     quote: { message: string; author: string };
     auth: Auth;
     ziggy: Config & { location: string };
+    sidebarOpen: boolean;
 }
 
 export interface User {