From 15303278e81ccec88b7cf2d143bcf52a69c77858 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 20:39:16 +0000
Subject: [PATCH 01/12] WIP admin layout updates

---
 .../Layout/Admin}/DrawerMenu.vue                 |  0
 resources/js/Components/Layout/Admin/Footer.vue  |  7 +++++++
 .../Layout/Admin}/MobileSidebarNavDrawer.vue     |  0
 .../Layout/Admin}/SideMenuItems.vue              |  0
 .../Layout/Admin}/TopNav.vue                     |  0
 .../js/Layouts/Admin/AuthenticatedLayout.vue     | 16 ++++++++--------
 resources/js/Layouts/Admin/Partials/Footer.vue   |  9 ---------
 resources/js/Pages/Admin/Users/Index.vue         |  4 ++--
 8 files changed, 17 insertions(+), 19 deletions(-)
 rename resources/js/{Layouts/Admin/Partials => Components/Layout/Admin}/DrawerMenu.vue (100%)
 create mode 100644 resources/js/Components/Layout/Admin/Footer.vue
 rename resources/js/{Layouts/Admin/Partials => Components/Layout/Admin}/MobileSidebarNavDrawer.vue (100%)
 rename resources/js/{Layouts/Admin/Partials => Components/Layout/Admin}/SideMenuItems.vue (100%)
 rename resources/js/{Layouts/Admin/Partials => Components/Layout/Admin}/TopNav.vue (100%)
 delete mode 100644 resources/js/Layouts/Admin/Partials/Footer.vue

