Merge pull request #11 from balajidharma/1.x-Changes

1.x changes

Author: balajidharma

app/Http/Middleware/HandleInertiaRequests.php

@@ -5,6 +5,7 @@
 use Illuminate\Http\Request;
 use Inertia\Middleware;
 use Tightenco\Ziggy\Ziggy;
+use BalajiDharma\LaravelMenu\Models\Menu;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -46,6 +47,9 @@ public function share(Request $request)
             'flash' => [
                 'message' => fn () => $request->session()->get('message'),
             ],
+            'navigation' => [
+                'menu' => Menu::getMenuTree('admin')
+            ]
         ]);
     }
 }

resources/js/Components/AsideMenu.vue

@@ -1,14 +1,20 @@
 <script setup>
+import { reactive, computed } from 'vue'
+import { usePage } from '@inertiajs/vue3'
 import { useLayoutStore } from '@/Stores/layout.js'
-import menu from '@/menu.js'
+//import menu from '@/menu.js'
 import AsideMenuLayer from '@/Components/AsideMenuLayer.vue'
 import OverlayLayer from '@/Components/OverlayLayer.vue'
 
+let menu = reactive({})
+menu = computed(() => usePage().props.navigation.menu)
+
 const layoutStore = useLayoutStore()
 </script>
 
 <template>
   <AsideMenuLayer
+    v-if="Object.keys(menu).length"
     :menu="menu"
     :class="[layoutStore.isAsideMobileExpanded ? 'left-0' : '-left-60 lg:left-0', {'lg:hidden xl:flex': !layoutStore.isAsideLgActive}]"
   />

resources/js/Components/AsideMenuItem.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   isDropdownList: Boolean,
 })
 
-const itemHref = computed(() => props.item.route ? route(props.item.route) : props.item.href)
+const itemHref = computed(() => (props.item && props.item.link) ? props.item.link : '')
 
 const emit = defineEmits(['menu-click'])
 
@@ -36,7 +36,7 @@ const componentClass = computed(() => (
   ]
 ))
 
-const hasDropdown = computed(() => !!props.item.menu)
+const hasDropdown = computed(() => props.item.children)
 
 const menuClick = event => {
   emit('menu-click', event, props.item)
@@ -56,7 +56,7 @@ const activeInactiveStyle = computed(
 <template>
   <li>
     <component
-      :is="item.route ? Link : 'a'"
+      :is="itemHref ? Link : 'div'"
       :href="itemHref"
       :target="item.target ?? null"
       class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white"
@@ -74,7 +74,7 @@ const activeInactiveStyle = computed(
       <span
         class="grow text-ellipsis line-clamp-1"
         :class="activeInactiveStyle"
-      >{{ item.label }}</span>
+      >{{ item.name }}</span>
       <BaseIcon
         v-if="hasDropdown"
         :path="isDropdownActive ? mdiMinus : mdiPlus"
@@ -85,7 +85,7 @@ const activeInactiveStyle = computed(
     </component>
     <AsideMenuList
       v-if="hasDropdown"
-      :menu="item.menu"
+      :menu="item.children"
       :class="[ styleStore.asideMenuDropdownStyle, isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden' ]"
       is-dropdown-list
     />

resources/js/Components/AsideMenuLayer.vue

@@ -10,8 +10,8 @@ import BaseIcon from '@/Components/BaseIcon.vue'
 
 defineProps({
   menu: {
-    type: Array,
-    default: () => []
+    type: Object,
+    default: () => {}
   }
 })
 
@@ -22,9 +22,10 @@ const layoutStore = useLayoutStore()
 const styleStore = useStyleStore()
 
 const logoutItem = computed(() => ({
-  label: 'Logout',
+  name: 'Logout',
   icon: mdiLogout,
-  color: 'info'
+  color: 'info',
+  link: '#'
 }))
 
 const logoutItemClick = () => {

resources/js/Components/AsideMenuList.vue

@@ -4,8 +4,8 @@ import AsideMenuItem from '@/Components/AsideMenuItem.vue'
 defineProps({
   isDropdownList: Boolean,
   menu: {
-    type: Array,
-    default: () => []
+    type: Object,
+    default: () => {}
   }
 })