improvements

Author: connorabbas

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',

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

@@ -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">

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>

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: {

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>

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: {