diff --git a/resources/js/Layouts/Admin/Partials/DrawerMenu.vue b/resources/js/Components/Layout/Admin/DrawerMenu.vue
similarity index 100%
rename from resources/js/Layouts/Admin/Partials/DrawerMenu.vue
rename to resources/js/Components/Layout/Admin/DrawerMenu.vue
diff --git a/resources/js/Components/Layout/Admin/Footer.vue b/resources/js/Components/Layout/Admin/Footer.vue
new file mode 100644
index 00000000..be9099f2
--- /dev/null
+++ b/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>
diff --git a/resources/js/Layouts/Admin/Partials/MobileSidebarNavDrawer.vue b/resources/js/Components/Layout/Admin/MobileSidebarNavDrawer.vue
similarity index 100%
rename from resources/js/Layouts/Admin/Partials/MobileSidebarNavDrawer.vue
rename to resources/js/Components/Layout/Admin/MobileSidebarNavDrawer.vue
diff --git a/resources/js/Layouts/Admin/Partials/SideMenuItems.vue b/resources/js/Components/Layout/Admin/SideMenuItems.vue
similarity index 100%
rename from resources/js/Layouts/Admin/Partials/SideMenuItems.vue
rename to resources/js/Components/Layout/Admin/SideMenuItems.vue
diff --git a/resources/js/Layouts/Admin/Partials/TopNav.vue b/resources/js/Components/Layout/Admin/TopNav.vue
similarity index 100%
rename from resources/js/Layouts/Admin/Partials/TopNav.vue
rename to resources/js/Components/Layout/Admin/TopNav.vue
diff --git a/resources/js/Layouts/Admin/AuthenticatedLayout.vue b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
index 5899a1ad..d2c8e789 100644
--- a/resources/js/Layouts/Admin/AuthenticatedLayout.vue
+++ b/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: {
@@ -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',
@@ -125,17 +125,17 @@ onMounted(() => {
                 </section>
 
                 <!-- Page Content -->
-                <section
+                <main
                     id="page-content"
                     class="grow"
                 >
                     <slot />
-                </section>
+                </main>
 
                 <footer>
                     <Footer />
                 </footer>
             </div>
-        </main>
+        </div>
     </div>
 </template>
diff --git a/resources/js/Layouts/Admin/Partials/Footer.vue b/resources/js/Layouts/Admin/Partials/Footer.vue
deleted file mode 100644
index 37f61805..00000000
--- a/resources/js/Layouts/Admin/Partials/Footer.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="pt-4 md:pt-8">
-        <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>
-    </div>
-</template>
diff --git a/resources/js/Pages/Admin/Users/Index.vue b/resources/js/Pages/Admin/Users/Index.vue
index abc31057..ec8092ab 100644
--- a/resources/js/Pages/Admin/Users/Index.vue
+++ b/resources/js/Pages/Admin/Users/Index.vue
@@ -158,9 +158,9 @@ const {
                                         v-tooltip.top="'Show User Actions'"
                                         type="button"
                                         severity="secondary"
-                                        text
-                                        rounded
                                         icon="pi pi-ellipsis-v"
+                                        rounded
+                                        text
                                         @click="toggleUserContextMenu($event, data)"
                                     />
                                 </template>

From fb1ee70cb81c401b6968fa28dbafa5ac8abc11aa Mon Sep 17 00:00:00 2001
From: Connor Abbas <89364288+connorabbas@users.noreply.github.com>
Date: Sat, 22 Feb 2025 14:47:30 -0600
Subject: [PATCH 02/12] improvements

---
 .../js/Components/Layout/Admin/TopNav.vue     |  2 +-
 resources/js/Components/PageTitleSection.vue  | 16 ++++++++++
 .../js/Layouts/Admin/AuthenticatedLayout.vue  |  4 +--
 resources/js/Pages/Admin/Dashboard.vue        |  2 +-
 resources/js/Pages/Admin/Profile/Edit.vue     |  2 +-
 resources/js/Pages/Admin/Users/Index.vue      | 31 ++++++++++---------
 resources/js/app.js                           |  2 ++
 7 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 resources/js/Components/PageTitleSection.vue

diff --git a/resources/js/Components/Layout/Admin/TopNav.vue b/resources/js/Components/Layout/Admin/TopNav.vue
index 48ff718b..5e571d67 100644
--- a/resources/js/Components/Layout/Admin/TopNav.vue
+++ b/resources/js/Components/Layout/Admin/TopNav.vue
@@ -32,7 +32,7 @@ const toggleUserMenu = (event) => {
 
 <template>
     <nav class="dynamic-bg border-b dynamic-border">
-        <Container :fluid="true">
+        <Container fluid>
             <LinksMenuBar :pt="{
                 root: {
                     class: 'px-0 py-3 border-0 rounded-none dynamic-bg',
diff --git a/resources/js/Components/PageTitleSection.vue b/resources/js/Components/PageTitleSection.vue
new file mode 100644
index 00000000..be66e9d8
--- /dev/null
+++ b/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>
diff --git a/resources/js/Layouts/Admin/AuthenticatedLayout.vue b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
index d2c8e789..db2fe8dc 100644
--- a/resources/js/Layouts/Admin/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
@@ -83,7 +83,7 @@ onMounted(() => {
                     v-if="breadcrumbs.length"
                     class="dynamic-bg border-b dynamic-border"
                 >
-                    <Container :fluid="true">
+                    <Container fluid>
                         <div class="flex items-center justify-between flex-wrap">
                             <div>
                                 <LinksBreadcrumb
@@ -106,7 +106,7 @@ onMounted(() => {
                 <!-- Page Title -->
                 <section v-if="pageTitle">
                     <Container
-                        :fluid="true"
+                        fluid
                         class="my-4 md:my-8"
                     >
                         <div class="flex items-end justify-between flex-wrap">
diff --git a/resources/js/Pages/Admin/Dashboard.vue b/resources/js/Pages/Admin/Dashboard.vue
index 2876e572..423c5eb4 100644
--- a/resources/js/Pages/Admin/Dashboard.vue
+++ b/resources/js/Pages/Admin/Dashboard.vue
@@ -2,7 +2,7 @@
     <InertiaHead title="Dashboard" />
     <AuthenticatedAdminLayout>
         <Container
-            :fluid="true"
+            fluid
             class="py-4 md:py-8"
         >
             <div>
diff --git a/resources/js/Pages/Admin/Profile/Edit.vue b/resources/js/Pages/Admin/Profile/Edit.vue
index 43b5ae14..a6a40554 100644
--- a/resources/js/Pages/Admin/Profile/Edit.vue
+++ b/resources/js/Pages/Admin/Profile/Edit.vue
@@ -28,7 +28,7 @@ const breadcrumbs = [
         :page-title="pageTitle"
         :breadcrumbs="breadcrumbs"
     >
-        <Container :fluid="true">
+        <Container fluid>
             <div class="space-y-4 md:space-y-8">
                 <Card :pt="{
                     body: {
diff --git a/resources/js/Pages/Admin/Users/Index.vue b/resources/js/Pages/Admin/Users/Index.vue
index ec8092ab..8f39ea62 100644
--- a/resources/js/Pages/Admin/Users/Index.vue
+++ b/resources/js/Pages/Admin/Users/Index.vue
@@ -55,22 +55,25 @@ const {
     <InertiaHead :title="pageTitle" />
 
     <AuthenticatedAdminLayout
-        :page-title="pageTitle"
         :breadcrumbs="breadcrumbs"
     >
-        <template #titleEnd>
-            <Button
-                v-if="filteredOrSorted"
-                severity="secondary"
-                type="button"
-                icon="pi pi-filter-slash"
-                label="Clear Filters"
-                outlined
-                @click="hardReset"
-            />
-        </template>
-
-        <Container :fluid="true">
+        <Container fluid>
+            <PageTitleSection>
+                <template #title>
+                    {{ pageTitle }}
+                </template>
+                <template #end>
+                    <Button
+                        v-if="filteredOrSorted"
+                        severity="secondary"
+                        type="button"
+                        icon="pi pi-filter-slash"
+                        label="Clear Filters"
+                        outlined
+                        @click="hardReset"
+                    />
+                </template>
+            </PageTitleSection>
             <div>
                 <Card pt:body:class="p-3">
                     <template #content>
diff --git a/resources/js/app.js b/resources/js/app.js
index 9b7e32d9..4b8a1b76 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -14,6 +14,7 @@ import Tooltip from 'primevue/tooltip';
 import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Container from '@/Components/Container.vue';
+import PageTitleSection from '@/Components/PageTitleSection.vue';
 
 import customThemePreset from '@/theme/noir-preset';
 import { useDark } from '@vueuse/core';
@@ -52,6 +53,7 @@ createInertiaApp({
             .component('AuthenticatedAdminLayout', AuthenticatedAdminLayout)
             .component('AuthenticatedLayout', AuthenticatedLayout)
             .component('Container', Container)
+            .component('PageTitleSection', PageTitleSection)
             .mount(el);
     },
     progress: {

From fd117e43d468c24f6ca1323b0c5818bef3b42527 Mon Sep 17 00:00:00 2001
From: Connor Abbas <89364288+connorabbas@users.noreply.github.com>
Date: Sat, 22 Feb 2025 14:54:51 -0600
Subject: [PATCH 03/12] better container

---
 resources/js/Components/Container.vue    | 22 ++++++++++++++++------
 resources/js/Pages/Admin/Users/Index.vue |  2 +-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/resources/js/Components/Container.vue b/resources/js/Components/Container.vue
index 39c12c60..a0232b82 100644
--- a/resources/js/Components/Container.vue
+++ b/resources/js/Components/Container.vue
@@ -1,5 +1,5 @@
 <script setup>
-defineProps({
+const props = defineProps({
     spacedMobile: {
         type: Boolean,
         default: true,
@@ -10,15 +10,25 @@ defineProps({
         default: false,
         required: false,
     },
+    vertical: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 </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.spacedMobile ? 'px-4' : 'px-0',
+        ]"
+    >
         <slot />
     </div>
 </template>
diff --git a/resources/js/Pages/Admin/Users/Index.vue b/resources/js/Pages/Admin/Users/Index.vue
index 8f39ea62..3158a3af 100644
--- a/resources/js/Pages/Admin/Users/Index.vue
+++ b/resources/js/Pages/Admin/Users/Index.vue
@@ -57,7 +57,7 @@ const {
     <AuthenticatedAdminLayout
         :breadcrumbs="breadcrumbs"
     >
-        <Container fluid>
+        <Container vertical fluid>
             <PageTitleSection>
                 <template #title>
                     {{ pageTitle }}

From 0b6be48c78e98d669f273843d91075a822dea5f7 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 21:02:20 +0000
Subject: [PATCH 04/12] more improvements

---
 .../js/Layouts/Admin/AuthenticatedLayout.vue  | 23 +------------------
 resources/js/Pages/Admin/Dashboard.vue        |  2 +-
 resources/js/Pages/Admin/Profile/Edit.vue     | 15 ++++++++----
 resources/js/Pages/Admin/Users/Index.vue      |  9 ++++----
 4 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/resources/js/Layouts/Admin/AuthenticatedLayout.vue b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
index db2fe8dc..4981ed70 100644
--- a/resources/js/Layouts/Admin/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
@@ -88,7 +88,7 @@ onMounted(() => {
                             <div>
                                 <LinksBreadcrumb
                                     :model="breadcrumbs"
-                                    class="py-3 lg:py-5"
+                                    class="py-4"
                                 />
                             </div>
                             <div>
@@ -103,27 +103,6 @@ onMounted(() => {
                     </Container>
                 </nav>
 
-                <!-- Page Title -->
-                <section v-if="pageTitle">
-                    <Container
-                        fluid
-                        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 -->
                 <main
                     id="page-content"
diff --git a/resources/js/Pages/Admin/Dashboard.vue b/resources/js/Pages/Admin/Dashboard.vue
index 423c5eb4..52ceddfd 100644
--- a/resources/js/Pages/Admin/Dashboard.vue
+++ b/resources/js/Pages/Admin/Dashboard.vue
@@ -2,8 +2,8 @@
     <InertiaHead title="Dashboard" />
     <AuthenticatedAdminLayout>
         <Container
+            vertical
             fluid
-            class="py-4 md:py-8"
         >
             <div>
                 <Card>
diff --git a/resources/js/Pages/Admin/Profile/Edit.vue b/resources/js/Pages/Admin/Profile/Edit.vue
index a6a40554..d6cde151 100644
--- a/resources/js/Pages/Admin/Profile/Edit.vue
+++ b/resources/js/Pages/Admin/Profile/Edit.vue
@@ -24,11 +24,16 @@ const breadcrumbs = [
 <template>
     <InertiaHead :title="pageTitle" />
 
-    <AuthenticatedAdminLayout
-        :page-title="pageTitle"
-        :breadcrumbs="breadcrumbs"
-    >
-        <Container fluid>
+    <AuthenticatedAdminLayout :breadcrumbs="breadcrumbs">
+        <Container
+            vertical
+            fluid
+        >
+            <PageTitleSection>
+                <template #title>
+                    {{ pageTitle }}
+                </template>
+            </PageTitleSection>
             <div class="space-y-4 md:space-y-8">
                 <Card :pt="{
                     body: {
diff --git a/resources/js/Pages/Admin/Users/Index.vue b/resources/js/Pages/Admin/Users/Index.vue
index 3158a3af..6edf0b06 100644
--- a/resources/js/Pages/Admin/Users/Index.vue
+++ b/resources/js/Pages/Admin/Users/Index.vue
@@ -54,10 +54,11 @@ const {
 <template>
     <InertiaHead :title="pageTitle" />
 
-    <AuthenticatedAdminLayout
-        :breadcrumbs="breadcrumbs"
-    >
-        <Container vertical fluid>
+    <AuthenticatedAdminLayout :breadcrumbs="breadcrumbs">
+        <Container
+            vertical
+            fluid
+        >
             <PageTitleSection>
                 <template #title>
                     {{ pageTitle }}

From ca8e6ea3de3d5692120bf6eabc226644d149ae98 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 21:14:05 +0000
Subject: [PATCH 05/12] layout improvements

---
 resources/js/Components/Container.vue        | 24 ++++++++++++++------
 resources/js/Components/PageTitleSection.vue | 16 +++++++++++++
 resources/js/Layouts/AuthenticatedLayout.vue | 19 ++--------------
 resources/js/Pages/Dashboard.vue             | 17 +++++---------
 resources/js/Pages/Profile/Edit.vue          | 13 ++++++-----
 resources/js/app.js                          |  2 ++
 6 files changed, 50 insertions(+), 41 deletions(-)
 create mode 100644 resources/js/Components/PageTitleSection.vue

diff --git a/resources/js/Components/Container.vue b/resources/js/Components/Container.vue
index 39c12c60..34ba7de4 100644
--- a/resources/js/Components/Container.vue
+++ b/resources/js/Components/Container.vue
@@ -1,5 +1,5 @@
 <script setup>
-defineProps({
+const props = defineProps({
     spacedMobile: {
         type: Boolean,
         default: true,
@@ -10,15 +10,25 @@ defineProps({
         default: false,
         required: false,
     },
+    vertical: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 </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.spacedMobile ? 'px-4' : 'px-0',
+        ]"
+    >
         <slot />
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/resources/js/Components/PageTitleSection.vue b/resources/js/Components/PageTitleSection.vue
new file mode 100644
index 00000000..f1119f8e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 478c42c4..6b767b2f 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -78,15 +78,12 @@ watchEffect(() => {
 <template>
     <div>
         <div class="min-h-screen">
-            <nav
-                class="dynamic-bg border-b"
-                :class="$slots.header ? 'dynamic-border' : 'shadow-sm'"
-            >
+            <nav class="dynamic-bg shadow-sm">
                 <!-- Primary Navigation Menu -->
                 <Container>
                     <LinksMenuBar
                         :model="mainMenuItems"
-                        pt:root:class="px-0 py-3 border-0 rounded-none dynamic-bg"
+                        pt:root:class="px-0 py-4 border-0 rounded-none dynamic-bg"
                         pt:button:class="hidden"
                     >
                         <template #start>
@@ -201,18 +198,6 @@ watchEffect(() => {
                 </Drawer>
             </nav>
 
-            <!-- Page Heading -->
-            <header
-                v-if="$slots.header"
-                class="dynamic-bg shadow-sm"
-            >
-                <Container>
-                    <div class="py-6">
-                        <slot name="header" />
-                    </div>
-                </Container>
-            </header>
-
             <!-- Page Content -->
             <Toast position="top-center" />
             <main>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index ee6fe6b4..3b22a3ea 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,17 +1,12 @@
 <template>
     <InertiaHead title="Dashboard" />
     <AuthenticatedLayout>
-        <template #header>
-            <h1 class="font-bold text-2xl leading-tight">Dashboard</h1>
-        </template>
-        <Container>
-            <div class="py-4 md:py-8">
-                <Card>
-                    <template #content>
-                        <p class="m-0">You are logged in!</p>
-                    </template>
-                </Card>
-            </div>
+        <Container vertical>
+            <Card>
+                <template #content>
+                    <p class="m-0">You are logged in!</p>
+                </template>
+            </Card>
         </Container>
     </AuthenticatedLayout>
 </template>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index eb8568d3..2cd92912 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -17,12 +17,13 @@ defineProps({
     <InertiaHead title="Profile" />
 
     <AuthenticatedLayout>
-        <template #header>
-            <h1 class="font-bold text-2xl leading-tight">Profile</h1>
-        </template>
-
-        <Container>
-            <div class="py-4 md:py-8">
+        <Container vertical>
+            <PageTitleSection>
+                <template #title>
+                    Profile
+                </template>
+            </PageTitleSection>
+            <div>
                 <div class="space-y-4 md:space-y-8">
                     <Card
                         pt:body:class="max-w-2xl space-y-3"
diff --git a/resources/js/app.js b/resources/js/app.js
index a12dd778..60f136de 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -12,6 +12,7 @@ import ToastService from 'primevue/toastservice';
 
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Container from '@/Components/Container.vue';
+import PageTitleSection from '@/Components/PageTitleSection.vue';
 
 import customThemePreset from '@/theme/noir-preset';
 import { useDark } from '@vueuse/core';
@@ -48,6 +49,7 @@ createInertiaApp({
             .component('InertiaLink', Link)
             .component('AuthenticatedLayout', AuthenticatedLayout)
             .component('Container', Container)
+            .component('PageTitleSection', PageTitleSection)
             .mount(el);
     },
     progress: {

From 9fae811b591d2aa6231b6c0fbda148221e53da95 Mon Sep 17 00:00:00 2001
From: Connor Abbas <89364288+connorabbas@users.noreply.github.com>
Date: Sat, 22 Feb 2025 15:19:14 -0600
Subject: [PATCH 06/12] reactive current route

---
 resources/js/Layouts/AuthenticatedLayout.vue | 26 +++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 6b767b2f..35813df8 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,26 +1,34 @@
 <script setup>
-import { ref, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
-import { useForm } from '@inertiajs/vue3';
+import { ref, computed, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
+import { usePage, useForm } from '@inertiajs/vue3';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue';
 import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue';
 import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
 import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 
-const currentRoute = route().current();
+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();
+});
+
 const logoutForm = useForm({});
 function logout() {
     logoutForm.post(route('logout'));
 }
 
 // Main menu
-const mainMenuItems = [
+const mainMenuItems = computed(() => [
     {
         label: 'Dashboard',
         route: route('dashboard'),
-        active: currentRoute == 'dashboard',
+        active: currentRoute.value == 'dashboard',
     },
-];
+]);
 
 // User menu (desktop)
 const userMenu = useTemplateRef('user-menu');
@@ -43,18 +51,18 @@ const toggleUserMenu = (event) => {
 };
 
 // Mobile menu (Drawer)
-const homeMobileMenuItems = ref([
+const homeMobileMenuItems = 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('dashboard'),
-        active: currentRoute == 'dashboard',
+        active: currentRoute.value == 'dashboard',
     },
 ]);
 const mobileMenuOpen = ref(false);

From 67870c1b58c8933a067fe47ab7643500e82c00f1 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 21:24:32 +0000
Subject: [PATCH 07/12] persistent authenticated layout

---
 resources/js/Pages/Dashboard.vue    |  22 +++---
 resources/js/Pages/Profile/Edit.vue | 114 ++++++++++++++--------------
 resources/js/app.js                 |   2 -
 3 files changed, 70 insertions(+), 68 deletions(-)

diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 3b22a3ea..2f1c55c8 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,12 +1,16 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+
+defineOptions({ layout: AuthenticatedLayout });
+</script>
+
 <template>
     <InertiaHead title="Dashboard" />
-    <AuthenticatedLayout>
-        <Container vertical>
-            <Card>
-                <template #content>
-                    <p class="m-0">You are logged in!</p>
-                </template>
-            </Card>
-        </Container>
-    </AuthenticatedLayout>
+    <Container vertical>
+        <Card>
+            <template #content>
+                <p class="m-0">You are logged in!</p>
+            </template>
+        </Card>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 2cd92912..529cb9a2 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -1,4 +1,5 @@
 <script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import DeleteUserForm from './Partials/DeleteUserForm.vue';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
@@ -11,68 +12,67 @@ defineProps({
         type: String,
     },
 });
+
+defineOptions({ layout: AuthenticatedLayout });
 </script>
 
 <template>
     <InertiaHead title="Profile" />
+    <Container vertical>
+        <PageTitleSection>
+            <template #title>
+                Profile
+            </template>
+        </PageTitleSection>
+        <div>
+            <div class="space-y-4 md:space-y-8">
+                <Card
+                    pt:body:class="max-w-2xl space-y-3"
+                    pt:caption:class="space-y-1"
+                >
+                    <template #title>Profile Information</template>
+                    <template #subtitle>
+                        Update your account's profile information and email
+                        address.
+                    </template>
+                    <template #content>
+                        <UpdateProfileInformationForm
+                            :must-verify-email="mustVerifyEmail"
+                            :status="status"
+                        />
+                    </template>
+                </Card>
 
-    <AuthenticatedLayout>
-        <Container vertical>
-            <PageTitleSection>
-                <template #title>
-                    Profile
-                </template>
-            </PageTitleSection>
-            <div>
-                <div class="space-y-4 md:space-y-8">
-                    <Card
-                        pt:body:class="max-w-2xl space-y-3"
-                        pt:caption:class="space-y-1"
-                    >
-                        <template #title>Profile Information</template>
-                        <template #subtitle>
-                            Update your account's profile information and email
-                            address.
-                        </template>
-                        <template #content>
-                            <UpdateProfileInformationForm
-                                :must-verify-email="mustVerifyEmail"
-                                :status="status"
-                            />
-                        </template>
-                    </Card>
-
-                    <Card
-                        pt:body:class="max-w-2xl space-y-3"
-                        pt:caption:class="space-y-1"
-                    >
-                        <template #title>Update Password</template>
-                        <template #subtitle>
-                            Ensure your account is using a long, random password
-                            to stay secure.
-                        </template>
-                        <template #content>
-                            <UpdatePasswordForm />
-                        </template>
-                    </Card>
+                <Card
+                    pt:body:class="max-w-2xl space-y-3"
+                    pt:caption:class="space-y-1"
+                >
+                    <template #title>Update Password</template>
+                    <template #subtitle>
+                        Ensure your account is using a long, random password
+                        to stay secure.
+                    </template>
+                    <template #content>
+                        <UpdatePasswordForm />
+                    </template>
+                </Card>
 
-                    <Card
-                        pt:body:class="max-w-2xl space-y-3"
-                        pt:caption:class="space-y-1"
-                    >
-                        <template #title>Delete Account</template>
-                        <template #subtitle>
-                            Once your account is deleted, all of its resources
-                            and data will be permanently deleted. Before
-                            deleting your account, please download any data or
-                            information that you wish to retain.
-                        </template>
-                        <template #content>
-                            <DeleteUserForm />
-                        </template>
-                    </Card>
-                </div>
+                <Card
+                    pt:body:class="max-w-2xl space-y-3"
+                    pt:caption:class="space-y-1"
+                >
+                    <template #title>Delete Account</template>
+                    <template #subtitle>
+                        Once your account is deleted, all of its resources
+                        and data will be permanently deleted. Before
+                        deleting your account, please download any data or
+                        information that you wish to retain.
+                    </template>
+                    <template #content>
+                        <DeleteUserForm />
+                    </template>
+                </Card>
             </div>
-        </Container>
-    </AuthenticatedLayout>
+        </div>
+    </Container>
 </template>
diff --git a/resources/js/app.js b/resources/js/app.js
index 60f136de..90098bb6 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -10,7 +10,6 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Container from '@/Components/Container.vue';
 import PageTitleSection from '@/Components/PageTitleSection.vue';
 
@@ -47,7 +46,6 @@ createInertiaApp({
             .use(ToastService)
             .component('InertiaHead', Head)
             .component('InertiaLink', Link)
-            .component('AuthenticatedLayout', AuthenticatedLayout)
             .component('Container', Container)
             .component('PageTitleSection', PageTitleSection)
             .mount(el);

From c19fef3ed781872a7c4bad5bcb0424cad073d320 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 21:26:01 +0000
Subject: [PATCH 08/12] formatting

---
 resources/js/Pages/Dashboard.vue    | 1 +
 resources/js/Pages/Profile/Edit.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 2f1c55c8..e6972812 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -6,6 +6,7 @@ defineOptions({ layout: AuthenticatedLayout });
 
 <template>
     <InertiaHead title="Dashboard" />
+
     <Container vertical>
         <Card>
             <template #content>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 529cb9a2..5a01334a 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -18,6 +18,7 @@ defineOptions({ layout: AuthenticatedLayout });
 
 <template>
     <InertiaHead title="Profile" />
+
     <Container vertical>
         <PageTitleSection>
             <template #title>

From df60a6fa7d5d00f6fe87207bc015e710973a1d0f Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 21:29:33 +0000
Subject: [PATCH 09/12] use composable

---
 resources/js/Layouts/AuthenticatedLayout.vue | 2 +-
 resources/js/Pages/Welcome.vue               | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 35813df8..65bdef89 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -119,7 +119,7 @@ watchEffect(() => {
                                         id="user-menu-btn"
                                         text
                                         severity="secondary"
-                                        :label="$page.props.auth.user.name"
+                                        :label="page.props.auth.user.name"
                                         icon="pi pi-angle-down"
                                         iconPos="right"
                                         @click="toggleUserMenu($event)"
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index 10685846..a46dbfd7 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { usePage } from '@inertiajs/vue3';
 import ToggleDarkModeButton from '@/Components/ToggleDarkModeButton.vue';
 
 defineProps({
@@ -17,6 +18,8 @@ defineProps({
         required: true,
     },
 });
+
+const page = usePage();
 </script>
 
 <template>
@@ -49,7 +52,7 @@ defineProps({
                                 class="underline text-primary hover:text-color"
                             >PrimeVue</a>.
                         </p>
-                        <template v-if="$page.props.auth.user">
+                        <template v-if="page.props.auth.user">
                             <InertiaLink :href="route('dashboard')">
                                 <Button
                                     label="Dashboard"

From 5a248dc73f0fa3e1fc8c2006dbf332565eba64b1 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 21:31:37 +0000
Subject: [PATCH 10/12] edit layout

---
 resources/js/Pages/Profile/Edit.vue | 93 ++++++++++++++---------------
 1 file changed, 45 insertions(+), 48 deletions(-)

diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 5a01334a..f37446df 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -25,55 +25,52 @@ defineOptions({ layout: AuthenticatedLayout });
                 Profile
             </template>
         </PageTitleSection>
-        <div>
-            <div class="space-y-4 md:space-y-8">
-                <Card
-                    pt:body:class="max-w-2xl space-y-3"
-                    pt:caption:class="space-y-1"
-                >
-                    <template #title>Profile Information</template>
-                    <template #subtitle>
-                        Update your account's profile information and email
-                        address.
-                    </template>
-                    <template #content>
-                        <UpdateProfileInformationForm
-                            :must-verify-email="mustVerifyEmail"
-                            :status="status"
-                        />
-                    </template>
-                </Card>
 
-                <Card
-                    pt:body:class="max-w-2xl space-y-3"
-                    pt:caption:class="space-y-1"
-                >
-                    <template #title>Update Password</template>
-                    <template #subtitle>
-                        Ensure your account is using a long, random password
-                        to stay secure.
-                    </template>
-                    <template #content>
-                        <UpdatePasswordForm />
-                    </template>
-                </Card>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Profile Information</template>
+            <template #subtitle>
+                Update your account's profile information and email
+                address.
+            </template>
+            <template #content>
+                <UpdateProfileInformationForm
+                    :must-verify-email="mustVerifyEmail"
+                    :status="status"
+                />
+            </template>
+        </Card>
 
-                <Card
-                    pt:body:class="max-w-2xl space-y-3"
-                    pt:caption:class="space-y-1"
-                >
-                    <template #title>Delete Account</template>
-                    <template #subtitle>
-                        Once your account is deleted, all of its resources
-                        and data will be permanently deleted. Before
-                        deleting your account, please download any data or
-                        information that you wish to retain.
-                    </template>
-                    <template #content>
-                        <DeleteUserForm />
-                    </template>
-                </Card>
-            </div>
-        </div>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Update Password</template>
+            <template #subtitle>
+                Ensure your account is using a long, random password
+                to stay secure.
+            </template>
+            <template #content>
+                <UpdatePasswordForm />
+            </template>
+        </Card>
+
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Delete Account</template>
+            <template #subtitle>
+                Once your account is deleted, all of its resources
+                and data will be permanently deleted. Before
+                deleting your account, please download any data or
+                information that you wish to retain.
+            </template>
+            <template #content>
+                <DeleteUserForm />
+            </template>
+        </Card>
     </Container>
 </template>

From 40a497051c98fdd262ed9cf84e74a987dc08a95c Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 21:36:00 +0000
Subject: [PATCH 11/12] better mobile prop for container

---
 resources/js/Components/Container.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/Components/Container.vue b/resources/js/Components/Container.vue
index 34ba7de4..5fa6d4f8 100644
--- a/resources/js/Components/Container.vue
+++ b/resources/js/Components/Container.vue
@@ -1,16 +1,16 @@
 <script setup>
 const props = defineProps({
-    spacedMobile: {
+    fluid: {
         type: Boolean,
-        default: true,
+        default: false,
         required: false,
     },
-    fluid: {
+    vertical: {
         type: Boolean,
         default: false,
         required: false,
     },
-    vertical: {
+    flushMobile: {
         type: Boolean,
         default: false,
         required: false,
@@ -26,7 +26,7 @@ const props = defineProps({
                 'max-w-(--breakpoint-2xl) mx-auto': !props.fluid,
                 'py-4 md:py-8 space-y-4 md:space-y-8': props.vertical
             },
-            props.spacedMobile ? 'px-4' : 'px-0',
+            props.flushMobile ? 'px-0' : 'px-4',
         ]"
     >
         <slot />

From 589ff97c433453624be538c083221d46b1828481 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Sat, 22 Feb 2025 22:22:22 +0000
Subject: [PATCH 12/12] persistent layout, fixes

---
 .../Components/Layout/Admin/SideMenuItems.vue |  26 +-
 .../js/Components/Layout/Admin/TopNav.vue     |  32 +--
 .../js/Layouts/Admin/AuthenticatedLayout.vue  |  34 +--
 resources/js/Pages/Admin/Dashboard.vue        |  32 ++-
 resources/js/Pages/Admin/Profile/Edit.vue     | 145 +++++-----
 resources/js/Pages/Admin/Users/Index.vue      | 257 +++++++++---------
 resources/js/app.js                           |   4 -
 7 files changed, 257 insertions(+), 273 deletions(-)

diff --git a/resources/js/Components/Layout/Admin/SideMenuItems.vue b/resources/js/Components/Layout/Admin/SideMenuItems.vue
index dc6ebcec..46d9c630 100644
--- a/resources/js/Components/Layout/Admin/SideMenuItems.vue
+++ b/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',
diff --git a/resources/js/Components/Layout/Admin/TopNav.vue b/resources/js/Components/Layout/Admin/TopNav.vue
index 5e571d67..66816ad6 100644
--- a/resources/js/Components/Layout/Admin/TopNav.vue
+++ b/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',
     },
     {
@@ -33,14 +33,10 @@ const toggleUserMenu = (event) => {
 <template>
     <nav class="dynamic-bg border-b dynamic-border">
         <Container fluid>
-            <LinksMenuBar :pt="{
-                root: {
-                    class: 'px-0 py-3 border-0 rounded-none dynamic-bg',
-                },
-                button: {
-                    class: 'hidden',
-                },
-            }">
+            <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>
diff --git a/resources/js/Layouts/Admin/AuthenticatedLayout.vue b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
index 4981ed70..cb2e1c87 100644
--- a/resources/js/Layouts/Admin/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/Admin/AuthenticatedLayout.vue
@@ -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"
@@ -84,22 +84,10 @@ onMounted(() => {
                     class="dynamic-bg border-b dynamic-border"
                 >
                     <Container fluid>
-                        <div class="flex items-center justify-between flex-wrap">
-                            <div>
-                                <LinksBreadcrumb
-                                    :model="breadcrumbs"
-                                    class="py-4"
-                                />
-                            </div>
-                            <div>
-                                <div
-                                    v-if="$slots.headerEnd"
-                                    class="py-3"
-                                >
-                                    <slot name="headerEnd" />
-                                </div>
-                            </div>
-                        </div>
+                        <LinksBreadcrumb
+                            :model="breadcrumbs"
+                            class="py-4"
+                        />
                     </Container>
                 </nav>
 
diff --git a/resources/js/Pages/Admin/Dashboard.vue b/resources/js/Pages/Admin/Dashboard.vue
index 52ceddfd..7291a728 100644
--- a/resources/js/Pages/Admin/Dashboard.vue
+++ b/resources/js/Pages/Admin/Dashboard.vue
@@ -1,17 +1,21 @@
+<script setup>
+import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
+
+defineOptions({ layout: AuthenticatedAdminLayout });
+</script>
+
 <template>
     <InertiaHead title="Dashboard" />
-    <AuthenticatedAdminLayout>
-        <Container
-            vertical
-            fluid
-        >
-            <div>
-                <Card>
-                    <template #content>
-                        <p class="m-0">You are logged in as an Admin!</p>
-                    </template>
-                </Card>
-            </div>
-        </Container>
-    </AuthenticatedAdminLayout>
+    <Container
+        vertical
+        fluid
+    >
+        <div>
+            <Card>
+                <template #content>
+                    <p class="m-0">You are logged in as an Admin!</p>
+                </template>
+            </Card>
+        </div>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Admin/Profile/Edit.vue b/resources/js/Pages/Admin/Profile/Edit.vue
index d6cde151..21735e2e 100644
--- a/resources/js/Pages/Admin/Profile/Edit.vue
+++ b/resources/js/Pages/Admin/Profile/Edit.vue
@@ -1,3 +1,18 @@
+<script>
+import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
+
+const pageTitle = 'Profile';
+const breadcrumbs = [
+    { label: 'Dashboard', route: route('admin.dashboard') },
+    { label: pageTitle, route: route('admin.profile.edit') },
+    { label: 'Edit' },
+];
+
+export default {
+    layout: (h, page) => h(AuthenticatedAdminLayout, { breadcrumbs }, () => page)
+}
+</script>
+
 <script setup>
 import DeleteUserForm from './Partials/DeleteUserForm.vue';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
@@ -12,88 +27,66 @@ defineProps({
         type: String,
     },
 });
-
-const pageTitle = 'Profile';
-const breadcrumbs = [
-    { label: 'Dashboard', route: route('admin.dashboard') },
-    { label: pageTitle, route: route('admin.profile.edit') },
-    { label: 'Edit' },
-];
 </script>
 
 <template>
     <InertiaHead :title="pageTitle" />
 
-    <AuthenticatedAdminLayout :breadcrumbs="breadcrumbs">
-        <Container
-            vertical
-            fluid
+    <Container
+        vertical
+        fluid
+    >
+        <PageTitleSection>
+            <template #title>
+                {{ pageTitle }}
+            </template>
+        </PageTitleSection>
+
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
         >
-            <PageTitleSection>
-                <template #title>
-                    {{ pageTitle }}
-                </template>
-            </PageTitleSection>
-            <div class="space-y-4 md:space-y-8">
-                <Card :pt="{
-                    body: {
-                        class: 'max-w-2xl space-y-3',
-                    },
-                    caption: {
-                        class: 'space-y-1',
-                    },
-                }">
-                    <template #title>Profile Information</template>
-                    <template #subtitle>
-                        Update your account's profile information and email
-                        address.
-                    </template>
-                    <template #content>
-                        <UpdateProfileInformationForm
-                            :must-verify-email="mustVerifyEmail"
-                            :status="status"
-                        />
-                    </template>
-                </Card>
+            <template #title>Profile Information</template>
+            <template #subtitle>
+                Update your account's profile information and email
+                address.
+            </template>
+            <template #content>
+                <UpdateProfileInformationForm
+                    :must-verify-email="mustVerifyEmail"
+                    :status="status"
+                />
+            </template>
+        </Card>
 
-                <Card :pt="{
-                    body: {
-                        class: 'max-w-2xl space-y-3',
-                    },
-                    caption: {
-                        class: 'space-y-1',
-                    },
-                }">
-                    <template #title>Update Password</template>
-                    <template #subtitle>
-                        Ensure your account is using a long, random password to
-                        stay secure.
-                    </template>
-                    <template #content>
-                        <UpdatePasswordForm />
-                    </template>
-                </Card>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Update Password</template>
+            <template #subtitle>
+                Ensure your account is using a long, random password to
+                stay secure.
+            </template>
+            <template #content>
+                <UpdatePasswordForm />
+            </template>
+        </Card>
 
-                <Card :pt="{
-                    body: {
-                        class: 'max-w-2xl space-y-3',
-                    },
-                    caption: {
-                        class: 'space-y-1',
-                    },
-                }">
-                    <template #title>Delete Account</template>
-                    <template #subtitle>
-                        Once your account is deleted, all of its resources and
-                        data will be permanently deleted. Before deleting your
-                        account, please download any data or information that
-                        you wish to retain.
-                    </template>
-                    <template #content>
-                        <DeleteUserForm />
-                    </template>
-                </Card>
-            </div>
-        </Container>
-    </AuthenticatedAdminLayout>
+        <Card
+            pt:body:class="max-w-2xl space-y-3"
+            pt:caption:class="space-y-1"
+        >
+            <template #title>Delete Account</template>
+            <template #subtitle>
+                Once your account is deleted, all of its resources and
+                data will be permanently deleted. Before deleting your
+                account, please download any data or information that
+                you wish to retain.
+            </template>
+            <template #content>
+                <DeleteUserForm />
+            </template>
+        </Card>
+    </Container>
 </template>
diff --git a/resources/js/Pages/Admin/Users/Index.vue b/resources/js/Pages/Admin/Users/Index.vue
index 6edf0b06..3d7eb671 100644
--- a/resources/js/Pages/Admin/Users/Index.vue
+++ b/resources/js/Pages/Admin/Users/Index.vue
@@ -1,3 +1,18 @@
+<script>
+import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
+
+const pageTitle = 'Users';
+const breadcrumbs = [
+    { label: 'Dashboard', route: route('admin.dashboard') },
+    { label: pageTitle, route: route('admin.users.index') },
+    { label: 'List' },
+];
+
+export default {
+    layout: (h, page) => h(AuthenticatedAdminLayout, { breadcrumbs }, () => page)
+}
+</script>
+
 <script setup>
 import { ref, useTemplateRef } from 'vue';
 import { useLazyDataTable } from '@/Composables/useLazyDataTable';
@@ -8,13 +23,6 @@ const props = defineProps({
     users: Object,
 });
 
-const pageTitle = 'Users';
-const breadcrumbs = [
-    { label: 'Dashboard', route: route('admin.dashboard') },
-    { label: pageTitle, route: route('admin.users.index') },
-    { label: 'List' },
-];
-
 // User context menu
 const userContextMenu = useTemplateRef('user-context-menu');
 const userContextMenuItems = ref([]);
@@ -54,125 +62,122 @@ const {
 <template>
     <InertiaHead :title="pageTitle" />
 
-    <AuthenticatedAdminLayout :breadcrumbs="breadcrumbs">
-        <Container
-            vertical
-            fluid
-        >
-            <PageTitleSection>
-                <template #title>
-                    {{ pageTitle }}
-                </template>
-                <template #end>
-                    <Button
-                        v-if="filteredOrSorted"
-                        severity="secondary"
-                        type="button"
-                        icon="pi pi-filter-slash"
-                        label="Clear Filters"
-                        outlined
-                        @click="hardReset"
-                    />
-                </template>
-            </PageTitleSection>
-            <div>
-                <Card pt:body:class="p-3">
-                    <template #content>
-                        <Menu
-                            ref="user-context-menu"
-                            class="shadow-sm"
-                            :model="userContextMenuItems"
-                            popup
-                        />
-                        <DataTable
-                            ref="dataTable"
-                            v-model:filters="filters"
-                            lazy
-                            paginator
-                            removableSort
-                            resizableColumns
-                            columnResizeMode="fit"
-                            :loading="processing"
-                            :value="users.data"
-                            :totalRecords="users.total"
-                            filterDisplay="row"
-                            :sortField="sorting.field"
-                            :sortOrder="sorting.order"
-                            :rows="users.per_page"
-                            :rowsPerPageOptions="[10, 20, 50, 100]"
-                            :first="firstDatasetIndex"
-                            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                            currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
-                            @filter="filter"
-                            @sort="sort"
-                            @page="paginate"
-                        >
-                            <template #empty>
-                                <div class="flex justify-center">
-                                    <Message
-                                        severity="warn"
-                                        icon="pi pi-exclamation-circle"
-                                        class="grow text-center flex justify-center"
-                                    >
-                                        No Users found.
-                                    </Message>
-                                </div>
-                            </template>
-                            <Column
-                                field="name"
-                                header="Name"
-                                sortable
-                                :showFilterMenu="false"
-                            >
-                                <template #filter="{ filterModel, filterCallback }">
-                                    <InputText
-                                        v-model="filterModel.value"
-                                        type="text"
-                                        placeholder="Search by name"
-                                        fluid
-                                        @input="debounceInputFilter(filterCallback)"
-                                    />
-                                </template>
-                                <template #body="slotProps">
-                                    {{ slotProps.data.name }}
-                                </template>
-                            </Column>
-                            <Column
-                                field="email"
-                                header="Email"
-                                sortable
-                                :showFilterMenu="false"
+    <Container
+        vertical
+        fluid
+    >
+        <PageTitleSection>
+            <template #title>
+                {{ pageTitle }}
+            </template>
+            <template #end>
+                <Button
+                    v-if="filteredOrSorted"
+                    severity="secondary"
+                    type="button"
+                    icon="pi pi-filter-slash"
+                    label="Clear Filters"
+                    outlined
+                    @click="hardReset"
+                />
+            </template>
+        </PageTitleSection>
+
+        <Card pt:body:class="p-3">
+            <template #content>
+                <Menu
+                    ref="user-context-menu"
+                    class="shadow-sm"
+                    :model="userContextMenuItems"
+                    popup
+                />
+                <DataTable
+                    ref="dataTable"
+                    v-model:filters="filters"
+                    lazy
+                    paginator
+                    removableSort
+                    resizableColumns
+                    columnResizeMode="fit"
+                    :loading="processing"
+                    :value="users.data"
+                    :totalRecords="users.total"
+                    filterDisplay="row"
+                    :sortField="sorting.field"
+                    :sortOrder="sorting.order"
+                    :rows="users.per_page"
+                    :rowsPerPageOptions="[10, 20, 50, 100]"
+                    :first="firstDatasetIndex"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
+                    @filter="filter"
+                    @sort="sort"
+                    @page="paginate"
+                >
+                    <template #empty>
+                        <div class="flex justify-center">
+                            <Message
+                                severity="warn"
+                                icon="pi pi-exclamation-circle"
+                                class="grow text-center flex justify-center"
                             >
-                                <template #filter="{ filterModel, filterCallback }">
-                                    <InputText
-                                        v-model="filterModel.value"
-                                        type="text"
-                                        placeholder="Search by Email"
-                                        fluid
-                                        @input="debounceInputFilter(filterCallback)"
-                                    />
-                                </template>
-                                <template #body="slotProps">
-                                    {{ slotProps.data.email }}
-                                </template>
-                            </Column>
-                            <Column header="Action">
-                                <template #body="{ data }">
-                                    <Button
-                                        v-tooltip.top="'Show User Actions'"
-                                        type="button"
-                                        severity="secondary"
-                                        icon="pi pi-ellipsis-v"
-                                        rounded
-                                        text
-                                        @click="toggleUserContextMenu($event, data)"
-                                    />
-                                </template>
-                            </Column>
-                        </DataTable>
+                                No Users found.
+                            </Message>
+                        </div>
                     </template>
-                </Card>
-            </div>
-        </Container>
-    </AuthenticatedAdminLayout>
+                    <Column
+                        field="name"
+                        header="Name"
+                        sortable
+                        :showFilterMenu="false"
+                    >
+                        <template #filter="{ filterModel, filterCallback }">
+                            <InputText
+                                v-model="filterModel.value"
+                                type="text"
+                                placeholder="Search by name"
+                                fluid
+                                @input="debounceInputFilter(filterCallback)"
+                            />
+                        </template>
+                        <template #body="slotProps">
+                            {{ slotProps.data.name }}
+                        </template>
+                    </Column>
+                    <Column
+                        field="email"
+                        header="Email"
+                        sortable
+                        :showFilterMenu="false"
+                    >
+                        <template #filter="{ filterModel, filterCallback }">
+                            <InputText
+                                v-model="filterModel.value"
+                                type="text"
+                                placeholder="Search by Email"
+                                fluid
+                                @input="debounceInputFilter(filterCallback)"
+                            />
+                        </template>
+                        <template #body="slotProps">
+                            {{ slotProps.data.email }}
+                        </template>
+                    </Column>
+                    <Column header="Action">
+                        <template #body="{ data }">
+                            <Button
+                                v-tooltip.top="'Show User Actions'"
+                                type="button"
+                                severity="secondary"
+                                icon="pi pi-ellipsis-v"
+                                rounded
+                                text
+                                @click="toggleUserContextMenu($event, data)"
+                            />
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+    </Container>
 </template>
diff --git a/resources/js/app.js b/resources/js/app.js
index 4b8a1b76..b11e7002 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -11,8 +11,6 @@ import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
 
-import AuthenticatedAdminLayout from '@/Layouts/Admin/AuthenticatedLayout.vue';
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
 import Container from '@/Components/Container.vue';
 import PageTitleSection from '@/Components/PageTitleSection.vue';
 
@@ -50,8 +48,6 @@ createInertiaApp({
             .component('InertiaHead', Head)
             .component('InertiaLink', Link)
             .directive('tooltip', Tooltip)
-            .component('AuthenticatedAdminLayout', AuthenticatedAdminLayout)
-            .component('AuthenticatedLayout', AuthenticatedLayout)
             .component('Container', Container)
             .component('PageTitleSection', PageTitleSection)
             .mount(el);