Skip to content

Commit f1a9827

Browse files
connorabbasconnorabbas
authored
Merge pull request #407 from connorabbas/admin-role-dev
Pull master
2 parents f414c4b + ffc6eec commit f1a9827

File tree

10 files changed

+57
-21
lines changed

10 files changed

+57
-21
lines changed

‎resources/js/components/router-link-menus/Breadcrumb.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ defineExpose({ $el: childRef })
2323
<template>
2424
<Breadcrumb
2525
ref="child-ref"
26-
v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
26+
v-bind="{ ...componentProps, ...$attrs, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
2727
>
2828
<template #item="{ item, props }">
2929
<InertiaLink

‎resources/js/components/router-link-menus/ContextMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ defineExpose({
2323
<template>
2424
<ContextMenu
2525
ref="child-ref"
26-
v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
26+
v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
2727
>
2828
<template #item="{ item, props, hasSubmenu }">
2929
<InertiaLink

‎resources/js/components/router-link-menus/Menu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ defineExpose({
2222
<template>
2323
<Menu
2424
ref="child-ref"
25-
v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
25+
v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
2626
>
2727
<template
2828
v-for="(_, slotName) in $slots"

‎resources/js/components/router-link-menus/Menubar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ defineExpose({ $el: childRef })
2323
<template>
2424
<Menubar
2525
ref="child-ref"
26-
v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
26+
v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
2727
>
2828
<template
2929
v-for="(_, slotName) in $slots"

‎resources/js/components/router-link-menus/PanelMenu.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ defineExpose({ $el: childRef })
2626
<template>
2727
<PanelMenu
2828
ref="child-ref"
29-
v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
29+
v-bind="{ ...componentProps, ...$attrs, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
3030
>
3131
<template #item="{ item, root, active, props, hasSubmenu }">
3232
<Divider
@@ -91,4 +91,4 @@ defineExpose({ $el: childRef })
9191
</a>
9292
</template>
9393
</PanelMenu>
94-
</template>
94+
</template>

‎resources/js/components/router-link-menus/TabMenu.vue‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { useTemplateRef, computed } from 'vue'
33
import { usePage, Link as InertiaLink } from '@inertiajs/vue3'
44
import { route } from 'ziggy-js'
55
import Tabs from 'primevue/tabs'
6-
import TabList, { type TabListProps } from 'primevue/tablist'
7-
import Tab from 'primevue/tab'
6+
import Tab, { type TabsProps } from 'primevue/tabs'
7+
import TabList from 'primevue/tablist'
88
import type { MenuItem } from '@/types'
99
import { ptViewMerge } from '@/utils'
1010
11-
interface ExtendedTabListProps extends Omit<TabListProps, 'items'> {
12-
items?: MenuItem[] | undefined;
11+
interface ExtendedTabsProps extends Omit<TabsProps, 'value' | 'items'> {
12+
items: MenuItem[];
1313
}
14-
const componentProps = defineProps<ExtendedTabListProps>()
14+
const componentProps = defineProps<ExtendedTabsProps>()
1515
1616
const page = usePage()
1717
const currentRoute = computed(() => {
@@ -30,7 +30,7 @@ defineExpose({ $el: childRef })
3030
<template>
3131
<Tabs
3232
ref="child-ref"
33-
v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
33+
v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
3434
:value="currentRoute ?? '/'"
3535
scrollable
3636
>
@@ -39,15 +39,14 @@ defineExpose({ $el: childRef })
3939
v-for="item in componentProps.items"
4040
:key="item.route"
4141
:href="item.route ?? ''"
42-
:class="['no-underline', { 'p-tab-active': item.active }]"
42+
:class="['p-tab no-underline', { 'p-tab-active': item.active }]"
4343
custom
4444
>
4545
<Tab
4646
v-if="item.route"
4747
:value="item.route"
4848
:class="[
49-
'flex items-center gap-2 hover:text-color',
50-
item.active ? 'p-tab-active' : 'text-muted-color',
49+
'flex flex-row items-center gap-2 hover:text-color',
5150
item.class
5251
]"
5352
:style="item.style"

‎resources/js/components/router-link-menus/TieredMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ defineExpose({ $el: childRef })
2020
<template>
2121
<TieredMenu
2222
ref="child-ref"
23-
v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
23+
v-bind="{ ...componentProps, ...$attrs, ptOptions: { mergeProps: ptViewMerge } }"
2424
>
2525
<template
2626
v-for="(_, slotName) in $slots"

‎resources/js/composables/useAppLayout.ts‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue'
1+
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
22
import { usePage, useForm } from '@inertiajs/vue3'
33
import {
44
LayoutGrid, House, Info, Settings, LogOut, ExternalLink, FileSearch, FolderGit2, Lock, Users
@@ -18,40 +18,47 @@ export function useAppLayout() {
1818
// Menu items
1919
const menuItems = computed<MenuItem[]>(() => [
2020
{
21+
key: 'home',
2122
label: 'Home',
2223
lucideIcon: House,
2324
route: route('welcome'),
2425
active: currentRoute.value == 'welcome',
2526
},
2627
{
28+
key: 'dashboard',
2729
label: 'Dashboard',
2830
lucideIcon: LayoutGrid,
2931
route: route('dashboard'),
3032
active: currentRoute.value == 'dashboard',
3133
},
3234
{
35+
key: 'resources',
3336
label: 'Resources',
3437
lucideIcon: Info,
3538
items: [
3639
{
40+
key: 'resources-laravel',
3741
label: 'Laravel Docs',
3842
url: 'https://laravel.com/docs/master',
3943
target: '_blank',
4044
lucideIcon: ExternalLink,
4145
},
4246
{
47+
key: 'resources-primevue',
4348
label: 'PrimeVue Docs',
4449
url: 'https://primevue.org/',
4550
target: '_blank',
4651
lucideIcon: ExternalLink,
4752
},
4853
{
54+
key: 'resources-starter-docs',
4955
label: 'Starter Kit Docs',
5056
url: 'https://connorabbas.github.io/laravel-primevue-starter-kit-docs/',
5157
target: '_blank',
5258
lucideIcon: FileSearch,
5359
},
5460
{
61+
key: 'resources-starter-repo',
5562
label: 'Starter Kit Repo',
5663
url: 'https://github.com/connorabbas/laravel-primevue-starter-kit',
5764
target: '_blank',
@@ -60,17 +67,20 @@ export function useAppLayout() {
6067
],
6168
},
6269
{
70+
key: 'admin',
6371
label: 'Admin',
6472
lucideIcon: Lock,
6573
visible: page.props.auth.isAdmin,
6674
items: [
6775
{
76+
key: 'admin-dashboard',
6877
label: 'Dashboard',
6978
lucideIcon: LayoutGrid,
7079
route: route('admin.dashboard'),
7180
active: currentRoute.value == 'admin.dashboard',
7281
},
7382
{
83+
key: 'admin-users-index',
7484
label: 'Users',
7585
lucideIcon: Users,
7686
route: route('admin.users.index'),
@@ -80,7 +90,28 @@ export function useAppLayout() {
8090
},
8191
])
8292

83-
// User menu and logout functionality.
93+
// Check/set expanded PanelMenu items based on active status, for non-persistent layouts
94+
const expandedKeys = ref<Record<string, boolean>>({})
95+
const updateExpandedKeys = () => {
96+
const keys: Record<string, boolean> = {}
97+
const hasActiveChild = (item: MenuItem): boolean => {
98+
if (item.items) {
99+
for (const child of item.items) {
100+
if (hasActiveChild(child)) {
101+
if (item.key) keys[item.key] = true
102+
return true
103+
}
104+
}
105+
}
106+
return !!item.active
107+
}
108+
menuItems.value.forEach(hasActiveChild)
109+
expandedKeys.value = keys
110+
}
111+
watch(currentRoute, () => {
112+
updateExpandedKeys()
113+
}, { immediate: true })
114+
84115
const logoutForm = useForm({})
85116
const logout = () => {
86117
logoutForm.post(route('logout'))
@@ -101,7 +132,7 @@ export function useAppLayout() {
101132
},
102133
]
103134

104-
// Mobile menu
135+
// Mobile drawer menu
105136
const mobileMenuOpen = ref(false)
106137
if (typeof window !== 'undefined') {
107138
const windowWidth = ref(window.innerWidth)
@@ -114,8 +145,8 @@ export function useAppLayout() {
114145
onUnmounted(() => {
115146
window.removeEventListener('resize', updateWidth)
116147
})
117-
watchEffect(() => {
118-
if (windowWidth.value > 1024) {
148+
watch(windowWidth, (newWidth) => {
149+
if (newWidth > 1024) {
119150
mobileMenuOpen.value = false
120151
}
121152
})
@@ -124,6 +155,7 @@ export function useAppLayout() {
124155
return {
125156
currentRoute,
126157
menuItems,
158+
expandedKeys,
127159
userMenuItems,
128160
mobileMenuOpen,
129161
logout,

‎resources/js/layouts/app/HeaderLayout.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const {
2323
currentRoute,
2424
mobileMenuOpen,
2525
menuItems,
26+
expandedKeys,
2627
userMenuItems,
2728
} = useAppLayout()
2829
</script>
@@ -38,6 +39,7 @@ const {
3839
>
3940
<div>
4041
<PanelMenu
42+
v-model:expandedKeys="expandedKeys"
4143
:model="menuItems"
4244
class="mt-1 w-full"
4345
/>

‎resources/js/layouts/app/SidebarLayout.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const page = usePage()
2121
const {
2222
mobileMenuOpen,
2323
menuItems,
24+
expandedKeys,
2425
userMenuItems,
2526
} = useAppLayout()
2627
</script>
@@ -36,6 +37,7 @@ const {
3637
>
3738
<div>
3839
<PanelMenu
40+
v-model:expandedKeys="expandedKeys"
3941
:model="menuItems"
4042
class="mt-1 w-full"
4143
/>
@@ -104,6 +106,7 @@ const {
104106
</div>
105107
<div>
106108
<PanelMenu
109+
v-model:expandedKeys="expandedKeys"
107110
:model="menuItems"
108111
class="mt-1 w-full"
109112
/>

0 commit comments

Comments
 (0)