Skip to content

Commit f1a412c

Browse files
connorabbasconnorabbas
authored
Merge pull request #158 from connorabbas/develop
Layout Improvements
2 parents cc51234 + 40a4970 commit f1a412c

File tree

7 files changed

+130
-109
lines changed

7 files changed

+130
-109
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);
@@ -78,15 +86,12 @@ watchEffect(() => {
7886
<template>
7987
<div>
8088
<div class="min-h-screen">
81-
<nav
82-
class="dynamic-bg border-b"
83-
:class="$slots.header ? 'dynamic-border' : 'shadow-sm'"
84-
>
89+
<nav class="dynamic-bg shadow-sm">
8590
<!-- Primary Navigation Menu -->
8691
<Container>
8792
<LinksMenuBar
8893
:model="mainMenuItems"
89-
pt:root:class="px-0 py-3 border-0 rounded-none dynamic-bg"
94+
pt:root:class="px-0 py-4 border-0 rounded-none dynamic-bg"
9095
pt:button:class="hidden"
9196
>
9297
<template #start>
@@ -114,7 +119,7 @@ watchEffect(() => {
114119
id="user-menu-btn"
115120
text
116121
severity="secondary"
117-
:label="$page.props.auth.user.name"
122+
:label="page.props.auth.user.name"
118123
icon="pi pi-angle-down"
119124
iconPos="right"
120125
@click="toggleUserMenu($event)"
@@ -201,18 +206,6 @@ watchEffect(() => {
201206
</Drawer>
202207
</nav>
203208

204-
<!-- Page Heading -->
205-
<header
206-
v-if="$slots.header"
207-
class="dynamic-bg shadow-sm"
208-
>
209-
<Container>
210-
<div class="py-6">
211-
<slot name="header" />
212-
</div>
213-
</Container>
214-
</header>
215-
216209
<!-- Page Content -->
217210
<Toast position="top-center" />
218211
<main>

‎resources/js/Pages/Dashboard.vue‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1+
<script setup>
2+
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
3+
4+
defineOptions({ layout: AuthenticatedLayout });
5+
</script>
6+
17
<template>
28
<InertiaHead title="Dashboard" />
3-
<AuthenticatedLayout>
4-
<template #header>
5-
<h1 class="font-bold text-2xl leading-tight">Dashboard</h1>
6-
</template>
7-
<Container>
8-
<div class="py-4 md:py-8">
9-
<Card>
10-
<template #content>
11-
<p class="m-0">You are logged in!</p>
12-
</template>
13-
</Card>
14-
</div>
15-
</Container>
16-
</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>
1717
</template>

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

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup>
2+
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
23
import DeleteUserForm from './Partials/DeleteUserForm.vue';
34
import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
45
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
@@ -11,67 +12,65 @@ defineProps({
1112
type: String,
1213
},
1314
});
15+
16+
defineOptions({ layout: AuthenticatedLayout });
1417
</script>
1518

1619
<template>
1720
<InertiaHead title="Profile" />
1821

19-
<AuthenticatedLayout>
20-
<template #header>
21-
<h1 class="font-bold text-2xl leading-tight">Profile</h1>
22-
</template>
22+
<Container vertical>
23+
<PageTitleSection>
24+
<template #title>
25+
Profile
26+
</template>
27+
</PageTitleSection>
2328

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

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

58-
<Card
59-
pt:body:class="max-w-2xl space-y-3"
60-
pt:caption:class="space-y-1"
61-
>
62-
<template #title>Delete Account</template>
63-
<template #subtitle>
64-
Once your account is deleted, all of its resources
65-
and data will be permanently deleted. Before
66-
deleting your account, please download any data or
67-
information that you wish to retain.
68-
</template>
69-
<template #content>
70-
<DeleteUserForm />
71-
</template>
72-
</Card>
73-
</div>
74-
</div>
75-
</Container>
76-
</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>
7776
</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 customThemePreset from '@/theme/noir-preset';
1717
import { useDark } from '@vueuse/core';
@@ -46,8 +46,8 @@ createInertiaApp({
4646
.use(ToastService)
4747
.component('InertiaHead', Head)
4848
.component('InertiaLink', Link)
49-
.component('AuthenticatedLayout', AuthenticatedLayout)
5049
.component('Container', Container)
50+
.component('PageTitleSection', PageTitleSection)
5151
.mount(el);
5252
},
5353
progress: {

0 commit comments

Comments
 (0)