Skip to content

Commit e0ad2de

Browse files
connorabbasconnorabbas
authored
Merge pull request #323 from connorabbas/admin-role-dev
Pull master, Admin badge in user menu button
2 parents 30d4ccc + 589e479 commit e0ad2de

File tree

10 files changed

+101
-61
lines changed

10 files changed

+101
-61
lines changed

‎resources/js/components/NavLogoLink.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup>
2+
import ApplicationLogo from '@/components/ApplicationLogo.vue';
3+
</script>
4+
5+
<template>
6+
<Button
7+
:href="route('welcome')"
8+
pt:root:class="flex items-center justify-start gap-4 no-underline p-0"
9+
variant="link"
10+
as="InertiaLink"
11+
>
12+
<ApplicationLogo class="block h-8 lg:h-10 w-auto fill-current text-surface-900 dark:text-surface-0" />
13+
<span class="font-bold">Laravel + PrimeVue Starter Kit</span>
14+
</Button>
15+
</template>

‎resources/js/components/primevue/menu/PanelMenu.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ defineExpose({ el: childRef });
3232
v-if="item.route"
3333
:href="item.route"
3434
:class="[
35-
'p-panelmenu-item-link flex items-center cursor-pointer no-underline px-4 py-2',
35+
'p-panelmenu-item-link flex items-center cursor-pointer no-underline p-2',
3636
{ 'font-bold! text-muted-color': item.active },
3737
]"
3838
custom
@@ -53,7 +53,7 @@ defineExpose({ el: childRef });
5353
:href="item.url"
5454
:target="item.target"
5555
:class="[
56-
'flex items-center cursor-pointer no-underline px-4 py-2',
56+
'flex items-center cursor-pointer no-underline p-2',
5757
hasSubmenu ? 'p-panelmenu-header-link' : 'p-panelmenu-item-link',
5858
]"
5959
>

