create menu crud

app/Http/Controllers/Superuser/MenuController.php

@@ -0,0 +1,339 @@
+<?php
+
+namespace App\Http\Controllers\Superuser;
+
+use App\Http\Controllers\Controller;
+use App\Models\Menu;
+use App\Models\Permission;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Route;
+use Inertia\Inertia;
+use SplFileInfo;
+use Throwable;
+
+class MenuController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        $routes = array_filter(array_map(fn ($route) => $route->getName(), Route::getRoutes()->getRoutes()));
+
+        return Inertia::render('Superuser/Menu/Index')->with([
+            'permissions' => Permission::get(),
+            'routes' => array_values($routes),
+            'icons' => $this->icons(),
+        ]);
+    }
+
+    /**
+     * @return array
+     */
+    public function icons()
+    {
+        return array_map(
+            callback: fn (string $name) => mb_substr(
+                string: $name,
+                start: 0,
+                length: -4
+            ),
+            array: array_map(
+                callback: fn (SplFileInfo $path) => $path->getFilename(),
+                array: array_map(
+                    callback: fn (string $path) => new SplFileInfo(
+                        filename: $path
+                    ),
+                    array: glob(
+                        pattern: public_path(
+                            path: '/vendors/fontawesome/svgs/**/*.svg'
+                        ),
+                    ),
+                ),
+            ),
+        );
+    }
+
+    /**
+     * @return \Illuminate\Http\Response
+     */
+    public function get()
+    {
+        return Menu::with(['childs', 'permissions'])
+                    ->whereNull('parent_id')
+                    ->orderBy('position')
+                    ->get();
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(Request $request)
+    {
+        $post = $request->validate([
+            'name' => 'required|string',
+            'icon' => 'nullable|string',
+            'route_or_url' => 'nullable|string',
+            'actives.*' => 'nullable|string',
+            'permissions.*' => 'nullable|integer|exists:permissions,id',
+        ]);
+
+        $post['position'] = Menu::whereNull('parent_id')->count() + 1;
+
+        if ($menu = Menu::create($post)) {
+            $menu->permissions()->sync($request->input('permissions', []));
+
+            return redirect()->back()->with('success', __(
+                'menu `:name` has been created', [
+                    'name' => $menu->name,
+                ]
+            ));
+        }
+
+        return redirect()->back()->with('error', __(
+            'can\'t create menu',
+        ));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \App\Models\Menu $menu
+     * @return \Illuminate\Http\Response
+     */
+    public function update(Request $request, Menu $menu)
+    {
+        $request->validate([
+            'name' => 'required|string',
+            'icon' => 'nullable|string',
+            'route_or_url' => 'nullable|string',
+            'actives.*' => 'nullable|string',
+            'permissions.*' => 'nullable|integer|exists:permissions,id',
+        ]);
+
+        if ($menu->update($request->all())) {
+            $menu->permissions()->sync($request->input('permissions', []));
+
+            return redirect()->back()->with('success', __(
+                'menu `:name` has been updated', [
+                    'name' => $menu->name,
+                ]
+            ));
+        }
+
+        return redirect()->back()->with('error', __(
+            'can\'t update menu',
+        ));
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Models\Menu $menu
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Menu $menu)
+    {
+        if ($menu->deleteable) {
+            DB::beginTransaction();
+
+            try {
+                if ($menu->delete()) {
+                    Menu::where('parent_id', $menu->parent_id)
+                            ->where('position', '>', $menu->position)
+                            ->decrement('position');
+
+                    DB::commit();
+                    
+                    return redirect()->back()->with('success', __(
+                        'menu `:name` has been deleted', [
+                            'name' => $menu->name,
+                        ]
+                    ));
+                }
+            } catch (Throwable $e) {
+                DB::rollBack();
+            }
+        }
+
+        return redirect()->back()->with('error', __(
+            'can\'t delete menu',
+        ));
+    }
+
+    /**
+     * @param \App\Models\Menu $menu
+     * @return \Illuminate\Http\Response
+     */
+    public function up(Menu $menu)
+    {
+        $before = Menu::where('parent_id', $menu->parent_id)
+                        ->where('position', $menu->position - 1)
+                        ->first();
+
+        if (!$before) {
+            return redirect()->back()->with('error', __(
+                'can\'t find menu before `:name`', [
+                    'name' => $menu->name,
+                ]
+            ));
+        }
+
+        DB::beginTransaction();
+
+        try {
+            Menu::where('id', $before->id)->update([
+                'position' => $menu->position,
+            ]);
+    
+            $menu->update([
+                'position' => $before->position,
+            ]);
+
+            DB::commit();
+        } catch (Throwable $e) {
+            DB::rollBack();
+
+            return redirect()->back()->with('error', __($e->getMessage()));
+        }
+
+        return redirect()->back()->with('success', __(
+            'position has been updated',
+        ));
+    }
+
+    /**
+     * @param \App\Models\Menu $menu
+     * @return \Illuminate\Http\Response
+     */
+    public function down(Menu $menu)
+    {
+        $after = Menu::where('parent_id', $menu->parent_id)
+                        ->where('position', $menu->position + 1)
+                        ->first();
+
+        if (!$after) {
+            return redirect()->back()->with('error', __(
+                'can\'t find menu after `:name`', [
+                    'name' => $menu->name,
+                ]
+            ));
+        }
+
+        DB::beginTransaction();
+
+        try {
+            Menu::where('id', $after->id)->update([
+                'position' => $menu->position,
+            ]);
+    
+            $menu->update([
+                'position' => $after->position,
+            ]);
+
+            DB::commit();
+        } catch (Throwable $e) {
+            DB::rollBack();
+
+            return redirect()->back()->with('error', __($e->getMessage()));
+        }
+
+        return redirect()->back()->with('success', __(
+            'position has been updated',
+        ));
+    }
+
+    /**
+     * @param \App\Models\Menu $menu
+     * @return \Illuminate\Http\Response
+     */
+    public function right(Menu $menu)
+    {
+        $before = Menu::where('parent_id', $menu->parent_id)
+                        ->where('position', $menu->position - 1)
+                        ->withCount('childs')
+                        ->first();
+
+        if (!$before) {
+            return redirect()->back()->with('error', __(
+                'can\'t find menu before `:name`', [
+                    'name' => $menu->name,
+                ]
+            ));
+        }
+
+        DB::beginTransaction();
+
+        try {
+            Menu::where('parent_id', $menu->parent_id)
+                    ->where('position', '>', $menu->position)
+                    ->decrement('position');
+
+            $menu->update([
+                'parent_id' => $before->id,
+                'position' => $before->childs_count + 1,
+            ]);
+
+            DB::commit();
+        } catch (Throwable $e) {
+            DB::rollBack();
+
+            return redirect()->back()->with('error', __($e->getMessage()));
+        }
+
+        return redirect()->back()->with('success', __(
+            'position has been updated',
+        ));
+    }
+
+    /**
+     * @param \App\Models\Menu $menu
+     * @return \Illuminate\Http\Response
+     */
+    public function left(Menu $menu)
+    {
+        $parent = $menu->parent;
+
+        if (!$parent) {
+            return redirect()->back()->with('error', __(
+                'can\'t find parent menu `:name`', [
+                    'name' => $menu->name,
+                ]
+            ));
+        }
+
+        DB::beginTransaction();
+
+        try {
+            Menu::where('parent_id', $parent->parent_id)
+                    ->where('position', '>', $parent->position)
+                    ->increment('position');
+
+            Menu::where('parent_id', $menu->parent_id)
+                    ->where('position', '>', $menu->position)
+                    ->decrement('position');
+
+            $menu->update([
+                'parent_id' => $parent->parent_id,
+                'position' => $parent->position + 1,
+            ]);
+
+            DB::commit();
+        } catch (Throwable $e) {
+            DB::rollBack();
+
+            return redirect()->back()->with('error', __($e->getMessage()));
+        }
+
+        return redirect()->back()->with('success', __(
+            'position has been updated',
+        ));
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -64,7 +64,7 @@ class HandleInertiaRequests extends Middleware
                     return $prev;
                 }, $permissions);
             },
