now menu can be drag and drop

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

@@ -0,0 +1,38 @@
+<script setup>
+import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
+import Dragable from 'vuedraggable'
+import Icon from '@/Components/Icon.vue'
+
+const self = getCurrentInstance()
+const { menus, edit, destroy } = defineProps({
+  menus: Array,
+  edit: Function,
+  destroy: Function,
+})
+</script>
+
+<template>
+  <Dragable
+    tag="ul"
+    :list="menus"
+    :group="{ name: 'g1' }"
+    item-key="name">
+    <template #item="{ element }">
+      <div class="flex flex-col space-y-1">
+        <div class="flex items-center space-x-2 dark:bg-gray-800 dark:hover:bg-gray-900 rounded-md px-4 py-2">
+          <div class="flex items-center space-x-2 w-full">
+            <Icon :name="element.icon" />
+            <p class="uppercase">{{ element.name }}</p>
+          </div>
+
+          <div ref="container" class="flex-none flex items-center rounded-md space-x-1">
+            <Icon @click.prevent="edit(element)" name="edit" class="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
+            <Icon v-if="element.deleteable" @click.prevent="destroy(element)" name="trash" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded-md text-sm text-white transition-all cursor-pointer" />
+          </div>
+        </div>
+
+        <Nested :menus="element.childs" :edit="edit" :destroy="destroy" class="ml-8" />
+      </div>
+    </template>
+  </Dragable>
+</template>