Merge pull request #322 from connorabbas/develop

connorabbas · web-flow · commit ef1692c5b662 · 2025-05-31T16:23:42.000-05:00
Breadcrumbs, fixes, nav title link
diff --git a/resources/js/components/NavLogoLink.vue b/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>
diff --git a/resources/js/components/primevue/menu/PanelMenu.vue b/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',
                 ]"
             >
diff --git a/resources/js/composables/useAppLayout.ts b/resources/js/composables/useAppLayout.ts
@@ -28,22 +28,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,
                 },
             ],
diff --git a/resources/js/layouts/AppLayout.vue b/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>
diff --git a/resources/js/layouts/app/HeaderLayout.vue b/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';
@@ -91,11 +91,7 @@ const toggleMobileUserMenu = (event) => {
                     >
                         <template #start>
                             <div class="shrink-0 flex 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>
+                                <NavLogoLink />
                             </div>
                         </template>
                         <template #end>
diff --git a/resources/js/layouts/app/SidebarLayout.vue b/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
@@ -82,13 +82,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 justify-between items-center gap-4 py-4">
                         <div>
-                            <InertiaLink :href="route('welcome')">
-                                <ApplicationLogo
-                                    class="block h-8 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                />
-                            </InertiaLink>
+                            <NavLogoLink />
                         </div>
                         <div>
                             <Button
@@ -114,11 +110,7 @@ const toggleMobileUserMenu = (event) => {
                 <div class="w-full h-full flex flex-col justify-between p-4">
                     <div class="space-y-6">
                         <div class="p-2">
-                            <InertiaLink :href="route('welcome')">
-                                <ApplicationLogo
-                                    class="block h-10 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                />
-                            </InertiaLink>
+                            <NavLogoLink />
                         </div>
                         <div>
                             <PanelMenu
diff --git a/resources/js/pages/Dashboard.vue b/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>
diff --git a/resources/js/pages/settings/Appearance.vue b/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>
diff --git a/resources/js/pages/settings/Password.vue b/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>
diff --git a/resources/js/pages/settings/Profile.vue b/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>
