120 lines
3.8 KiB
Vue
120 lines
3.8 KiB
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, 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 AppLogo from './AppLogo.vue';
|
|
import { computed } from 'vue';
|
|
|
|
const page = usePage();
|
|
const auth = computed(() => page.props.auth);
|
|
|
|
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: 'Rechnungswesen',
|
|
items: [
|
|
{
|
|
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: 'Zeiterfassung',
|
|
href: timesheets(),
|
|
icon: Timer,
|
|
color: 'text-lime-600',
|
|
},
|
|
],
|
|
}
|
|
];
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon" variant="sidebar">
|
|
|
|
<SidebarHeader>
|
|
<Link :href="dashboard()" prefetch 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 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> |