‎resources/js/composables/useAppLayout.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,31 @@ export function useAppLayout() {
3131
active: currentRoute.value == 'dashboard',
3232
},
3333
{
34-
label: 'Info',
34+
label: 'Resources',
3535
lucideIcon: Info,
3636
items: [
37+
{
38+
label: 'Laravel Docs',
39+
url: 'https://laravel.com/docs/master',
40+
target: '_blank',
41+
lucideIcon: ExternalLink,
42+
},
3743
{
3844
label: 'PrimeVue Docs',
3945
url: 'https://primevue.org/',
46+
target: '_blank',
4047
lucideIcon: ExternalLink,
4148
},
4249
{
4350
label: 'Starter Kit Docs',
4451
url: 'https://connorabbas.github.io/laravel-primevue-starter-kit-docs/',
52+
target: '_blank',
4553
lucideIcon: FileSearch,
4654
},
4755
{
4856
label: 'Starter Kit Repo',
4957
url: 'https://github.com/connorabbas/laravel-primevue-starter-kit',
58+
target: '_blank',
5059
lucideIcon: FolderGit2,
5160
},
5261
],

‎resources/js/layouts/AppLayout.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
22
import AppLayout from '@/layouts/app/HeaderLayout.vue';
33
4-
defineProps({
4+
const props = defineProps({
55
breadcrumbs: {
66
type: Array,
77
default: () => [],
@@ -10,7 +10,7 @@ defineProps({
1010
</script>
1111

1212
<template>
13-
<AppLayout :breadcrumbs="breadcrumbs">
13+
<AppLayout :breadcrumbs="props.breadcrumbs">
1414
<slot />
1515
</AppLayout>
1616
</template>

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

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { useTemplateRef } from 'vue';
33
import { usePage } from '@inertiajs/vue3';
44
import { useAppLayout } from '@/composables/useAppLayout';
55
import { ChevronsUpDown, ChevronDown, Menu as MenuIcon } from 'lucide-vue-next';
6-
import ApplicationLogo from '@/components/ApplicationLogo.vue';
76
import ClientOnly from '@/components/ClientOnly.vue';
7+
import NavLogoLink from '@/components/NavLogoLink.vue';
88
import FlashMessages from '@/components/FlashMessages.vue';
99
import Menu from '@/components/primevue/menu/Menu.vue';
1010
import Menubar from '@/components/primevue/menu/Menubar.vue';
@@ -57,15 +57,21 @@ const toggleMobileUserMenu = (event) => {
5757
<div class="flex flex-col">
5858
<Button
5959
id="mobile-user-menu-btn"
60-
:label="page.props.auth.user.name"
6160
severity="secondary"
6261
size="large"
63-
pt:root:class="flex flex-row-reverse justify-between"
62+
pt:root:class="flex justify-between"
6463
@click="toggleMobileUserMenu($event)"
6564
>
66-
<template #icon>
65+
<div class="flex items-center gap-3">
66+
<Tag
67+
v-if="page.props.auth.isAdmin"
68+
value="ADMIN"
69+
/>
70+
{{ page.props.auth.user.name }}
71+
</div>
72+
<div>
6773
<ChevronsUpDown />
68-
</template>
74+
</div>
6975
</Button>
7076
<Menu
7177
ref="mobile-user-menu"
@@ -90,16 +96,8 @@ const toggleMobileUserMenu = (event) => {
9096
pt:button:class="hidden"
9197
>
9298
<template #start>
93-
<div class="shrink-0 flex gap-4 items-center mr-5">
94-
<InertiaLink :href="route('welcome')">
95-
<ApplicationLogo
96-
class="block h-8 lg:h-10 w-auto fill-current text-surface-900 dark:text-surface-0"
97-
/>
98-
</InertiaLink>
99-
<Tag
100-
v-if="page.props.auth.isAdmin"
101-
value="ADMIN"
102-
/>
99+
<div class="shrink-0 flex items-center mr-5">
100+
<NavLogoLink />
103101
</div>
104102
</template>
105103
<template #end>
@@ -108,15 +106,21 @@ const toggleMobileUserMenu = (event) => {
108106
<div class="flex flex-col">
109107
<Button
110108
id="user-menu-btn"
111-
:label="page.props.auth.user.name"
112-
pt:root:class="flex flex-row-reverse justify-between"
113109
severity="secondary"
110+
pt:root:class="flex justify-between"
114111
text
115112
@click="toggleUserMenu($event)"
116113
>
117-
<template #icon>
114+
<div class="flex items-center gap-3">
115+
<Tag
116+
v-if="page.props.auth.isAdmin"
117+
value="ADMIN"
118+
/>
119+
{{ page.props.auth.user.name }}
120+
</div>
121+
<div>
118122
<ChevronDown />
119-
</template>
123+
</div>
120124
</Button>
121125
<div
122126
id="user-menu-append"

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

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { useTemplateRef } from 'vue';
33
import { usePage } from '@inertiajs/vue3';
44
import { ChevronsUpDown, Menu as MenuIcon } from 'lucide-vue-next';
55
import { useAppLayout } from '@/composables/useAppLayout';
6-
import ApplicationLogo from '@/components/ApplicationLogo.vue';
76
import ClientOnly from '@/components/ClientOnly.vue';
87
import FlashMessages from '@/components/FlashMessages.vue';
8+
import NavLogoLink from '@/components/NavLogoLink.vue';
99
import Menu from '@/components/primevue/menu/Menu.vue';
1010
import PanelMenu from '@/components/primevue/menu/PanelMenu.vue';
1111
import Breadcrumb from '@/components/primevue/menu/Breadcrumb.vue';
@@ -43,7 +43,7 @@ const toggleMobileUserMenu = (event) => {
4343
<!-- Mobile drawer menu -->
4444
<Drawer
4545
v-model:visible="mobileMenuOpen"
46-
position="left"
46+
position="right"
4747
>
4848
<div>
4949
<PanelMenu
@@ -55,15 +55,21 @@ const toggleMobileUserMenu = (event) => {
5555
<div class="flex flex-col">
5656
<Button
5757
id="mobile-user-menu-btn"
58-
:label="page.props.auth.user.name"
59-
pt:root:class="flex flex-row-reverse justify-between"
6058
severity="secondary"
6159
size="large"
60+
pt:root:class="flex justify-between"
6261
@click="toggleMobileUserMenu($event)"
6362
>
64-
<template #icon>
63+
<div class="flex items-center gap-3">
64+
<Tag
65+
v-if="page.props.auth.isAdmin"
66+
value="ADMIN"
67+
/>
68+
{{ page.props.auth.user.name }}
69+
</div>
70+
<div>
6571
<ChevronsUpDown />
66-
</template>
72+
</div>
6773
</Button>
6874
<Menu
6975
ref="mobile-user-menu"
@@ -82,17 +88,9 @@ const toggleMobileUserMenu = (event) => {
8288
<header class="block lg:fixed top-0 left-0 right-0 z-50">
8389
<nav class="dynamic-bg shadow-sm flex justify-between items-center lg:hidden">
8490
<Container class="grow">
85-
<div class="flex justify-between items-center py-4">
86-
<div class="flex gap-4">
87-
<InertiaLink :href="route('welcome')">
88-
<ApplicationLogo
89-
class="block h-8 w-auto fill-current text-surface-900 dark:text-surface-0"
90-
/>
91-
</InertiaLink>
92-
<Tag
93-
v-if="page.props.auth.isAdmin"
94-
value="ADMIN"
95-
/>
91+
<div class="flex justify-between items-center gap-4 py-4">
92+
<div>
93+
<NavLogoLink />
9694
</div>
9795
<div>
9896
<Button
@@ -118,16 +116,8 @@ const toggleMobileUserMenu = (event) => {
118116
>
119117
<div class="w-full h-full flex flex-col justify-between p-4">
120118
<div class="space-y-6">
121-
<div class="flex gap-4 items-center">
122-
<InertiaLink :href="route('welcome')">
123-
<ApplicationLogo
124-
class="block h-10 w-auto fill-current text-surface-900 dark:text-surface-0"
125-
/>
126-
</InertiaLink>
127-
<Tag
128-
v-if="page.props.auth.isAdmin"
129-
value="ADMIN"
130-
/>
119+
<div class="p-2">
120+
<NavLogoLink />
131121
</div>
132122
<div>
133123
<PanelMenu
@@ -136,18 +126,23 @@ const toggleMobileUserMenu = (event) => {
136126
/>
137127
</div>
138128
</div>
139-
<div>
129+
<div class="flex">
140130
<Button
141131
id="user-menu-btn"
142-
:label="page.props.auth.user.name"
143-
pt:root:class="flex flex-row-reverse justify-between"
144132
severity="secondary"
145-
fluid
133+
pt:root:class="flex grow justify-between"
146134
@click="toggleUserMenu($event)"
147135
>
148-
<template #icon>
136+
<div class="flex items-center gap-3">
137+
<Tag
138+
v-if="page.props.auth.isAdmin"
139+
value="ADMIN"
140+
/>
141+
{{ page.props.auth.user.name }}
142+
</div>
143+
<div>
149144
<ChevronsUpDown />
150-
</template>
145+
</div>
151146
</Button>
152147
<Menu
153148
ref="user-menu"

‎resources/js/pages/Dashboard.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script setup>
22
import AppLayout from '@/layouts/AppLayout.vue';
3+
4+
const breadcrumbs = [{ label: 'Dashboard' }];
35
</script>
46

57
<template>
6-
<AppLayout>
8+
<AppLayout :breadcrumbs>
79
<InertiaHead title="Dashboard" />
810

911
<Card>

‎resources/js/pages/settings/Appearance.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@
22
import AppLayout from '@/layouts/AppLayout.vue';
33
import SettingsLayout from '@/layouts/UserSettingsLayout.vue';
44
import SelectColorModeButton from '@/components/SelectColorModeButton.vue';
5+
6+
const breadcrumbs = [
7+
{ label: 'Dashboard', route: route('dashboard') },
8+
{ label: 'Appearance Settings' },
9+
];
510
</script>
611

712
<template>
8-
<AppLayout>
13+
<AppLayout :breadcrumbs>
914
<InertiaHead title="Appearance Settings" />
1015

1116
<SettingsLayout>

‎resources/js/pages/settings/Password.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ defineProps({
1515
},
1616
});
1717
18+
const breadcrumbs = [
19+
{ label: 'Dashboard', route: route('dashboard') },
20+
{ label: 'Password Settings' },
21+
];
22+
1823
const currentPasswordInput = useTemplateRef('current-password-input');
1924
const newPasswordInput = useTemplateRef('new-password-input');
2025
@@ -61,7 +66,7 @@ const updatePassword = () => {
6166
</script>
6267
6368
<template>
64-
<AppLayout>
69+
<AppLayout :breadcrumbs>
6570
<InertiaHead title="Password Settings" />
6671
6772
<SettingsLayout>

‎resources/js/pages/settings/Profile.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ defineProps({
1515
},
1616
});
1717
18+
const breadcrumbs = [
19+
{ label: 'Dashboard', route: route('dashboard') },
20+
{ label: 'Profile Settings' },
21+
];
22+
1823
const deleteUserModalOpen = ref(false);
1924
2025
const user = usePage().props.auth.user;
@@ -48,7 +53,7 @@ const updateProfileInformation = () => {
4853
</script>
4954

5055
<template>
51-
<AppLayout>
56+
<AppLayout :breadcrumbs>
5257
<InertiaHead title="Profile Settings" />
5358

5459
<SettingsLayout>

0 commit comments

Comments
 (0)