Changes from Inertia project

src/components/NavLogoLink.vue

@@ -0,0 +1,20 @@
+<script setup>
+import ApplicationLogo from '@/components/ApplicationLogo.vue';
+</script>
+
+<template>
+    <Button
+        v-slot="slotProps"
+        asChild
+        variant="link"
+    >
+        <RouterLink
+            :to="{ name: 'welcome' }"
+            :class="slotProps.class"
+            class="flex items-center justify-start gap-4 no-underline! p-0"
+        >
+            <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>
+        </RouterLink>
+    </Button>
+</template>

src/components/primevue/menu/PanelMenu.vue

@@ -37,7 +37,7 @@ defineExpose({ el: childRef });
                 <a
                     :href="href"
                     :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 }
                     ]"
                     @click="navigate"
@@ -64,7 +64,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',
                 ]"
             >

src/composables/useAppLayout.js

@@ -1,6 +1,6 @@
 import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
-import { LayoutGrid, House, Info, Github, Code, Settings, LogOut, BookOpen } from 'lucide-vue-next';
+import { LayoutGrid, House, Info, Settings, LogOut, ExternalLink, FileSearch, FolderGit2 } from 'lucide-vue-next';
 import { useAuthStore } from '@/stores/auth';
 
 export function useAppLayout() {
@@ -25,23 +25,32 @@ 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/',
-                    lucideIcon: Code,
+                    target: '_blank',
+                    lucideIcon: ExternalLink,
                 },
                 {
                     label: 'Starter Kit Docs',
                     url: 'https://connorabbas.github.io/laravel-primevue-starter-kit-docs/',
-                    lucideIcon: BookOpen,
+                    target: '_blank',
+                    lucideIcon: FileSearch,
                 },
                 {
                     label: 'Starter Kit Repo',
                     url: 'https://github.com/connorabbas/laravel-primevue-starter-kit',
-                    lucideIcon: Github,
+                    target: '_blank',
+                    lucideIcon: FolderGit2,
                 },
             ],
         },

src/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>

src/layouts/app/HeaderLayout.vue

@@ -2,7 +2,7 @@
 import { useTemplateRef } from 'vue';
 import { useAppLayout } from '@/composables/useAppLayout';
 import { ChevronsUpDown, ChevronDown, Menu as MenuIcon } from 'lucide-vue-next';
-import ApplicationLogo from '@/components/ApplicationLogo.vue';
+import NavLogoLink from '@/components/NavLogoLink.vue';
 import Menu from '@/components/primevue/menu/Menu.vue';
 import MenuBar from '@/components/primevue/menu/MenuBar.vue';
 import PanelMenu from '@/components/primevue/menu/PanelMenu.vue';
@@ -85,11 +85,7 @@ const toggleMobileUserMenu = (event) => {
                     >
                         <template #start>
                             <div class="shrink-0 flex items-center mr-5">
-                                <RouterLink to="/">
-                                    <ApplicationLogo
-                                        class="block h-8 lg:h-10 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                    />
-                                </RouterLink>
+                                <NavLogoLink />
                             </div>
                         </template>
                         <template #end>

src/layouts/app/SidebarLayout.vue

@@ -2,7 +2,7 @@
 import { useTemplateRef } from 'vue';
 import { ChevronsUpDown, Menu as MenuIcon } from 'lucide-vue-next';
 import { useAppLayout } from '@/composables/useAppLayout';
-import ApplicationLogo from '@/components/ApplicationLogo.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';
@@ -39,7 +39,7 @@ const toggleMobileUserMenu = (event) => {
             <!-- Mobile drawer menu -->
             <Drawer
                 v-model:visible="mobileMenuOpen"
-                position="left"
+                position="right"
             >
                 <div>
                     <PanelMenu
@@ -78,11 +78,7 @@ const toggleMobileUserMenu = (event) => {
                 <Container class="grow">
                     <div class="flex justify-between items-center py-4">
                         <div>
-                            <RouterLink to="/">
-                                <ApplicationLogo
-                                    class="block h-8 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                />
-                            </RouterLink>
+                            <NavLogoLink />
                         </div>
                         <div>
                             <Button
@@ -108,11 +104,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">
-                            <RouterLink to="/">
-                                <ApplicationLogo
-                                    class="block h-10 w-auto fill-current text-surface-900 dark:text-surface-0"
-                                />
-                            </RouterLink>
+                            <NavLogoLink />
                         </div>
                         <div>
                             <PanelMenu

src/views/Dashboard.vue

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

src/views/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: { name: 'dashboard' } },
+    { label: 'Appearance Settings' },
+];
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout :breadcrumbs>
         <SettingsLayout>
             <Card
                 pt:body:class="max-w-2xl space-y-3"

src/views/settings/Password.vue

@@ -8,6 +8,11 @@ import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/UserSettingsLayout.vue';
 import InputErrors from '@/components/InputErrors.vue';
 
+const breadcrumbs = [
+    { label: 'Dashboard', route: { name: 'dashboard' } },
+    { label: 'Password Settings' },
+];
+
 const toast = useToast();
 const authStore = useAuthStore();
 
@@ -61,7 +66,7 @@ const submit = () => {
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout :breadcrumbs>
         <SettingsLayout>
             <Card
                 pt:body:class="max-w-2xl space-y-3"

src/views/settings/Profile.vue

@@ -9,6 +9,11 @@ import SettingsLayout from '@/layouts/UserSettingsLayout.vue';
 import DeleteUserModal from '@/components/DeleteUserModal.vue';
 import InputErrors from '@/components/InputErrors.vue';
 
+const breadcrumbs = [
+    { label: 'Dashboard', route: { name: 'dashboard' } },
+    { label: 'Profile Settings' },
+];
+
 const toast = useToast();
 const authStore = useAuthStore();
 const { flashMessages } = useFlashMessage();
@@ -45,7 +50,7 @@ const resendVerifyEmail = () => {
 </script>
 
 <template>
-    <AppLayout>
+    <AppLayout :breadcrumbs>
         <SettingsLayout>
             <div class="space-y-4 md:space-y-8">
                 <Card