Skip to content

Commit 589ff97

Browse files
connorabbasconnorabbas
committed
persistent layout, fixes
1 parent 5738f9a commit 589ff97

File tree

7 files changed

+257
-273
lines changed

7 files changed

+257
-273
lines changed

‎resources/js/Components/Layout/Admin/SideMenuItems.vue‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,40 @@
11
<script setup>
2+
import { computed } from 'vue';
3+
import { usePage } from '@inertiajs/vue3';
24
import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
35
6+
const page = usePage();
7+
const currentRoute = computed(() => {
8+
// Access page.url to trigger re-computation on navigation.
9+
/* eslint-disable @typescript-eslint/no-unused-vars */
10+
const url = page.url;
11+
/* eslint-enable @typescript-eslint/no-unused-vars */
12+
return route().current();
13+
});
14+
415
// Nav Items
5-
const currentRoute = route().current();
6-
const homeMenuItems = [
16+
const homeMenuItems = computed(() => [
717
{
818
label: 'Welcome',
919
icon: 'pi pi-home',
1020
route: route('welcome'),
11-
active: currentRoute == 'welcome',
21+
active: currentRoute.value == 'welcome',
1222
},
1323
{
1424
label: 'Dashboard',
1525
icon: 'pi pi-th-large',
1626
route: route('admin.dashboard'),
17-
active: currentRoute == 'admin.dashboard',
27+
active: currentRoute.value == 'admin.dashboard',
1828
},
19-
];
20-
const analyticsMenuItems = [
29+
]);
30+
const analyticsMenuItems = computed(() => [
2131
{
2232
label: 'Users',
2333
icon: 'pi pi-user',
2434
route: route('admin.users.index'),
25-
active: currentRoute == 'admin.users.index',
35+
active: currentRoute.value == 'admin.users.index',
2636
},
27-
];
37+
]);
2838
const exampleNestedMenuItems = [
2939
{
3040
label: 'Files',

‎resources/js/Components/Layout/Admin/TopNav.vue‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const userMenu = useTemplateRef('user-menu');
1414
const userMenuItems = [
1515
{
1616
label: 'Profile',
17-
url: route('admin.profile.edit'),
17+
route: route('admin.profile.edit'),
1818
icon: 'pi pi-fw pi-user',
1919
},
2020
{
@@ -33,14 +33,10 @@ const toggleUserMenu = (event) => {
3333
<template>
3434
<nav class="dynamic-bg border-b dynamic-border">
3535
<Container fluid>
36-
<LinksMenuBar :pt="{
37-
root: {
38-
class: 'px-0 py-3 border-0 rounded-none dynamic-bg',
39-
},
40-
button: {
41-
class: 'hidden',
42-
},
43-
}">
36+
<LinksMenuBar
37+
pt:root:class="px-0 py-3 border-0 rounded-none dynamic-bg"
38+
pt:button:class="hidden"
39+
>
4440
<template #start>
4541
<div class="flex items-center">
4642
<div class="shrink-0 flex items-center">
@@ -49,11 +45,7 @@ const toggleUserMenu = (event) => {
4945
outlined
5046
severity="secondary"
5147
icon="pi pi-bars"
52-
:pt="{
53-
icon: {
54-
class: 'text-xl',
55-
},
56-
}"
48+
pt:icon:class="text-xl"
5749
@click="emit('open-nav')"
5850
/>
5951
<InertiaLink
@@ -73,28 +65,28 @@ const toggleUserMenu = (event) => {
7365
<div>
7466
<ToggleDarkModeButton
7567
severity="secondary"
76-
text
7768
rounded
69+
text
7870
/>
7971
</div>
8072
<!-- User Dropdown Menu -->
8173
<div class="flex flex-col">
8274
<Button
8375
id="user-menu-btn"
84-
text
8576
severity="secondary"
8677
:label="$page.props.auth.user.name"
8778
class="hidden sm:flex"
8879
icon="pi pi-angle-down"
8980
iconPos="right"
81+
text
9082
@click="toggleUserMenu($event)"
9183
/>
9284
<Button
9385
class="flex sm:hidden"
9486
icon="pi pi-user"
95-
text
9687
rounded
9788
severity="secondary"
89+
text
9890
@click="toggleUserMenu($event)"
9991
/>
10092
<div
@@ -105,12 +97,8 @@ const toggleUserMenu = (event) => {
10597
ref="user-menu"
10698
appendTo="#user-menu-append"
10799
:model="userMenuItems"
100+
pt:root:class="left-auto! top-0! right-0"
108101
popup
109-
:pt="{
110-
root: {
111-
class: 'left-auto! top-0! right-0',
112-
},
113-
}"
114102
/>
115103
</div>
116104
</div>

‎resources/js/Layouts/Admin/AuthenticatedLayout.vue‎

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,14 @@ onMounted(() => {
4545
</script>
4646

4747
<template>
48-
<Teleport to="body">
49-
<Toast position="top-center" />
50-
<MobileSidebarNavDrawer v-model="navDrawerOpen">
51-
<SideMenuItems />
52-
</MobileSidebarNavDrawer>
53-
</Teleport>
54-
5548
<div class="h-screen flex flex-col">
49+
<Teleport to="body">
50+
<Toast position="top-center" />
51+
<MobileSidebarNavDrawer v-model="navDrawerOpen">
52+
<SideMenuItems />
53+
</MobileSidebarNavDrawer>
54+
</Teleport>
55+
5656
<header
5757
id="site-header"
5858
ref="site-header"
@@ -84,22 +84,10 @@ onMounted(() => {
8484
class="dynamic-bg border-b dynamic-border"
8585
>
8686
<Container fluid>
87-
<div class="flex items-center justify-between flex-wrap">
88-
<div>
89-
<LinksBreadcrumb
90-
:model="breadcrumbs"
91-
class="py-4"
92-
/>
93-
</div>
94-
<div>
95-
<div
96-
v-if="$slots.headerEnd"
97-
class="py-3"
98-
>
99-
<slot name="headerEnd" />
100-
</div>
101-
</div>
102-
</div>
87+
<LinksBreadcrumb
88+
:model="breadcrumbs"
89+
class="py-4"
90+
/>
10391
</Container>
10492
</nav>
10593

‎resources/js/Pages/Admin/Dashboard.vue‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1+
<script setup>
2+
import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
3+
4+
defineOptions({ layout: AuthenticatedAdminLayout });
5+
</script>
6+
17
<template>
28
<InertiaHead title="Dashboard" />
3-
<AuthenticatedAdminLayout>
4-
<Container
5-
vertical
6-
fluid
7-
>
8-
<div>
9-
<Card>
10-
<template #content>
11-
<p class="m-0">You are logged in as an Admin!</p>
12-
</template>
13-
</Card>
14-
</div>
15-
</Container>
16-
</AuthenticatedAdminLayout>
9+
<Container
10+
vertical
11+
fluid
12+
>
13+
<div>
14+
<Card>
15+
<template #content>
16+
<p class="m-0">You are logged in as an Admin!</p>
17+
</template>
18+
</Card>
19+
</div>
20+
</Container>
1721
</template>

‎resources/js/Pages/Admin/Profile/Edit.vue‎

Lines changed: 69 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
<script>
2+
import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
3+
4+
const pageTitle = 'Profile';
5+
const breadcrumbs = [
6+
{ label: 'Dashboard', route: route('admin.dashboard') },
7+
{ label: pageTitle, route: route('admin.profile.edit') },
8+
{ label: 'Edit' },
9+
];
10+
11+
export default {
12+
layout: (h, page) => h(AuthenticatedAdminLayout, { breadcrumbs }, () => page)
13+
}
14+
</script>
15+
116
<script setup>
217
import DeleteUserForm from './Partials/DeleteUserForm.vue';
318
import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
@@ -12,88 +27,66 @@ defineProps({
1227
type: String,
1328
},
1429
});
15-
16-
const pageTitle = 'Profile';
17-
const breadcrumbs = [
18-
{ label: 'Dashboard', route: route('admin.dashboard') },
19-
{ label: pageTitle, route: route('admin.profile.edit') },
20-
{ label: 'Edit' },
21-
];
2230
</script>
2331

2432
<template>
2533
<InertiaHead :title="pageTitle" />
2634

27-
<AuthenticatedAdminLayout :breadcrumbs="breadcrumbs">
28-
<Container
29-
vertical
30-
fluid
35+
<Container
36+
vertical
37+
fluid
38+
>
39+
<PageTitleSection>
40+
<template #title>
41+
{{ pageTitle }}
42+
</template>
43+
</PageTitleSection>
44+
45+
<Card
46+
pt:body:class="max-w-2xl space-y-3"
47+
pt:caption:class="space-y-1"
3148
>
32-
<PageTitleSection>
33-
<template #title>
34-
{{ pageTitle }}
35-
</template>
36-
</PageTitleSection>
37-
<div class="space-y-4 md:space-y-8">
38-
<Card :pt="{
39-
body: {
40-
class: 'max-w-2xl space-y-3',
41-
},
42-
caption: {
43-
class: 'space-y-1',
44-
},
45-
}">
46-
<template #title>Profile Information</template>
47-
<template #subtitle>
48-
Update your account's profile information and email
49-
address.
50-
</template>
51-
<template #content>
52-
<UpdateProfileInformationForm
53-
:must-verify-email="mustVerifyEmail"
54-
:status="status"
55-
/>
56-
</template>
57-
</Card>
49+
<template #title>Profile Information</template>
50+
<template #subtitle>
51+
Update your account's profile information and email
52+
address.
53+
</template>
54+
<template #content>
55+
<UpdateProfileInformationForm
56+
:must-verify-email="mustVerifyEmail"
57+
:status="status"
58+
/>
59+
</template>
60+
</Card>
5861

59-
<Card :pt="{
60-
body: {
61-
class: 'max-w-2xl space-y-3',
62-
},
63-
caption: {
64-
class: 'space-y-1',
65-
},
66-
}">
67-
<template #title>Update Password</template>
68-
<template #subtitle>
69-
Ensure your account is using a long, random password to
70-
stay secure.
71-
</template>
72-
<template #content>
73-
<UpdatePasswordForm />
74-
</template>
75-
</Card>
62+
<Card
63+
pt:body:class="max-w-2xl space-y-3"
64+
pt:caption:class="space-y-1"
65+
>
66+
<template #title>Update Password</template>
67+
<template #subtitle>
68+
Ensure your account is using a long, random password to
69+
stay secure.
70+
</template>
71+
<template #content>
72+
<UpdatePasswordForm />
73+
</template>
74+
</Card>
7675

77-
<Card :pt="{
78-
body: {
79-
class: 'max-w-2xl space-y-3',
80-
},
81-
caption: {
82-
class: 'space-y-1',
83-
},
84-
}">
85-
<template #title>Delete Account</template>
86-
<template #subtitle>
87-
Once your account is deleted, all of its resources and
88-
data will be permanently deleted. Before deleting your
89-
account, please download any data or information that
90-
you wish to retain.
91-
</template>
92-
<template #content>
93-
<DeleteUserForm />
94-
</template>
95-
</Card>
96-
</div>
97-
</Container>
98-
</AuthenticatedAdminLayout>
76+
<Card
77+
pt:body:class="max-w-2xl space-y-3"
78+
pt:caption:class="space-y-1"
79+
>
80+
<template #title>Delete Account</template>
81+
<template #subtitle>
82+
Once your account is deleted, all of its resources and
83+
data will be permanently deleted. Before deleting your
84+
account, please download any data or information that
85+
you wish to retain.
86+
</template>
87+
<template #content>
88+
<DeleteUserForm />
89+
</template>
90+
</Card>
91+
</Container>
9992
</template>

0 commit comments

Comments
 (0)