Layout improvements

resources/js/Components/Container.vue

@@ -1,11 +1,21 @@
 <script setup>
-defineProps({
-    spacedMobile: {
+const props = defineProps({
+    fluid: {
         type: Boolean,
-        default: true,
+        default: false,
         required: false,
     },
-    fluid: {
+    vertical: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    flushMobile: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    vertical: {
         type: Boolean,
         default: false,
         required: false,
@@ -14,11 +24,16 @@ defineProps({
 </script>
 
 <template>
-    <div :class="[
-        { 'max-w-(--breakpoint-2xl) mx-auto': !fluid },
-        spacedMobile ? 'px-4' : 'px-0',
-        'md:px-8',
-    ]">
+    <div
+        class="md:px-8"
+        :class="[
+            {
+                'max-w-(--breakpoint-2xl) mx-auto': !props.fluid,
+                'py-4 md:py-8 space-y-4 md:space-y-8': props.vertical
+            },
+            props.flushMobile ? 'px-0' : 'px-4',
+        ]"
+    >
         <slot />
     </div>
-</template>
+</template>

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

@@ -0,0 +1,7 @@
+<template>
+    <div class="w-full border-t dynamic-border">
+        <div class="flex flex-col items-center justify-center text-center dynamic-bg py-6 px-3">
+            <p>Your Company - {{ new Date().getFullYear() }}</p>
+        </div>
+    </div>
+</template>

resources/js/Layouts/Admin/Partials/SideMenuItems.vue → resources/js/Components/Layout/Admin/SideMenuItems.vue

@@ -1,30 +1,40 @@
 <script setup>
+import { computed } from 'vue';
+import { usePage } from '@inertiajs/vue3';
 import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
 
+const page = usePage();
+const currentRoute = computed(() => {
+    // Access page.url to trigger re-computation on navigation.
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    const url = page.url;
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    return route().current();
+});
+
 // Nav Items
-const currentRoute = route().current();
-const homeMenuItems = [
+const homeMenuItems = computed(() => [
     {
         label: 'Welcome',
         icon: 'pi pi-home',
         route: route('welcome'),
-        active: currentRoute == 'welcome',
+        active: currentRoute.value == 'welcome',
     },
     {
         label: 'Dashboard',
         icon: 'pi pi-th-large',
         route: route('admin.dashboard'),
-        active: currentRoute == 'admin.dashboard',
+        active: currentRoute.value == 'admin.dashboard',
     },
-];
-const analyticsMenuItems = [
+]);
+const analyticsMenuItems = computed(() => [
     {
         label: 'Users',
         icon: 'pi pi-user',
         route: route('admin.users.index'),
-        active: currentRoute == 'admin.users.index',
+        active: currentRoute.value == 'admin.users.index',
     },
-];
+]);
 const exampleNestedMenuItems = [
     {
         label: 'Files',

resources/js/Layouts/Admin/Partials/TopNav.vue → resources/js/Components/Layout/Admin/TopNav.vue

@@ -14,7 +14,7 @@ const userMenu = useTemplateRef('user-menu');
 const userMenuItems = [
     {
         label: 'Profile',
-        url: route('admin.profile.edit'),
+        route: route('admin.profile.edit'),
         icon: 'pi pi-fw pi-user',
     },
     {
@@ -32,15 +32,11 @@ const toggleUserMenu = (event) => {
 
 <template>
     <nav class="dynamic-bg border-b dynamic-border">
-        <Container :fluid="true">
-            <LinksMenuBar :pt="{
-                root: {
-                    class: 'px-0 py-3 border-0 rounded-none dynamic-bg',
-                },
-                button: {
-                    class: 'hidden',
-                },
-            }">
+        <Container fluid>
+            <LinksMenuBar
+                pt:root:class="px-0 py-3 border-0 rounded-none dynamic-bg"
+                pt:button:class="hidden"
+            >
                 <template #start>
                     <div class="flex items-center">
                         <div class="shrink-0 flex items-center">
@@ -49,11 +45,7 @@ const toggleUserMenu = (event) => {
                                 outlined
                                 severity="secondary"
                                 icon="pi pi-bars"
-                                :pt="{
-                                    icon: {
-                                        class: 'text-xl',
-                                    },
-                                }"
+                                pt:icon:class="text-xl"
                                 @click="emit('open-nav')"
                             />
                             <InertiaLink
@@ -73,28 +65,28 @@ const toggleUserMenu = (event) => {
                         <div>
                             <ToggleDarkModeButton
                                 severity="secondary"
-                                text
                                 rounded
+                                text
                             />
                         </div>
                         <!-- User Dropdown Menu -->
                         <div class="flex flex-col">
                             <Button
                                 id="user-menu-btn"
-                                text
                                 severity="secondary"
                                 :label="$page.props.auth.user.name"
                                 class="hidden sm:flex"
                                 icon="pi pi-angle-down"
                                 iconPos="right"
+                                text
                                 @click="toggleUserMenu($event)"
                             />
                             <Button
                                 class="flex sm:hidden"
                                 icon="pi pi-user"
-                                text
                                 rounded
                                 severity="secondary"
+                                text
                                 @click="toggleUserMenu($event)"
                             />
                             <div
@@ -105,12 +97,8 @@ const toggleUserMenu = (event) => {
                                 ref="user-menu"
                                 appendTo="#user-menu-append"
                                 :model="userMenuItems"
+                                pt:root:class="left-auto! top-0! right-0"
                                 popup
-                                :pt="{
-                                    root: {
-                                        class: 'left-auto! top-0! right-0',
-                                    },
-                                }"
                             />
                         </div>
                     </div>

resources/js/Components/PageTitleSection.vue

@@ -0,0 +1,16 @@
+<template>
+    <section>
+        <div class="flex items-end justify-between flex-wrap gap-2 md:gap-4">
+            <div>
+                <h1 class="font-bold text-2xl md:text-3xl leading-tight">
+                    <slot name="title" />
+                </h1>
+            </div>
+            <div>
+                <div v-if="$slots.end">
+                    <slot name="end" />
+                </div>
+            </div>
+        </div>
+    </section>
+</template>

resources/js/Layouts/Admin/AuthenticatedLayout.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { ref, useTemplateRef, onMounted } from 'vue';
 import LinksBreadcrumb from '@/Components/PrimeVue/LinksBreadcrumb.vue';
-import MobileSidebarNavDrawer from './Partials/MobileSidebarNavDrawer.vue';
-import TopNav from './Partials/TopNav.vue';
-import Footer from './Partials/Footer.vue';
-import SideMenuItems from './Partials/SideMenuItems.vue';
+import MobileSidebarNavDrawer from '@/Components/Layout/Admin/MobileSidebarNavDrawer.vue';
+import TopNav from '@/Components/Layout/Admin/TopNav.vue';
+import Footer from '@/Components/Layout/Admin/Footer.vue';
+import SideMenuItems from '@/Components/Layout/Admin/SideMenuItems.vue';
 
 defineProps({
     pageTitle: {
@@ -45,14 +45,14 @@ onMounted(() => {
 </script>
 
 <template>
-    <Teleport to="body">
-        <Toast position="top-center" />
-        <MobileSidebarNavDrawer v-model="navDrawerOpen">
-            <SideMenuItems />
-        </MobileSidebarNavDrawer>
-    </Teleport>
-
     <div class="h-screen flex flex-col">
+        <Teleport to="body">
+            <Toast position="top-center" />
+            <MobileSidebarNavDrawer v-model="navDrawerOpen">
+                <SideMenuItems />
+            </MobileSidebarNavDrawer>
+        </Teleport>
+
         <header
             id="site-header"
             ref="site-header"
@@ -62,7 +62,7 @@ onMounted(() => {
             <TopNav @open-nav="navDrawerOpen = true" />
         </header>
 
-        <main class="flex-1">
+        <div class="flex-1">
             <!-- Desktop Sidebar -->
             <aside :class="[
                 '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(() => {
                     v-if="breadcrumbs.length"
                     class="dynamic-bg border-b dynamic-border"
                 >
-                    <Container :fluid="true">
-                        <div class="flex items-center justify-between flex-wrap">
-                            <div>
-                                <LinksBreadcrumb
-                                    :model="breadcrumbs"
-                                    class="py-3 lg:py-5"
-                                />
-                            </div>
-                            <div>
-                                <div
-                                    v-if="$slots.headerEnd"
-                                    class="py-3"
-                                >
-                                    <slot name="headerEnd" />
-                                </div>
-                            </div>
-                        </div>
+                    <Container fluid>
+                        <LinksBreadcrumb
+                            :model="breadcrumbs"
+                            class="py-4"
+                        />
                     </Container>
                 </nav>
 
-                <!-- Page Title -->
-                <section v-if="pageTitle">
-                    <Container
-                        :fluid="true"
-                        class="my-4 md:my-8"
-                    >
-                        <div class="flex items-end justify-between flex-wrap">
-                            <div>
-                                <h1 class="font-bold text-2xl md:text-3xl leading-tight">
-                                    {{ pageTitle }}
-                                </h1>
-                            </div>
-                            <div>
-                                <div v-if="$slots.titleEnd">
-                                    <slot name="titleEnd" />
-                                </div>
-                            </div>
-                        </div>
-                    </Container>
-                </section>
-
                 <!-- Page Content -->
-                <section
+                <main
                     id="page-content"
                     class="grow"
                 >
                     <slot />
-                </section>
+                </main>
 
                 <footer>
                     <Footer />
                 </footer>
             </div>
-        </main>
+        </div>
     </div>
 </template>