now menu is have initial value

app/Http/Middleware/HandleInertiaRequests.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Middleware;
 
+use App\Models\Menu;
 use App\Models\Permission;
 use App\Models\Role;
 use Illuminate\Http\Request;
@@ -63,6 +64,7 @@ class HandleInertiaRequests extends Middleware
                     return $prev;
                 }, $permissions);
             },
+            '$menus' => $request->user()?->menus(),
         ]);
     }
 }

resources/js/Components/DashboardLayout/Sidebar.vue

@@ -7,7 +7,7 @@ import Icon from '@/Components/Icon.vue'
 import Swal from 'sweetalert2'
 
 const self = getCurrentInstance()
-const menus = ref([])
+const menus = ref(usePage().props.value.$menus || [])
 const { user } = usePage().props.value
 
 const fetch = async () => {

resources/js/Components/DashboardLayout/Sidebar/Link.vue

@@ -8,13 +8,11 @@ const { menu } = defineProps({
 })
 
 const active = route().current(menu.route_or_url)
-
-if (route().has(menu.route_or_url))
-  menu.route_or_url = route(menu.route_or_url)
+const link = route().has(menu.route_or_url) ? route(menu.route_or_url) : menu.route_or_url
 </script>
 
 <template>
-  <Link :href="menu.route_or_url" class="w-full px-4 py-3" :class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${active && 'bg-slate-800'}`">
+  <Link :href="link" class="w-full px-4 py-3" :class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${active && 'bg-slate-800'}`">
     <div class="flex items-center space-x-2">
       <Icon :name="menu.icon" />
       <p class="uppercase font-semibold">{{ menu.name }}</p>