fix conflicts

Author: taylorotwell

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,

components.json

@@ -1,20 +1,20 @@
 {
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
-  "typescript": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "resources/css/app.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "composables": "@/composables",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib"
-  },
-  "iconLibrary": "lucide"
+    "$schema": "https://shadcn-vue.com/schema.json",
+    "style": "default",
+    "typescript": true,
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "resources/css/app.css",
+        "baseColor": "neutral",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "composables": "@/composables",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib"
+    },
+    "iconLibrary": "lucide"
 }

package-lock.json

@@ -33,7 +33,7 @@
         "laravel-vite-plugin": "^1.0",
         "lucide": "^0.468.0",
         "lucide-vue-next": "^0.468.0",
-        "radix-vue": "^1.9.11",
+        "reka-ui": "^2.0.0",
         "tailwind-merge": "^2.5.5",
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",

package.json

@@ -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/AppShell.vue

@@ -15,7 +15,10 @@ const page = usePage<SharedData>();
         <SidebarGroupLabel>Platform</SidebarGroupLabel>
         <SidebarMenu>
             <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton as-child :is-active="item.href === page.url">
+                <SidebarMenuButton 
+                    as-child :is-active="item.href === page.url"
+                    :tooltip="item.title"
+                >
                     <Link :href="item.href">
                         <component :is="item.icon" />
                         <span>{{ item.title }}</span>

resources/js/components/NavMain.vue

@@ -22,8 +22,8 @@ const { isMobile, state } = useSidebar();
                         <ChevronsUpDown class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent
-                    class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+                <DropdownMenuContent 
+                    class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                     :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
                     align="end"
                     :side-offset="4"

resources/js/components/NavUser.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils';
-import { AvatarRoot } from 'radix-vue';
+import { AvatarRoot } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { avatarVariant, type AvatarVariants } from '.';
 

resources/js/components/ui/avatar/Avatar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
+import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui';
 
 const props = defineProps<AvatarFallbackProps>();
 </script>