Skip to content

Commit a8e1b36

Browse files
connorabbasconnorabbas
authored
Merge pull request #157 from connorabbas/admin-develop
Layout improvements
2 parents 0b2cc0d + 589ff97 commit a8e1b36

File tree

17 files changed

+406
-409
lines changed

17 files changed

+406
-409
lines changed

‎resources/js/Components/Container.vue‎

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
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: {
14+
type: Boolean,
15+
default: false,
16+
required: false,
17+
},
18+
vertical: {
919
type: Boolean,
1020
default: false,
1121
required: false,
@@ -14,11 +24,16 @@ defineProps({
1424
</script>
1525

1626
<template>
17-
<div :class="[
18-
{ 'max-w-(--breakpoint-2xl) mx-auto': !fluid },
19-
spacedMobile ? 'px-4' : 'px-0',
20-
'md:px-8',
21-
]">
27+
<div
28+
class="md:px-8"
29+
:class="[
30+
{
31+
'max-w-(--breakpoint-2xl) mx-auto': !props.fluid,
32+
'py-4 md:py-8 space-y-4 md:space-y-8': props.vertical
33+
},
34+
props.flushMobile ? 'px-0' : 'px-4',
35+
]"
36+
>
2237
<slot />
2338
</div>
24-
</template>
39+
</template>

‎resources/js/Layouts/Admin/Partials/DrawerMenu.vue‎ renamed to ‎resources/js/Components/Layout/Admin/DrawerMenu.vue‎

File renamed without changes.

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<div class="w-full border-t dynamic-border">
3+
<div class="flex flex-col items-center justify-center text-center dynamic-bg py-6 px-3">
4+
<p>Your Company - {{ new Date().getFullYear() }}</p>
5+
</div>
6+
</div>
7+
</template>

‎resources/js/Layouts/Admin/Partials/MobileSidebarNavDrawer.vue‎ renamed to ‎resources/js/Components/Layout/Admin/MobileSidebarNavDrawer.vue‎

File renamed without changes.

‎resources/js/Layouts/Admin/Partials/SideMenuItems.vue‎ renamed to ‎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/Layouts/Admin/Partials/TopNav.vue‎ renamed to ‎resources/js/Components/Layout/Admin/TopNav.vue‎

Lines changed: 11 additions & 23 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
{
@@ -32,15 +32,11 @@ const toggleUserMenu = (event) => {
3232

3333
<template>
3434
<nav class="dynamic-bg border-b dynamic-border">
35-
<Container :fluid="true">
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-
}">
35+
<Container fluid>
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/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/Admin/AuthenticatedLayout.vue‎

Lines changed: 20 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script setup>
22
import { ref, useTemplateRef, onMounted } from 'vue';
33
import LinksBreadcrumb from '@/Components/PrimeVue/LinksBreadcrumb.vue';
4-
import MobileSidebarNavDrawer from './Partials/MobileSidebarNavDrawer.vue';
5-
import TopNav from './Partials/TopNav.vue';
6-
import Footer from './Partials/Footer.vue';
7-
import SideMenuItems from './Partials/SideMenuItems.vue';
4+
import MobileSidebarNavDrawer from '@/Components/Layout/Admin/MobileSidebarNavDrawer.vue';
5+
import TopNav from '@/Components/Layout/Admin/TopNav.vue';
6+
import Footer from '@/Components/Layout/Admin/Footer.vue';
7+
import SideMenuItems from '@/Components/Layout/Admin/SideMenuItems.vue';
88
99
defineProps({
1010
pageTitle: {
@@ -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"
@@ -62,7 +62,7 @@ onMounted(() => {
6262
<TopNav @open-nav="navDrawerOpen = true" />
6363
</header>
6464

65-
<main class="flex-1">
65+
<div class="flex-1">
6666
<!-- Desktop Sidebar -->
6767
<aside :class="[
6868
'w-[18rem] inset-0 hidden lg:block fixed overflow-y-auto overflow-x-hidden dynamic-bg border-r dynamic-border',
@@ -83,59 +83,26 @@ onMounted(() => {
8383
v-if="breadcrumbs.length"
8484
class="dynamic-bg border-b dynamic-border"
8585
>
86-
<Container :fluid="true">
87-
<div class="flex items-center justify-between flex-wrap">
88-
<div>
89-
<LinksBreadcrumb
90-
:model="breadcrumbs"
91-
class="py-3 lg:py-5"
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>
86+
<Container fluid>
87+
<LinksBreadcrumb
88+
:model="breadcrumbs"
89+
class="py-4"
90+
/>
10391
</Container>
10492
</nav>
10593

106-
<!-- Page Title -->
107-
<section v-if="pageTitle">
108-
<Container
109-
:fluid="true"
110-
class="my-4 md:my-8"
111-
>
112-
<div class="flex items-end justify-between flex-wrap">
113-
<div>
114-
<h1 class="font-bold text-2xl md:text-3xl leading-tight">
115-
{{ pageTitle }}
116-
</h1>
117-
</div>
118-
<div>
119-
<div v-if="$slots.titleEnd">
120-
<slot name="titleEnd" />
121-
</div>
122-
</div>
123-
</div>
124-
</Container>
125-
</section>
126-
12794
<!-- Page Content -->
128-
<section
95+
<main
12996
id="page-content"
13097
class="grow"
13198
>
13299
<slot />
133-
</section>
100+
</main>
134101

135102
<footer>
136103
<Footer />
137104
</footer>
138105
</div>
139-
</main>
106+
</div>
140107
</div>
141108
</template>

‎resources/js/Layouts/Admin/Partials/Footer.vue‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)