Add button to create a newinvoice directly from within the sidebar

resources/js/components/AppSidebar.vue

@@ -8,7 +8,7 @@ import { Kbd } from '@/components/ui/kbd'
 import { edit } from '@/routes/profile';
 import { type NavItem, type NavGroup } from '@/types';
 import { Link } from '@inertiajs/vue3';
-import { Kanban, Euro, Contact, Trophy, Calculator, Settings, Target, BookUser, Timer, Headset, IdCard } from 'lucide-vue-next';
+import { Kanban, Euro, Contact, Trophy, Calculator, Settings, Target, BookUser, Timer, Headset, IdCard, Plus } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
 
 const mainNavGroups: NavGroup[] = [
@@ -55,6 +55,12 @@ const mainNavGroups: NavGroup[] = [
                 href: invoices(),
                 icon: Euro,
                 color: 'text-pink-700',
+                action: {
+                    title: "Neue Rechnung",
+                    icon: Plus,
+                    color: 'text-foreground',
+                    href: invoices()
+                }
             },
             {
                 title: 'Zeiterfassung',

resources/js/components/NavMain.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuAction } from '@/components/ui/sidebar';
 import { urlIsActive } from '@/lib/utils';
 import { type NavGroup } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { LayoutGrid } from 'lucide-vue-next';
+import { LayoutGrid, Plus } from 'lucide-vue-next';
 import { dashboard } from '@/routes';
 import SidebarSeparator from './ui/sidebar/SidebarSeparator.vue';
 
@@ -29,7 +29,9 @@ const page = usePage();
     </SidebarGroup>
 
     <SidebarGroup class="px-2 py-0" v-for="group in groups">
-        <SidebarSeparator class="absolute mt-6 shrink transition-[opacity] opacity-0 group-data-[collapsible=icon]:opacity-100" style="width: calc(var(--spacing) * 4);"  />
+        <SidebarSeparator
+            class="absolute mt-6 shrink transition-[opacity] opacity-0 group-data-[collapsible=icon]:opacity-100"
+            style="width: calc(var(--spacing) * 4);" />
         <SidebarGroupLabel class="text-bold uppercase text-gray-400 mt-2 group-data-[collapsible=icon]:mt-2">
             {{ group.title }}
         </SidebarGroupLabel>
@@ -41,6 +43,12 @@ const page = usePage();
                     <span>{{ item.title }}</span>
                     </Link>
                 </SidebarMenuButton>
+                <SidebarMenuAction v-if="item.action">
+                    <Link :href="item.action.href">
+                    <component :is="item.action.icon" :class="item.action.color" stroke-width="1.5" size="0.833rem" />
+                    <span class="sr-only">{{ item.action.title }}</span>
+                    </Link>
+                </SidebarMenuAction>
             </SidebarMenuItem>
         </SidebarMenu>
     </SidebarGroup>

resources/js/types/index.d.ts

@@ -24,7 +24,15 @@ export interface NavItem {
     icon?: LucideIcon;
     color?: string;
     isActive?: boolean;
+    action?: NavAction
 }
+export interface NavAction {
+    title: string;
+    href: NonNullable<InertiaLinkProps['href']>;
+    icon?: LucideIcon;
+    color?: string;
+}
+
 
 export type AppPageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
     name: string;