Merge pull request #59 from connorabbas/develop

More fixes from inertia project

Author: connorabbas

src/assets/css/app.css

@@ -17,4 +17,5 @@ body {
 .lucide {
     width: 16px;
     height: 16px;
+    flex-shrink: 0;
 }

src/components/router-link-menus/Breadcrumb.vue

@@ -22,7 +22,7 @@ defineExpose({ $el: childRef })
 <template>
     <Breadcrumb
         ref="child-ref"
-        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, props }">
             <RouterLink

src/components/router-link-menus/Menu.vue

@@ -21,7 +21,7 @@ defineExpose({
 <template>
     <Menu
         ref="child-ref"
-        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"

src/components/router-link-menus/MenuBar.vue

@@ -22,7 +22,7 @@ defineExpose({ $el: childRef })
 <template>
     <Menubar
         ref="child-ref"
-        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"

src/components/router-link-menus/PanelMenu.vue

@@ -25,7 +25,7 @@ defineExpose({ $el: childRef })
 <template>
     <PanelMenu
         ref="child-ref"
-        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
+        v-bind="{ ...componentProps, ...$attrs, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, root, active, props, hasSubmenu }">
             <Divider

src/composables/useAppLayout.ts

@@ -14,40 +14,47 @@ export function useAppLayout() {
     // Menu items
     const menuItems = computed<MenuItem[]>(() => [
         {
+            key: 'home',
             label: 'Home',
             lucideIcon: House,
             route: { name: 'welcome' },
             active: currentRoute.value == 'welcome',
         },
         {
+            key: 'dashboard',
             label: 'Dashboard',
             lucideIcon: LayoutGrid,
             route: { name: 'dashboard' },
             active: currentRoute.value == 'dashboard',
         },
         {
+            key: 'resources',
             label: 'Resources',
             lucideIcon: Info,
             items: [
                 {
+                    key: 'resources-laravel',
                     label: 'Laravel Docs',
                     url: 'https://laravel.com/docs/master',
                     target: '_blank',
                     lucideIcon: ExternalLink,
                 },
                 {
+                    key: 'resources-primevue',
                     label: 'PrimeVue Docs',
                     url: 'https://primevue.org/',
                     target: '_blank',
                     lucideIcon: ExternalLink,
                 },
                 {
+                    key: 'resources-starter-docs',
                     label: 'Starter Kit Docs',
                     url: 'https://connorabbas.github.io/laravel-primevue-starter-kit-docs/',
                     target: '_blank',
                     lucideIcon: FileSearch,
                 },
                 {
+                    key: 'resources-starter-repo',
                     label: 'Starter Kit Repo',
                     url: 'https://github.com/connorabbas/laravel-primevue-starter-kit',
                     target: '_blank',
@@ -57,6 +64,25 @@ export function useAppLayout() {
         },
     ])
 
+    // Check/set expanded PanelMenu items based on active status, for non-persistent layouts & page refreshes
+    const expandedKeys = ref<Record<string, boolean>>({})
+    const updateExpandedKeys = () => {
+        const keys: Record<string, boolean> = {}
+        const hasActiveChild = (item: MenuItem): boolean => {
+            if (item.items) {
+                for (const child of item.items) {
+                    if (hasActiveChild(child)) {
+                        if (item.key) keys[item.key] = true
+                        return true
+                    }
+                }
+            }
+            return !!item.active
+        }
+        menuItems.value.forEach(hasActiveChild)
+        expandedKeys.value = keys
+    }
+
     // User menu and logout functionality.
     const userMenuItems: MenuItem[] = [
         {
@@ -81,6 +107,7 @@ export function useAppLayout() {
         windowWidth.value = window.innerWidth
     }
     onMounted(() => {
+        updateExpandedKeys()
         window.addEventListener('resize', updateWidth)
     })
     onUnmounted(() => {
@@ -96,6 +123,7 @@ export function useAppLayout() {
         userName,
         currentRoute,
         menuItems,
+        expandedKeys,
         userMenuItems,
         mobileMenuOpen,
     }

src/layouts/app/HeaderLayout.vue

@@ -20,6 +20,7 @@ const {
     currentRoute,
     mobileMenuOpen,
     menuItems,
+    expandedKeys,
     userMenuItems,
 } = useAppLayout()
 </script>
@@ -34,6 +35,7 @@ const {
             >
                 <div>
                     <PanelMenu
+                        v-model:expandedKeys="expandedKeys"
                         :model="menuItems"
                         class="mt-1 w-full"
                     />

src/layouts/app/SidebarLayout.vue

@@ -18,6 +18,7 @@ const {
     userName,
     mobileMenuOpen,
     menuItems,
+    expandedKeys,
     userMenuItems,
 } = useAppLayout()
 </script>
@@ -32,6 +33,7 @@ const {
             >
                 <div>
                     <PanelMenu
+                        v-model:expandedKeys="expandedKeys"
                         :model="menuItems"
                         class="mt-1 w-full"
                     />
@@ -91,6 +93,7 @@ const {
                         </div>
                         <div>
                             <PanelMenu
+                                v-model:expandedKeys="expandedKeys"
                                 :model="menuItems"
                                 class="mt-1 w-full"
                             />