Pull master, Admin badge in user menu button

resources/js/components/NavLogoLink.vue

@@ -0,0 +1,15 @@
+<script setup>
+import ApplicationLogo from '@/components/ApplicationLogo.vue';
+</script>
+
+<template>
+    <Button
+        :href="route('welcome')"
+        pt:root:class="flex items-center justify-start gap-4 no-underline p-0"
+        variant="link"
+        as="InertiaLink"
+    >
+        <ApplicationLogo class="block h-8 lg:h-10 w-auto fill-current text-surface-900 dark:text-surface-0" />
+        <span class="font-bold">Laravel + PrimeVue Starter Kit</span>
+    </Button>
+</template>

resources/js/components/primevue/menu/PanelMenu.vue

@@ -32,7 +32,7 @@ defineExpose({ el: childRef });
                 v-if="item.route"
                 :href="item.route"
                 :class="[
-                    'p-panelmenu-item-link flex items-center cursor-pointer no-underline px-4 py-2',
+                    'p-panelmenu-item-link flex items-center cursor-pointer no-underline p-2',
                     { 'font-bold! text-muted-color': item.active },
                 ]"
                 custom
@@ -53,7 +53,7 @@ defineExpose({ el: childRef });
                 :href="item.url"
                 :target="item.target"
                 :class="[
-                    'flex items-center cursor-pointer no-underline px-4 py-2',
+                    'flex items-center cursor-pointer no-underline p-2',
                     hasSubmenu ? 'p-panelmenu-header-link' : 'p-panelmenu-item-link',
                 ]"
             >

resources/js/composables/useAppLayout.ts

