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/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, 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);

const mainNavGroups: NavGroup[] = [
    {
        title: 'CRM',
        items: [
            {
                title: 'Pipeline',
                href: pipeline(),
                icon: Kanban,
            },
            {
                title: 'Akquise',
                href: leads(),
                icon: Headset,
            },
            {
                title: 'Kunden',
                href: customers(),
                icon: ContactRound,
            },
            {
                title: 'Erfolge',
                href: achievements(),
                icon: Trophy,
            },
        ],
    },
    {
        title: 'Rechnungswesen',
        items: [
            {
                title: 'Angebote',
                href: offers(),
                icon: Calculator,
            },
            {
                title: 'Rechnungen',
                href: invoices(),
                icon: Euro,
                action: {
                    title: "Neue Rechnung",
                    icon: Plus,
                    href: newInvoice()
                }
            },
            {
                title: 'Produkte',
                href: products(),
                icon: Package,
            },
            {
                title: 'Zeiterfassung',
                href: timesheets(),
                icon: Timer,
            },
        ],
    }
];

</script>

<template>
    <Sidebar collapsible="icon">

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

            <TooltipProvider>
                <Tooltip>
                    <TooltipTrigger class="w-fit absolute top-9" :class="open ? 'right-[.666rem]' : 'right-[1.14333rem]'">
                        <SidebarTrigger class="hidden md:flex" />
                    </TooltipTrigger>
                    <TooltipContent>
                        <span>Seitenleiste </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 class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
            <NavMain :groups="mainNavGroups" />
        </SidebarContent>

        <SidebarFooter>
            <NavFooter :user="auth.user" />
        </SidebarFooter>
    </Sidebar>
    <slot />
</template>