From c7afbf4e2dfecefd8be9936b248f30108eca8484 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Fri, 19 Dec 2025 02:04:44 +0000
Subject: [PATCH] fixes from inertia project

---
 src/assets/css/app.css                        |  1 +
 .../router-link-menus/Breadcrumb.vue          |  2 +-
 src/components/router-link-menus/Menu.vue     |  2 +-
 src/components/router-link-menus/MenuBar.vue  |  2 +-
 .../router-link-menus/PanelMenu.vue           |  2 +-
 src/composables/useAppLayout.ts               | 28 +++++++++++++++++++
 src/layouts/app/HeaderLayout.vue              |  2 ++
 src/layouts/app/SidebarLayout.vue             |  3 ++
 8 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/app.css b/src/assets/css/app.css
index da1a8b8..648e727 100644
--- a/src/assets/css/app.css
+++ b/src/assets/css/app.css
@@ -17,4 +17,5 @@ body {
 .lucide {
     width: 16px;
     height: 16px;
+    flex-shrink: 0;
 }
diff --git a/src/components/router-link-menus/Breadcrumb.vue b/src/components/router-link-menus/Breadcrumb.vue
index a315140..d2007c6 100644
--- a/src/components/router-link-menus/Breadcrumb.vue
+++ b/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
diff --git a/src/components/router-link-menus/Menu.vue b/src/components/router-link-menus/Menu.vue
index 82d27b9..fb5269a 100644
--- a/src/components/router-link-menus/Menu.vue
+++ b/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"
diff --git a/src/components/router-link-menus/MenuBar.vue b/src/components/router-link-menus/MenuBar.vue
index 86d7233..35bde77 100644
--- a/src/components/router-link-menus/MenuBar.vue
+++ b/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"
diff --git a/src/components/router-link-menus/PanelMenu.vue b/src/components/router-link-menus/PanelMenu.vue
index c5c7b2b..ea08b19 100644
--- a/src/components/router-link-menus/PanelMenu.vue
+++ b/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
diff --git a/src/composables/useAppLayout.ts b/src/composables/useAppLayout.ts
index e2bde43..24db732 100644
--- a/src/composables/useAppLayout.ts
+++ b/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,
     }
diff --git a/src/layouts/app/HeaderLayout.vue b/src/layouts/app/HeaderLayout.vue
index d564611..07ad21b 100644
--- a/src/layouts/app/HeaderLayout.vue
+++ b/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"
                     />
diff --git a/src/layouts/app/SidebarLayout.vue b/src/layouts/app/SidebarLayout.vue
index 28548c1..2e2b43a 100644
--- a/src/layouts/app/SidebarLayout.vue
+++ b/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"
                             />