Add button to create a newinvoice directly from within the sidebar

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>