Two month of work

resources/js/components/AppSidebar.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
-import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger } from '@/components/ui/sidebar';
-import { dashboard, crm, offers, invoices, newInvoice, products, timesheets, customers, leads, achievements } from '@/routes';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarTrigger } from '@/components/ui/crm-sidebar';
+import { useSidebar } from '@/components/ui/crm-sidebar/utils'
+import { dashboard, pipeline, offers, invoices, newInvoice, products, timesheets, customers, leads, achievements } from '@/routes';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { type NavGroup } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
-import { Kanban, Euro, Trophy, Calculator, BookUser, Timer, ShoppingBasket, Headset, Plus } from 'lucide-vue-next';
+import { Kanban, Euro, Trophy, Calculator, Timer, ContactRound, Headset, Plus, Package } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
 import { computed } from 'vue';
 
+const { open } = useSidebar()
+
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
@@ -20,27 +23,23 @@ const mainNavGroups: NavGroup[] = [
         items: [
             {
                 title: 'Pipeline',
-                href: crm(),
+                href: pipeline(),
                 icon: Kanban,
-                color: 'text-pink-500',
             },
             {
                 title: 'Akquise',
                 href: leads(),
                 icon: Headset,
-                color: 'text-blue-500',
             },
             {
                 title: 'Kunden',
                 href: customers(),
-                icon: BookUser,
-                color: 'text-lime-500',
+                icon: ContactRound,
             },
             {
                 title: 'Erfolge',
                 href: achievements(),
                 icon: Trophy,
-                color: 'text-amber-500',
             },
         ],
     },
@@ -51,31 +50,26 @@ const mainNavGroups: NavGroup[] = [
                 title: 'Angebote',
                 href: offers(),
                 icon: Calculator,
-                color: 'text-cyan-600',
-            },
-            {
-                title: 'Produkte',
-                href: products(),
-                icon: ShoppingBasket,
-                color: 'text-yellow-400',
             },
             {
                 title: 'Rechnungen',
                 href: invoices(),
                 icon: Euro,
-                color: 'text-pink-700',
                 action: {
                     title: "Neue Rechnung",
                     icon: Plus,
-                    color: 'text-foreground',
                     href: newInvoice()
                 }
             },
+            {
+                title: 'Produkte',
+                href: products(),
+                icon: Package,
+            },
             {
                 title: 'Zeiterfassung',
                 href: timesheets(),
                 icon: Timer,
-                color: 'text-lime-600',
             },
         ],
     }
@@ -84,7 +78,7 @@ const mainNavGroups: NavGroup[] = [
 </script>
 
 <template>
-    <Sidebar collapsible="icon" variant="sidebar">
+    <Sidebar collapsible="icon">
 
         <SidebarHeader>
             <Link :href="dashboard()" prefetch class="flex row items-center mt-3">
@@ -93,11 +87,11 @@ const mainNavGroups: NavGroup[] = [
 
             <TooltipProvider>
                 <Tooltip>
-                    <TooltipTrigger class="w-fit absolute top-9 right-[.666rem]">
-                        <SidebarTrigger class="hidden md:flex text-primary-foreground" />
+                    <TooltipTrigger class="w-fit absolute top-9" :class="open ? 'right-[.666rem]' : 'right-[1.14333rem]'">
+                        <SidebarTrigger class="hidden md:flex" />
                     </TooltipTrigger>
                     <TooltipContent>
-                        <span>Seitenleiste schließen</span>
+                        <span>Seitenleiste </span>
                         <KbdGroup class="ml-2">
                             <Kbd class="visible-mac">⌘</Kbd>
                             <Kbd class="visible-pc">Ctrl</Kbd>