fix bug menu ordering

app/Models/User.php

@@ -78,6 +78,7 @@ class User extends Authenticatable
                             $this->roles->each(fn (Role $role) => $query->orWhereIn('permissions.id', $role->permissions->pluck('id')));
                         })->orDoesntHave('permissions');
                     })
+                    ->orderBy('position')
                     ->with('childs')
                     ->get();
     }

resources/js/Components/DashboardLayout/Sidebar.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { getCurrentInstance, ref } from 'vue'
+import { getCurrentInstance, onMounted, ref } from 'vue'
 import axios from 'axios'
 import { usePage } from '@inertiajs/inertia-vue3'
 import Builder from './Sidebar/Builder.vue'
 import Icon from '@/Components/Icon.vue'
 import Swal from 'sweetalert2'
+import { Inertia } from '@inertiajs/inertia'
 
 const self = getCurrentInstance()
 const menus = ref(usePage().props.value.$menus || [])
@@ -27,7 +28,9 @@ const fetch = async () => {
   }
 }
 
-fetch()
+Inertia.on('finish', () => fetch())
+
+onMounted(fetch)
 </script>
 
 <style scoped>

resources/js/Pages/Superuser/Menu/Child.vue

@@ -28,10 +28,10 @@ onUpdated(rounded)
 </script>
 
 <template>
-  <div class="flex items-center space-x-2 dark:bg-gray-800 rounded-md px-4 py-2" :draggable="true">
+  <div class="flex items-center space-x-2 dark:bg-gray-800 rounded-md px-4 py-2" :draggable="true" :id="`menu:${menu.id}`">
     <div class="flex items-center space-x-2 w-full" :draggable="false">
       <Icon :name="menu.icon" :draggable="false" />
-      <p class="uppercase" :draggable="false">{{ menu.name }}({{ menu.position }})</p>
+      <p class="uppercase" :draggable="false">{{ menu.name }}</p>
     </div>
 
     <div ref="container" class="flex items-center flex-none rounded-md border dark:border-gray-800" :draggable="false">