now menu can be drag and drop

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

@@ -8,7 +8,7 @@ import Icon from '@/Components/Icon.vue'
 import axios from 'axios'
 import Swal from 'sweetalert2'
 import Select from '@vueform/multiselect'
-import Builder from './Builder.vue'
+import Nested from './Nested.vue'
 
 const self = getCurrentInstance()
 const { permissions, routes, icons } = defineProps({
@@ -107,10 +107,9 @@ const destroy = async menu => {
 
 const submit = () => form.id ? update() : store()
 
-const up = menu => Inertia.patch(route('superuser.menu.up', menu.id))
-const down = menu => Inertia.patch(route('superuser.menu.down', menu.id))
-const right = menu => Inertia.patch(route('superuser.menu.right', menu.id))
-const left = menu => Inertia.patch(route('superuser.menu.left', menu.id))
+const save = () => {
+  return useForm({ menus: menus.value }).patch(route('superuser.menu.save'))
+}
 
 const esc = e => e.key === 'Escape' && close()
 
@@ -143,8 +142,19 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
       </template>
 
       <template #body>
-        <div class="flex flex-col p-2">
-          <Builder :menus="menus" :edit="edit" :destroy="destroy" :up="up" :down="down" :left="left" :right="right" />
+        <div class="flex flex-col space-y-1 p-2 max-h-96 overflow-auto">
+          <Nested :menus="menus" :edit="edit" :destroy="destroy" />
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex items-center space-x-1 dark:bg-gray-800 p-2">
+          <button @click.prevent="save" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
+            <div class="flex items-center space-x-1">
+              <Icon name="save" />
+              <p class="uppercase font-semibold">save</p>
+            </div>
+          </button>
         </div>
       </template>
     </Card>

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>