-            '$menus' => $request->user()?->menus(),
+            '$menus' => fn () => $request->user()?->menus(),
         ]);
     }
 }

app/Models/Menu.php

@@ -26,12 +26,19 @@ class Menu extends Model
         'deleteable',
     ];
 
+    /**
+     * @var string[]
+     */
+    protected $with = [
+        'permissions',
+    ];
+
     /**
      * @return \Illuminate\Database\Eloquent\Relations\HasOne
      */
     public function parent()
     {
-        return $this->hasOne(Menu::class, 'id', 'parent_id')->without(['childs'])->with(['parent']);
+        return $this->hasOne(Menu::class, 'id', 'parent_id')->without(['childs'])->withCount(['childs']);
     }
 
     /**

database/migrations/2022_07_15_192421_create_menus_table.php

@@ -21,7 +21,9 @@ return new class extends Migration
             $table->string('name');
             $table->string('icon')
                     ->default('circle');
-            $table->string('route_or_url')->default('#');
+            $table->string('route_or_url')
+                    ->nullable()
+                    ->default('#');
             $table->unsignedTinyInteger('position');
             $table->boolean('enable')->default(true);
             $table->boolean('deleteable')->default(true);

database/seeders/MenuSeeder.php

@@ -37,6 +37,9 @@ class MenuSeeder extends Seeder
             'icon' => 'key',
             'position' => 1,
             'deleteable' => false,
+            'actives' => [
+                'superuser.permission.*',
+            ],
         ]);
 
         $permission->permissions()->attach(
@@ -51,6 +54,9 @@ class MenuSeeder extends Seeder
             'icon' => 'user-cog',
             'position' => 2,
             'deleteable' => false,
+            'actives' => [
+                'superuser.role.*',
+            ],
         ]);
 
         $role->permissions()->attach(
@@ -65,6 +71,9 @@ class MenuSeeder extends Seeder
             'icon' => 'user',
             'position' => 3,
             'deleteable' => false,
+            'actives' => [
+                'superuser.user.*',
+            ],
         ]);
 
         $user->permissions()->attach(
@@ -79,6 +88,9 @@ class MenuSeeder extends Seeder
             'icon' => 'bars',
             'position' => 4,
             'deleteable' => false,
+            'actives' => [
+                'superuser.menu.*',
+            ],
         ]);
 
         $menu->permissions()->attach(

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

@@ -0,0 +1,81 @@
+<script>
+import { defineComponent, getCurrentInstance, h } from "vue"
+import Parent from './Parent.vue'
+import Child from './Child.vue'
+
+export default defineComponent({
+  props: {
+    menus: Array,
+    edit: Function,
+    destroy: Function,
+    up: Function,
+    down: Function,
+    left: Function,
+    right: Function,
+  },
+
+  data: () => ({
+    menuOnDrag: null,
+  }),
+
+  setup(props, attrs) {
+    return props => {
+      const self = getCurrentInstance()
+      const { menus, edit, destroy, up, down, left, right } = props
+      const drag = menu => self.menuOnDrag = menu
+      const drop = drop => {
+        const drag = self.menuOnDrag
+
+        if (!drag || !drop) {
+          return
+        }
+
+        if (drag.parent_id !== drop.parent_id) {
+          return
+        }
+
+        if (drag.position === drop.position) {
+          return
+        }
+
+        console.log(drag, drop)
+      }
+
+      const generate = menu => {
+        if (menu.childs?.length > 0) {
+          return h(Parent, {
+            ...attrs,
+            menu,
+            edit,
+            destroy,
+            drag,
+            drop,
+            up,
+            down,
+            left,
+            right,
+          }, menu.childs.map(child => generate(child)))
+        }
+
+        return h(Child, {
+          ...attrs,
+          menu,
+          edit,
+          destroy,
+          drag,
+          drop,
+          up,
+          down,
+          left,
+          right,
+        })
+      }
+
+      return h('div', {
+        ...attrs,
+        class: `flex flex-col space-y-1 ${attrs.class}`,
+      }, menus.map(menu => generate(menu)))
+    }
+  },
+})
+</script>

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

@@ -0,0 +1,46 @@
+<script setup>
+import { getCurrentInstance, onMounted, onUpdated, ref } from 'vue'
+import Icon from '@/Components/Icon.vue'
+import { Inertia } from '@inertiajs/inertia'
+
+const self = getCurrentInstance()
+const { menu, edit, destroy, drag, drop } = defineProps({
+  menu: Object,
+  edit: Function,
+  destroy: Function,
+  drag: Function,
+  drop: Function,
+  up: Function,
+  down: Function,
+  left: Function,
+  right: Function,
+})
+
+const rounded = () => {
+  const { container } = self.refs
+
+  container?.firstElementChild?.classList.add('rounded-l-md')
+  container?.lastElementChild?.classList.add('rounded-r-md')
+}
+
+onMounted(rounded)
+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 w-full" :draggable="false">
+      <Icon :name="menu.icon" :draggable="false" />
+      <p class="uppercase" :draggable="false">{{ menu.name }}({{ menu.position }})</p>
+    </div>
+
+    <div ref="container" class="flex items-center flex-none rounded-md border dark:border-gray-800" :draggable="false">
+      <Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+      <Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+      <Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+      <Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+      <Icon @click.prevent="edit(menu)" name="edit" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white transition-all cursor-pointer" :draggable="false" />
+      <Icon @click.prevent="destroy(menu)" name="trash" class="px-2 py-1 bg-red-600 hover:bg-red-700 text-white transition-all cursor-pointer" :draggable="false" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,283 @@
+<script setup>
+import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { useForm, Link } from '@inertiajs/inertia-vue3'
+import { Inertia } from '@inertiajs/inertia'
+import DashboardLayout from '@/Layouts/DashboardLayout.vue'
+import Card from '@/Components/Card.vue'
+import Icon from '@/Components/Icon.vue'
+import axios from 'axios'
+import Swal from 'sweetalert2'
+import Select from '@vueform/multiselect'
+import Builder from './Builder.vue'
+
+const self = getCurrentInstance()
+const { permissions, routes, icons } = defineProps({
+  permissions: Array,
+  routes: Array,
+  icons: Array,
+})
+
+const a = ref(true)
+const menus = ref([])
+const search = ref('')
+const form = useForm({
+  id: null,
+  name: '',
+  icon: 'circle',
+  route_or_url: '',
+  actives: [],
+  permissions: [],
+})
+
+const fetch = async () => {
+  try {
+    const response = await axios.get(route('api.v1.superuser.menu'))
+    menus.value = response.data
+  } catch (e) {
+    const response = await Swal.fire({
+      title: 'Are you want to try again?',
+      text: `${e}`,
+      icon: 'question',
+      showCancelButton: true,
+      showCloseButton: true,
+    })
+
+    response.isConfirmed && fetch()
+  }
+}
+const icon = ref(false)
+const open = ref(false)
+const show = () => {
+  open.value = true
+}
+
+const close = () => {
+  open.value = false
+  form.id && form.reset()
+}
+
+const store = () => {
+  return form.post(route('superuser.menu.store'), {
+    onSuccess: () => {
+      close()
+      form.reset()
+    },
+
+    onError: () => {
+      show()
+    },
+  })
+}
+
+const edit = menu => {
+  form.id = menu.id
+  form.name = menu.name
+  form.icon = menu.icon
+  form.route_or_url = menu.route_or_url
+  form.actives = menu.actives
+  form.permissions = menu.permissions.map(p => p.id)
+
+  nextTick(show)
+}
+
+const update = () => {
+  return form.patch(route('superuser.menu.update', form.id), {
+    onSuccess: () => {
+      close()
+      form.reset()
+    },
+
+    onError: () => {
+      show()
+    },
+  })
+}
+
+const destroy = async menu => {
+  const response = await Swal.fire({
+    title: 'Are you sure want to delete?',
+    text: 'You can\'t recover it after deleted',
+    icon: 'question',
+    showCloseButton: true,
+    showCancelButton: true,
+  })
+
+  response.isConfirmed && Inertia.delete(route('superuser.menu.destroy', menu.id))
+}
+
+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 esc = e => e.key === 'Escape' && close()
+
+Inertia.on('finish', () => {
+  a.value = false
+  nextTick(() => a.value = true)
+})
+
+Inertia.on('finish', () => fetch())
+
+onMounted(fetch)
+onMounted(() => window.addEventListener('keydown', esc))
+onUnmounted(() => window.removeEventListener('keydown', esc))
+</script>
+
+<style src="@vueform/multiselect/themes/default.css"></style>
+
+<template>
+  <DashboardLayout title="Menu">
+    <Card class="dark:bg-gray-700 dark:text-gray-100">
+      <template #header>
+        <div class="flex items-center space-x-2 p-2 dark:bg-gray-800">
+          <button @click.prevent="show" 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="plus" />
+              <p class="uppercase font-semibold">create</p>
+            </div>
+          </button>
+        </div>
+      </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>
+      </template>
+    </Card>
+  </DashboardLayout>
+
+  <transition name="fade">
+    <div v-if="open" class="fixed top-0 left-0 w-full h-screen flex items-center justify-center bg-black bg-opacity-40">
+      <form @submit.prevent="submit" class="w-full max-w-5xl rounded-md shadow-xl">
+        <Card class="dark:bg-gray-700 dark:text-gray-100">
+          <template #header>
+            <div class="flex items-center space-x-2 p-2 justify-end dark:bg-gray-800">
+              <Icon @click.prevent="close" name="times" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
+            </div>
+          </template>
+
+          <template #body>
+            <div class="flex flex-col space-y-2 p-4">
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="name" class="lowercase first-letter:capitalize w-1/3">name</label>
+                  <input type="text" name="name" v-model="form.name" ref="name" class="w-full bg-transparent rounded px-3 py-2 border dark:border-gray-800 uppercase placeholder:capitalize" placeholder="name" required>
+                </div>
+
+                <div v-if="form.errors.name" class="text-right text-sm text-red-500">{{ form.errors.name }}</div>
+              </div>
+
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="route_or_url" class="lowercase first-letter:capitalize w-1/3">route name or url</label>
+                  <Select
+                    v-model="form.route_or_url"
+                    :options="routes"
+                    :searchable="true"
+                    :createOption="true"
+                    :value="form.route_or_url"
+                    class="text-gray-800 placeholder:capitalize"
+                    placeholder="route name or url" />
+                </div>
+
+                <div v-if="form.errors.route_or_url" class="text-right text-sm text-red-500">{{ form.errors.route_or_url }}</div>
+              </div>
+
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="actives" class="lowercase first-letter:capitalize w-1/3">actives</label>
+                  <Select
+                    v-model="form.actives"
+                    :options="[...routes, ...form.actives.filter(active => ! routes.includes(active))]"
+                    :searchable="true"
+                    :closeOnSelect="false"
+                    :clearOnSelect="false"
+                    :createTag="true"
+                    mode="tags"
+                    class="text-gray-800 placeholder:capitalize"
+                    placeholder="actives" />
+                </div>
+
+                <div v-if="form.errors.actives" class="text-right text-sm text-red-500">{{ form.errors.actives }}</div>
+              </div>
+
+              <div class="flex flex-col space-y-1">
+                <div class="flex items-center space-x-2">
+                  <label for="permissions" class="lowercase first-letter:capitalize w-1/3">permissions</label>
+                  <Select
+                    v-model="form.permissions"
+                    :options="permissions.map(p => ({
+                      label: p.name,
+                      value: p.id,
+                    }))"
+                    :searchable="true"
+                    :closeOnSelect="false"
+                    :clearOnSelect="false"
+                    mode="tags"
+                    class="text-gray-800 placeholder:capitalize"
+                    placeholder="permissions" />
+                </div>
+
+                <div v-if="form.errors.permissions" class="text-right text-sm text-red-500">{{ form.errors.permissions }}</div>
+              </div>
+
+              <div class="flex items-center space-x-2">
+                <label class="flex-none lowercase first-letter:capitalize w-1/4">icon</label>
+
+                <div class="flex items-center justify-between w-full">
+                  <p class="text-3xl">
+                    <Icon :name="form.icon" class="dark:text-white" />
+                  </p>
+
+                  <p class="text-sm uppercase">{{ form.icon }}</p>
+                  
+                  <button @click.prevent="icon = true" type="button" class="bg-blue-600 hover hover:bg-blue-700 rounded-md px-3 py-1 text-white text-sm transition-all">
+                    <div class="flex items-center space-x-1">
+                      <Icon name="edit" />
+
+                      <p class="uppercase font-semibold">change</p>
+                    </div>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </template>
+
+          <template #footer>
+            <div class="flex items-center justify-end space-x-2 dark:bg-gray-800 py-1 px-2">
+              <button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-white text-sm transition-all">
+                <div class="flex items-center space-x-1">
+                  <Icon name="check" />
+                  <p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
+                </div>
+              </button>
+            </div>
+          </template>
+        </Card>
+      </form>
+    </div>
+  </transition>
+
+  <transition name="fade">
+    <div v-if="icon" class="fixed top-0 left-0 w-full h-screen flex items-center justify-center bg-black bg-opacity-40">
+      <Card class="dark:bg-gray-700 dark:text-gray-100 w-full max-w-5xl">
+        <template #header>
+          <div class="flex items-center space-x-2 p-2 justify-end dark:bg-gray-800">
+            <input type="search" v-model="search" class="w-full bg-transparent rounded-md text-sm uppercase" placeholder="search something">
+            <Icon @click.prevent="icon = false" name="times" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
+          </div>
+        </template>
+
+        <template #body>
+          <div class="flex-wrap p-4 max-h-96 overflow-auto">
+            <Icon v-for="(icx, i) in icons.filter(icx => icx.includes(search.trim().toLocaleLowerCase()))" :key="i" @click.prevent="form.icon = icx; icon = false" :name="icx" class="m-1 text-5xl px-2 py-1 text-gray-800 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700 rounded-md cursor-pointer transition-all" />
+          </div>
+        </template>
+      </Card>
+    </div>
+  </transition>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup>
+import { getCurrentInstance, nextTick, onMounted, onUpdated, ref } from 'vue'
+import Icon from '@/Components/Icon.vue'
+import { Inertia } from '@inertiajs/inertia'
+
+const self = getCurrentInstance()
+const { menu, edit, destroy, drag, drop } = defineProps({
+  menu: Object,
+  edit: Function,
+  destroy: Function,
+  drag: Function,
+  drop: Function,
+  up: Function,
+  down: Function,
+  left: Function,
+  right: Function,
+})
+const a = ref(true)
+const open = ref(false)
+
+const rounded = () => {
+  const { container } = self.refs
+
+  container?.firstElementChild?.classList.add('rounded-l-md')
+  container?.lastElementChild?.classList.add('rounded-r-md')
+}
+
+onMounted(rounded)
+onUpdated(rounded)
+
+Inertia.on('finish', () => {
+  a.value = false
+  nextTick(() => a.value = true)
+})
+</script>
+
+<template>
+  <div class="flex flex-col space-y-1" :id="`menu:${menu.id}`">
+    <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 w-full" :draggable="false">
+        <Icon :name="menu.icon" :draggable="false" />
+        <p class="uppercase" :draggable="false">{{ menu.name }}</p>
+      </div>
+
+      <div ref="container" class="flex items-center flex-none" :draggable="false">
+        <Icon @click.prevent="left(menu)" v-if="menu.parent_id" name="arrow-left" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+        <Icon @click.prevent="right(menu)" v-if="menu.position > 1" name="arrow-right" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+        <Icon @click.prevent="up(menu)" v-if="menu.position > 1" name="arrow-up" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+        <Icon @click.prevent="down(menu)" v-if="menu.position !== menu.parent?.childs_count" name="arrow-down" class="px-2 py-1 dark:bg-gray-700 dark:hover:bg-gray-800 text-white transition-all cursor-pointer" :draggable="false" />
+        <Icon @click.prevent="open = ! open" :name="open ? 'minus' : 'plus'" class="px-2 py-1 dark:bg-gray-100 dark:hover:bg-gray-50 text-gray-800 transition-all cursor-pointer" :draggable="false" />
+        <Icon @click.prevent="edit(menu)" name="edit" class="px-2 py-1 bg-blue-600 hover:bg-blue-700 text-white transition-all cursor-pointer" :draggable="false" />
+        <Icon @click.prevent="destroy(menu)" name="trash" class="px-2 py-1 bg-red-600 hover:bg-red-700 text-white transition-all cursor-pointer" :draggable="false" />
+      </div>
+    </div>
+
+    <transition name="fade">
+      <div v-if="open" class="flex flex-col space-y-1 ml-8">
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>

routes/api.php

@@ -22,5 +22,6 @@ Route::prefix('/v1')->name('api.v1.')->group(function () {
         Route::get('/superuser/role', [App\Http\Controllers\Superuser\RoleController::class, 'get'])->name('role');
         Route::post('/superuser/role/paginate', [App\Http\Controllers\Superuser\RoleController::class, 'paginate'])->name('role.paginate');
         Route::post('/superuser/user/paginate', [App\Http\Controllers\Superuser\UserController::class, 'paginate'])->name('user.paginate');
+        Route::get('/superuser/menu', [App\Http\Controllers\Superuser\MenuController::class, 'get'])->name('menu');
     });
 });

routes/web.php

@@ -37,5 +37,14 @@ Route::middleware(['auth:sanctum', config('jetstream.auth_session'), 'verified']
 
         Route::patch('/user/{user}/role/{role}/detach', [App\Http\Controllers\Superuser\UserController::class, 'detachRole'])->name('user.role.detach');
         Route::patch('/user/{user}/permission/{permission}/detach', [App\Http\Controllers\Superuser\UserController::class, 'detachPermission'])->name('user.permission.detach');
+
+        Route::resource('menu', App\Http\Controllers\Superuser\MenuController::class)->only([
+            'index', 'store', 'update', 'destroy',
+        ]);
+
+        Route::patch('/menu/{menu}/up', [App\Http\Controllers\Superuser\MenuController::class, 'up'])->name('menu.up');
+        Route::patch('/menu/{menu}/down', [App\Http\Controllers\Superuser\MenuController::class, 'down'])->name('menu.down');
+        Route::patch('/menu/{menu}/left', [App\Http\Controllers\Superuser\MenuController::class, 'left'])->name('menu.left');
+        Route::patch('/menu/{menu}/right', [App\Http\Controllers\Superuser\MenuController::class, 'right'])->name('menu.right');
     });
 });