Skip to content

Commit 4e3153d

Browse files
connorabbasconnorabbas
authored
Merge pull request #159 from connorabbas/ssr-develop
Pull master
2 parents 3418b41 + 7d31f8f commit 4e3153d

File tree

8 files changed

+130
-114
lines changed

8 files changed

+130
-114
lines changed

‎resources/js/Components/Container.vue‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
<script setup>
2-
defineProps({
3-
spacedMobile: {
2+
const props = defineProps({
3+
fluid: {
44
type: Boolean,
5-
default: true,
5+
default: false,
66
required: false,
77
},
8-
fluid: {
8+
vertical: {
9+
type: Boolean,
10+
default: false,
11+
required: false,
12+
},
13+
flushMobile: {
914
type: Boolean,
1015
default: false,
1116
required: false,
@@ -14,11 +19,16 @@ defineProps({
1419
</script>
1520

1621
<template>
17-
<div :class="[
18-
{ 'max-w-(--breakpoint-2xl) mx-auto': !fluid },
19-
spacedMobile ? 'px-4' : 'px-0',
20-
'md:px-8',
21-
]">
22+
<div
23+
class="md:px-8"
24+
:class="[
25+
{
26+
'max-w-(--breakpoint-2xl) mx-auto': !props.fluid,
27+
'py-4 md:py-8 space-y-4 md:space-y-8': props.vertical
28+
},
29+
props.flushMobile ? 'px-0' : 'px-4',
30+
]"
31+
>
2232
<slot />
2333
</div>
24-
</template>
34+
</template>

‎resources/js/Components/PageTitleSection.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<section>
3+
<div class="flex items-end justify-between flex-wrap gap-2 md:gap-4">
4+
<div>
5+
<h1 class="font-bold text-2xl md:text-3xl leading-tight">
6+
<slot name="title" />
7+
</h1>
8+
</div>
9+
<div>
10+
<div v-if="$slots.end">
11+
<slot name="end" />
12+
</div>
13+
</div>
14+
</div>
15+
</section>
16+
</template>

‎resources/js/Layouts/AuthenticatedLayout.vue‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
11
<script setup>
2-
import { ref, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
3-
import { useForm } from '@inertiajs/vue3';
2+
import { ref, computed, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
3+
import { usePage, useForm } from '@inertiajs/vue3';
44
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
55
import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue';
66
import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue';
77
import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
88
import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
99
10-
const currentRoute = route().current();
10+
const page = usePage();
11+
const currentRoute = computed(() => {
12+
// Access page.url to trigger re-computation on navigation.
13+
/* eslint-disable @typescript-eslint/no-unused-vars */
14+
const url = page.url;
15+
/* eslint-enable @typescript-eslint/no-unused-vars */
16+
return route().current();
17+
});
18+
1119
const logoutForm = useForm({});
1220
function logout() {
1321
logoutForm.post(route('logout'));
1422
}
1523
1624
// Main menu
17-
const mainMenuItems = [
25+
const mainMenuItems = computed(() => [
1826
{
1927
label: 'Dashboard',
2028
route: route('dashboard'),
21-
active: currentRoute == 'dashboard',
29+
active: currentRoute.value == 'dashboard',
2230
},
23-
];
31+
]);
2432
2533
// User menu (desktop)
2634
const userMenu = useTemplateRef('user-menu');
@@ -43,18 +51,18 @@ const toggleUserMenu = (event) => {
4351
};
4452
4553
// Mobile menu (Drawer)
46-
const homeMobileMenuItems = ref([
54+
const homeMobileMenuItems = computed(() => [
4755
{
4856
label: 'Welcome',
4957
icon: 'pi pi-home',
5058
route: route('welcome'),
51-
active: currentRoute == 'welcome',
59+
active: currentRoute.value == 'welcome',
5260
},
5361
{
5462
label: 'Dashboard',
5563
icon: 'pi pi-th-large',
5664
route: route('dashboard'),
57-
active: currentRoute == 'dashboard',
65+
active: currentRoute.value == 'dashboard',
5866
},
5967
]);
6068
const mobileMenuOpen = ref(false);
@@ -80,15 +88,12 @@ if (import.meta.env.SSR === false) {
8088
<template>
8189
<div>
8290
<div class="min-h-screen">
83-
<nav
84-
class="dynamic-bg border-b"
85-
:class="$slots.header ? 'dynamic-border' : 'shadow-sm'"
86-
>
91+
<nav class="dynamic-bg shadow-sm">
8792
<!-- Primary Navigation Menu -->
8893
<Container>
8994
<LinksMenuBar
9095
:model="mainMenuItems"
91-
pt:root:class="px-0 py-3 border-0 rounded-none dynamic-bg"
96+
pt:root:class="px-0 py-4 border-0 rounded-none dynamic-bg"
9297
pt:button:class="hidden"
9398
>
9499
<template #start>
@@ -116,7 +121,7 @@ if (import.meta.env.SSR === false) {
116121
id="user-menu-btn"
117122
text
118123
severity="secondary"
119-
:label="$page.props.auth.user.name"
124+
:label="page.props.auth.user.name"
120125
icon="pi pi-angle-down"
121126
iconPos="right"
122127
@click="toggleUserMenu($event)"
@@ -203,18 +208,6 @@ if (import.meta.env.SSR === false) {
203208
</Drawer>
204209
</nav>
205210
206-
<!-- Page Heading -->
207-
<header
208-
v-if="$slots.header"
209-
class="dynamic-bg shadow-sm"
210-
>
211-
<Container>
212-
<div class="py-6">
213-
<slot name="header" />
214-
</div>
215-
</Container>
216-
</header>
217-
218211
<!-- Page Content -->
219212
<Toast position="top-center" />
220213
<main>

‎resources/js/Pages/Dashboard.vue‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
<script setup>
2-
import Heading from '@/Components/Heading.vue';
2+
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
3+
4+
defineOptions({ layout: AuthenticatedLayout });
35
</script>
46

57
<template>
68
<InertiaHead title="Dashboard" />
7-
<AuthenticatedLayout>
8-
<template #header>
9-
<Heading level="h1" class="text-2xl">Dashboard</Heading>
10-
</template>
11-
<Container>
12-
<div class="py-4 md:py-8">
13-
<Card class="mb-5">
14-
<template #content>
15-
<p class="m-0">You are logged in!</p>
16-
</template>
17-
</Card>
18-
</div>
19-
</Container>
20-
</AuthenticatedLayout>
9+
10+
<Container vertical>
11+
<Card>
12+
<template #content>
13+
<p class="m-0">You are logged in!</p>
14+
</template>
15+
</Card>
16+
</Container>
2117
</template>

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

Lines changed: 54 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import Heading from '@/Components/Heading.vue';
2+
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
33
import DeleteUserForm from './Partials/DeleteUserForm.vue';
44
import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
55
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
@@ -12,67 +12,65 @@ defineProps({
1212
type: String,
1313
},
1414
});
15+
16+
defineOptions({ layout: AuthenticatedLayout });
1517
</script>
1618

1719
<template>
1820
<InertiaHead title="Profile" />
1921

20-
<AuthenticatedLayout>
21-
<template #header>
22-
<Heading level="h1" class="text-2xl">Profile</Heading>
23-
</template>
22+
<Container vertical>
23+
<PageTitleSection>
24+
<template #title>
25+
Profile
26+
</template>
27+
</PageTitleSection>
2428

25-
<Container>
26-
<div class="py-4 md:py-8">
27-
<div class="space-y-4 md:space-y-8">
28-
<Card
29-
pt:body:class="max-w-2xl space-y-3"
30-
pt:caption:class="space-y-1"
31-
>
32-
<template #title>Profile Information</template>
33-
<template #subtitle>
34-
Update your account's profile information and email
35-
address.
36-
</template>
37-
<template #content>
38-
<UpdateProfileInformationForm
39-
:must-verify-email="mustVerifyEmail"
40-
:status="status"
41-
/>
42-
</template>
43-
</Card>
29+
<Card
30+
pt:body:class="max-w-2xl space-y-3"
31+
pt:caption:class="space-y-1"
32+
>
33+
<template #title>Profile Information</template>
34+
<template #subtitle>
35+
Update your account's profile information and email
36+
address.
37+
</template>
38+
<template #content>
39+
<UpdateProfileInformationForm
40+
:must-verify-email="mustVerifyEmail"
41+
:status="status"
42+
/>
43+
</template>
44+
</Card>
4445

45-
<Card
46-
pt:body:class="max-w-2xl space-y-3"
47-
pt:caption:class="space-y-1"
48-
>
49-
<template #title>Update Password</template>
50-
<template #subtitle>
51-
Ensure your account is using a long, random password
52-
to stay secure.
53-
</template>
54-
<template #content>
55-
<UpdatePasswordForm />
56-
</template>
57-
</Card>
46+
<Card
47+
pt:body:class="max-w-2xl space-y-3"
48+
pt:caption:class="space-y-1"
49+
>
50+
<template #title>Update Password</template>
51+
<template #subtitle>
52+
Ensure your account is using a long, random password
53+
to stay secure.
54+
</template>
55+
<template #content>
56+
<UpdatePasswordForm />
57+
</template>
58+
</Card>
5859

59-
<Card
60-
pt:body:class="max-w-2xl space-y-3"
61-
pt:caption:class="space-y-1"
62-
>
63-
<template #title>Delete Account</template>
64-
<template #subtitle>
65-
Once your account is deleted, all of its resources
66-
and data will be permanently deleted. Before
67-
deleting your account, please download any data or
68-
information that you wish to retain.
69-
</template>
70-
<template #content>
71-
<DeleteUserForm />
72-
</template>
73-
</Card>
74-
</div>
75-
</div>
76-
</Container>
77-
</AuthenticatedLayout>
60+
<Card
61+
pt:body:class="max-w-2xl space-y-3"
62+
pt:caption:class="space-y-1"
63+
>
64+
<template #title>Delete Account</template>
65+
<template #subtitle>
66+
Once your account is deleted, all of its resources
67+
and data will be permanently deleted. Before
68+
deleting your account, please download any data or
69+
information that you wish to retain.
70+
</template>
71+
<template #content>
72+
<DeleteUserForm />
73+
</template>
74+
</Card>
75+
</Container>
7876
</template>

‎resources/js/Pages/Welcome.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup>
2+
import { usePage } from '@inertiajs/vue3';
23
import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
34
45
defineProps({
@@ -17,6 +18,8 @@ defineProps({
1718
required: true,
1819
},
1920
});
21+
22+
const page = usePage();
2023
</script>
2124

2225
<template>
@@ -49,7 +52,7 @@ defineProps({
4952
class="underline text-primary hover:text-color"
5053
>PrimeVue</a>.
5154
</p>
52-
<template v-if="$page.props.auth.user">
55+
<template v-if="page.props.auth.user">
5356
<InertiaLink :href="route('dashboard')">
5457
<Button
5558
label="Dashboard"

‎resources/js/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
1010
import PrimeVue from 'primevue/config';
1111
import ToastService from 'primevue/toastservice';
1212

13-
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
1413
import Container from '@/Components/Container.vue';
14+
import PageTitleSection from '@/Components/PageTitleSection.vue';
1515

1616
import { useDark } from '@vueuse/core';
1717

@@ -36,8 +36,8 @@ createInertiaApp({
3636
.use(ToastService)
3737
.component('InertiaHead', Head)
3838
.component('InertiaLink', Link)
39-
.component('AuthenticatedLayout', AuthenticatedLayout)
4039
.component('Container', Container)
40+
.component('PageTitleSection', PageTitleSection)
4141
.mount(el);
4242
},
4343
progress: {

‎resources/js/ssr.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import { route as routeFn } from 'ziggy-js';
1111
import PrimeVue from 'primevue/config';
1212
import ToastService from 'primevue/toastservice';
1313

14-
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
1514
import Container from '@/Components/Container.vue';
15+
import PageTitleSection from '@/Components/PageTitleSection.vue';
1616

1717
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
1818

@@ -44,8 +44,8 @@ createServer((page) =>
4444
.use(ToastService)
4545
.component('InertiaHead', Head)
4646
.component('InertiaLink', Link)
47-
.component('AuthenticatedLayout', AuthenticatedLayout)
48-
.component('Container', Container);
47+
.component('Container', Container)
48+
.component('PageTitleSection', PageTitleSection);
4949
},
5050
})
5151
);

0 commit comments

Comments
 (0)