Caramel-CRM/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, timesheets, customers, leads, achievements } from '@/routes';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
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 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',
            },
            {
                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="inset">

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

            <TooltipProvider>
                <Tooltip :delay-duration="666">
                    <TooltipTrigger class="w-fit absolute -right-0">
                        <SidebarTrigger class="hidden md:flex text-primary-foreground" />
                    </TooltipTrigger>
                    <TooltipContent>
                        <p>Seitenleiste schließen
                            <KbdGroup>
                                <Kbd>Ctrl</Kbd>
                                <span>+</span>
                                <Kbd>B</Kbd>
                            </KbdGroup>
                        </p>
                    </TooltipContent>
                </Tooltip>
            </TooltipProvider>
        </SidebarHeader>

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

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