Caramel-CRM-Backup/resources/js/components/AppSidebar.vue

<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, timesheets, customers, leads, achievements } from '@/routes';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Kbd, KbdGroup } 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, Plus } from 'lucide-vue-next';
import AppLogo from './AppLogo.vue';

const mainNavGroups: NavGroup[] = [
    {
        title: 'CRM',
        items: [
            {
                title: 'Pipeline',
                href: crm(),
                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',
            },
            {
                title: 'Erfolge',
                href: achievements(),
                icon: Trophy,
                color: 'text-amber-500',
            },
        ],
    },
    {
        title: 'Finanzvorgänge',
        items: [
            {
                title: 'Angebote',
                href: offers(),
                icon: Calculator,
                color: 'text-cyan-600',
            },
            {
                title: 'Rechnungen',
                href: invoices(),
                icon: Euro,
                color: 'text-pink-700',
                action: {
                    title: "Neue Rechnung",
                    icon: Plus,
                    color: 'text-foreground',
                    href: newInvoice()
                }
            },
            {
                title: 'Zeiterfassung',
                href: timesheets(),
                icon: Timer,
                color: 'text-lime-600',
            },
        ],
    }
];

const footerNavItems: NavItem[] = [
    {
        title: 'Einstellungen',
        href: edit(),
        icon: Settings,
        color: 'text-gray-500',
    }
];
</script>

<template>
    <Sidebar collapsible="icon" variant="sidebar">

        <SidebarHeader>
            <Link :href="dashboard()" class="flex row items-center mt-3">
            <AppLogo />
            </Link>

            <TooltipProvider>
                <Tooltip>
                    <TooltipTrigger class="w-fit absolute top-9 right-[.666rem]">
                        <SidebarTrigger class="hidden md:flex text-primary-foreground" />
                    </TooltipTrigger>
                    <TooltipContent>
                        <span>Seitenleiste schließen</span>
                        <KbdGroup class="ml-2">
                            <Kbd class="visible-mac">⌘</Kbd>
                            <Kbd class="visible-pc">Ctrl</Kbd>
                            <Kbd>B</Kbd>
                        </KbdGroup>
                    </TooltipContent>
                </Tooltip>
            </TooltipProvider>
        </SidebarHeader>

        <SidebarContent>
            <NavMain :groups="mainNavGroups" />
        </SidebarContent>

        <SidebarFooter>
            <NavFooter :items="footerNavItems" />
        </SidebarFooter>
    </Sidebar>
    <slot />
</template>