ClockyFly/resources/js/components/AppSidebar.vue

<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import {
    BookOpen,
    Calendar,
    CircleHelp,
    FolderGit2,
    LayoutGrid,
    PieChart,
    Settings,
    Square,
    SquareStack,
    Tag,
    Timer,
    Users,
    Wallet,
    WalletCards,
} from 'lucide-vue-next';
import AppLogo from '@/components/AppLogo.vue';
import NavUser from '@/components/NavUser.vue';
import { useCurrentUrl } from '@/composables/useCurrentUrl';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import type { NavItem } from '@/types';

const { isCurrentUrl } = useCurrentUrl();

const mainNavItems: NavItem[] = [
    {
        title: 'Dashboard',
        href: dashboard(),
        icon: LayoutGrid,
    },
    {
        title: 'Time Tracker',
        href: '#',
        icon: Timer,
    },
    {
        title: 'Projects',
        href: '#',
        icon: FolderGit2,
    },
    {
        title: 'Timesheet',
        href: '#',
        icon: Square,
    },
    {
        title: 'Reports',
        href: '#',
        icon: PieChart,
    },
    {
        title: 'Teams',
        href: '#',
        icon: Users,
    },
    {
        title: 'Clients',
        href: '#',
        icon: Users,
    },
    {
        title: 'Expenses',
        href: '#',
        icon: Wallet,
    },
    {
        title: 'Invoices',
        href: '#',
        icon: WalletCards,
    },
    {
        title: 'Approvals',
        href: '#',
        icon: SquareStack,
    },
    {
        title: 'Calendar',
        href: '#',
        icon: Calendar,
    },
];

const footerNavItems: NavItem[] = [
    {
        title: 'Settings',
        href: '#',
        icon: Settings,
    },
    {
        title: 'Repository',
        href: 'https://github.com/laravel/vue-starter-kit',
        icon: BookOpen,
    },
    {
        title: 'Documentation',
        href: 'https://laravel.com/docs/starter-kits#vue',
        icon: BookOpen,
    },
    {
        title: 'Help',
        href: '#',
        icon: CircleHelp,
    },
];
</script>

<template>
    <Sidebar
        collapsible="icon"
        variant="inset"
        class="!bg-[#1d272c] dark:!bg-[#12191d]"
    >
        <SidebarHeader class="border-b border-white/10">
            <SidebarMenu>
                <SidebarMenuItem>
                    <SidebarMenuButton size="lg" as-child>
                        <Link :href="dashboard()">
                            <AppLogo />
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarHeader>

        <SidebarContent class="!bg-[#1d272c] dark:!bg-[#12191d]">
            <SidebarMenu>
                <SidebarMenuItem
                    v-for="item in mainNavItems"
                    :key="item.title"
                    class="relative"
                >
                    <SidebarMenuButton
                        as-child
                        :is-active="isCurrentUrl(item.href)"
                        :tooltip="item.title"
                        class="!h-10 !justify-center !px-3 !text-white/60 hover:!text-white !bg-transparent hover:!bg-white/10 data-[active=true]:!text-white data-[active=true]:![&>svg]:!text-white group-data-[collapsible=icon]:!p-0"
                    >
                        <Link
                            :href="item.href"
                            class="flex items-center gap-3"
                        >
                            <component
                                :is="item.icon"
                                class="!h-5 !w-5"
                            />
                            <span class="truncate">{{ item.title }}</span>
                        </Link>
                    </SidebarMenuButton>
                    <div
                        v-if="isCurrentUrl(item.href)"
                        class="absolute left-0 top-0 h-full w-[3px] bg-[#03a9f4] rounded-r"
                    />
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarContent>

        <SidebarFooter class="!bg-[#1d272c] dark:!bg-[#12191d]">
            <SidebarMenu>
                <SidebarMenuItem
                    v-for="item in footerNavItems"
                    :key="item.title"
                    class="relative"
                >
                    <SidebarMenuButton
                        as-child
                        :tooltip="item.title"
                        class="!h-10 !justify-center !px-3 !text-white/60 hover:!text-white !bg-transparent hover:!bg-white/10 data-[active=true]:!text-white data-[active=true]:![&>svg]:!text-white group-data-[collapsible=icon]:!p-0"
                    >
                        <a
                            v-if="item.href.startsWith('http')"
                            :href="item.href"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="flex items-center gap-3"
                        >
                            <component
                                :is="item.icon"
                                class="!h-5 !w-5"
                            />
                            <span class="truncate">{{ item.title }}</span>
                        </a>
                        <Link
                            v-else
                            :href="item.href"
                            class="flex items-center gap-3"
                        >
                            <component
                                :is="item.icon"
                                class="!h-5 !w-5"
                            />
                            <span class="truncate">{{ item.title }}</span>
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>
            </SidebarMenu>
            <div class="mt-2">
                <NavUser />
            </div>
        </SidebarFooter>
    </Sidebar>
    <slot />
</template>