@@ -31,22 +31,31 @@ export function useAppLayout() {
                 active: currentRoute.value == 'dashboard',
             },
             {
-                label: 'Info',
+                label: 'Resources',
                 lucideIcon: Info,
                 items: [
+                    {
+                        label: 'Laravel Docs',
+                        url: 'https://laravel.com/docs/master',
+                        target: '_blank',
+                        lucideIcon: ExternalLink,
+                    },
                     {
                         label: 'PrimeVue Docs',
                         url: 'https://primevue.org/',
+                        target: '_blank',
                         lucideIcon: ExternalLink,
                     },
                     {
                         label: 'Starter Kit Docs',
                         url: 'https://connorabbas.github.io/laravel-primevue-starter-kit-docs/',
+                        target: '_blank',
                         lucideIcon: FileSearch,
                     },
                     {
                         label: 'Starter Kit Repo',
                         url: 'https://github.com/connorabbas/laravel-primevue-starter-kit',
+                        target: '_blank',
                         lucideIcon: FolderGit2,
                     },
                 ],

resources/js/layouts/AppLayout.vue

@@ -1,7 +1,7 @@
 <script setup>
 import AppLayout from '@/layouts/app/HeaderLayout.vue';
 
-defineProps({
+const props = defineProps({
     breadcrumbs: {
         type: Array,
         default: () => [],
@@ -10,7 +10,7 @@ defineProps({
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="props.breadcrumbs">
         <slot />
     </AppLayout>
 </template>

resources/js/layouts/app/HeaderLayout.vue

@@ -3,8 +3,8 @@ import { useTemplateRef } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import { useAppLayout } from '@/composables/useAppLayout';
 import { ChevronsUpDown, ChevronDown, Menu as MenuIcon } from 'lucide-vue-next';
-import ApplicationLogo from '@/components/ApplicationLogo.vue';
 import ClientOnly from '@/components/ClientOnly.vue';
+import NavLogoLink from '@/components/NavLogoLink.vue';
 import FlashMessages from '@/components/FlashMessages.vue';
 import Menu from '@/components/primevue/menu/Menu.vue';
 import Menubar from '@/components/primevue/menu/Menubar.vue';
@@ -57,15 +57,21 @@ const toggleMobileUserMenu = (event) => {
                         <div class="flex flex-col">
                             <Button
                                 id="mobile-user-menu-btn"
-                                :label="page.props.auth.user.name"
                                 severity="secondary"
                                 size="large"
-                                pt:root:class="flex flex-row-reverse justify-between"
+                                pt:root:class="flex justify-between"
                                 @click="toggleMobileUserMenu($event)"
                             >
-                                <template #icon>
+                                <div class="flex items-center gap-3">
+                                    <Tag
+                                        v-if="page.props.auth.isAdmin"
+                                        value="ADMIN"
+                                    />
+                                    {{ page.props.auth.user.name }}
+                                </div>
+                                <div>
                                     <ChevronsUpDown />
-                                </template>
+                                </div>
                             </Button>
                             <Menu
                                 ref="mobile-user-menu"
@@ -90,16 +96,8 @@ const toggleMobileUserMenu = (event) => {
                         pt:button:class="hidden"
                     >
                         <template #start>
-                            <div class="shrink-0 flex gap-4 items-center mr-5">
-                                <InertiaLink :href="route('welcome')">
-                                    <ApplicationLogo
-                                        class="block h-8 lg:h-10 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                    />
-                                </InertiaLink>
-                                <Tag
-                                    v-if="page.props.auth.isAdmin"
-                                    value="ADMIN"
-                                />
+                            <div class="shrink-0 flex items-center mr-5">
+                                <NavLogoLink />
                             </div>
                         </template>
                         <template #end>
@@ -108,15 +106,21 @@ const toggleMobileUserMenu = (event) => {
                                 <div class="flex flex-col">
                                     <Button
                                         id="user-menu-btn"
-                                        :label="page.props.auth.user.name"
-                                        pt:root:class="flex flex-row-reverse justify-between"
                                         severity="secondary"
+                                        pt:root:class="flex justify-between"
                                         text
                                         @click="toggleUserMenu($event)"
                                     >
-                                        <template #icon>
+                                        <div class="flex items-center gap-3">
+                                            <Tag
+                                                v-if="page.props.auth.isAdmin"
+                                                value="ADMIN"
+                                            />
+                                            {{ page.props.auth.user.name }}
+                                        </div>
+                                        <div>
                                             <ChevronDown />
-                                        </template>
+                                        </div>
                                     </Button>
                                     <div
                                         id="user-menu-append"

resources/js/layouts/app/SidebarLayout.vue

@@ -3,9 +3,9 @@ import { useTemplateRef } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown, Menu as MenuIcon } from 'lucide-vue-next';
 import { useAppLayout } from '@/composables/useAppLayout';
-import ApplicationLogo from '@/components/ApplicationLogo.vue';
 import ClientOnly from '@/components/ClientOnly.vue';
 import FlashMessages from '@/components/FlashMessages.vue';
+import NavLogoLink from '@/components/NavLogoLink.vue';
 import Menu from '@/components/primevue/menu/Menu.vue';
 import PanelMenu from '@/components/primevue/menu/PanelMenu.vue';
 import Breadcrumb from '@/components/primevue/menu/Breadcrumb.vue';
@@ -43,7 +43,7 @@ const toggleMobileUserMenu = (event) => {
                 <!-- Mobile drawer menu -->
                 <Drawer
                     v-model:visible="mobileMenuOpen"
-                    position="left"
+                    position="right"
                 >
                     <div>
                         <PanelMenu
@@ -55,15 +55,21 @@ const toggleMobileUserMenu = (event) => {
                         <div class="flex flex-col">
                             <Button
                                 id="mobile-user-menu-btn"
-                                :label="page.props.auth.user.name"
-                                pt:root:class="flex flex-row-reverse justify-between"
                                 severity="secondary"
                                 size="large"
+                                pt:root:class="flex justify-between"
                                 @click="toggleMobileUserMenu($event)"
                             >
-                                <template #icon>
+                                <div class="flex items-center gap-3">
+                                    <Tag
+                                        v-if="page.props.auth.isAdmin"
+                                        value="ADMIN"
+                                    />
+                                    {{ page.props.auth.user.name }}
+                                </div>
+                                <div>
                                     <ChevronsUpDown />
-                                </template>
+                                </div>
                             </Button>
                             <Menu
                                 ref="mobile-user-menu"
@@ -82,17 +88,9 @@ const toggleMobileUserMenu = (event) => {
         <header class="block lg:fixed top-0 left-0 right-0 z-50">
             <nav class="dynamic-bg shadow-sm flex justify-between items-center lg:hidden">
                 <Container class="grow">
-                    <div class="flex justify-between items-center py-4">
-                        <div class="flex gap-4">
-                            <InertiaLink :href="route('welcome')">
-                                <ApplicationLogo
-                                    class="block h-8 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                />
-                            </InertiaLink>
-                            <Tag
-                                v-if="page.props.auth.isAdmin"
-                                value="ADMIN"
-                            />
+                    <div class="flex justify-between items-center gap-4 py-4">
+                        <div>
+                            <NavLogoLink />
                         </div>
                         <div>
                             <Button
@@ -118,16 +116,8 @@ const toggleMobileUserMenu = (event) => {
             >
                 <div class="w-full h-full flex flex-col justify-between p-4">
                     <div class="space-y-6">
-                        <div class="flex gap-4 items-center">
-                            <InertiaLink :href="route('welcome')">
-                                <ApplicationLogo
-                                    class="block h-10 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                />
-                            </InertiaLink>
-                            <Tag
-                                v-if="page.props.auth.isAdmin"
-                                value="ADMIN"
-                            />
+                        <div class="p-2">
+                            <NavLogoLink />
                         </div>
                         <div>
                             <PanelMenu
@@ -136,18 +126,23 @@ const toggleMobileUserMenu = (event) => {
                             />
                         </div>
                     </div>
-                    <div>
+                    <div class="flex">
                         <Button
                             id="user-menu-btn"
-                            :label="page.props.auth.user.name"
-                            pt:root:class="flex flex-row-reverse justify-between"
                             severity="secondary"
-                            fluid
+                            pt:root:class="flex grow justify-between"
                             @click="toggleUserMenu($event)"
                         >
-                            <template #icon>
+                            <div class="flex items-center gap-3">
+                                <Tag
+                                    v-if="page.props.auth.isAdmin"
+                                    value="ADMIN"
+                                />
+                                {{ page.props.auth.user.name }}
+                            </div>
+                            <div>
                                 <ChevronsUpDown />
-                            </template>
+                            </div>
                         </Button>
                         <Menu
                             ref="user-menu"

resources/js/pages/Dashboard.vue

@@ -1,9 +1,11 @@
 <script setup>
 import AppLayout from '@/layouts/AppLayout.vue';
+
+const breadcrumbs = [{ label: 'Dashboard' }];
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout :breadcrumbs>
         <InertiaHead title="Dashboard" />
 
         <Card>

resources/js/pages/settings/Appearance.vue

@@ -2,10 +2,15 @@
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/UserSettingsLayout.vue';
 import SelectColorModeButton from '@/components/SelectColorModeButton.vue';
+
+const breadcrumbs = [
+    { label: 'Dashboard', route: route('dashboard') },
+    { label: 'Appearance Settings' },
+];
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout :breadcrumbs>
         <InertiaHead title="Appearance Settings" />
 
         <SettingsLayout>

resources/js/pages/settings/Password.vue

@@ -15,6 +15,11 @@ defineProps({
     },
 });
 
+const breadcrumbs = [
+    { label: 'Dashboard', route: route('dashboard') },
+    { label: 'Password Settings' },
+];
+
 const currentPasswordInput = useTemplateRef('current-password-input');
 const newPasswordInput = useTemplateRef('new-password-input');
 
@@ -61,7 +66,7 @@ const updatePassword = () => {
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout :breadcrumbs>
         <InertiaHead title="Password Settings" />
 
         <SettingsLayout>

resources/js/pages/settings/Profile.vue

@@ -15,6 +15,11 @@ defineProps({
     },
 });
 
+const breadcrumbs = [
+    { label: 'Dashboard', route: route('dashboard') },
+    { label: 'Profile Settings' },
+];
+
 const deleteUserModalOpen = ref(false);
 
 const user = usePage().props.auth.user;
@@ -48,7 +53,7 @@ const updateProfileInformation = () => {
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout :breadcrumbs>
         <InertiaHead title="Profile Settings" />
 
         <SettingsLayout>