L-Ami-Fiduciaire/resources/js/components/AppSidebar.vue

<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import {
    BookOpen,
    Briefcase,
    Building2,
    FileStack,
    HelpCircle,
    LayoutGrid,
    Users,
    UsersRound,
} from 'lucide-vue-next';
import { computed } from 'vue';
import NavFooter from '@/components/NavFooter.vue';
import NavMain from '@/components/NavMain.vue';
import NavUser from '@/components/NavUser.vue';
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { dashboard } from '@/routes';
import { index as clientsIndex } from '@/routes/clients';
import { index as declarationsIndex } from '@/routes/declarations';
import { index as teamIndex } from '@/routes/team';
import type { NavItem } from '@/types';
import AppLogo from './AppLogo.vue';
import WorkspaceSwitcher from './WorkspaceSwitcher.vue';

const page = usePage();
const workspaceRole = computed(() => page.props.auth?.workspaceRole);
const isWorker = computed(() => workspaceRole.value === 'worker');

const mainNavItems = computed<NavItem[]>(() => {
    const items: NavItem[] = [
        {
            title: 'Dashboard',
            href: dashboard(),
            icon: LayoutGrid,
        },
    ];
    if (page.props.auth?.currentWorkspace) {
        if (isWorker.value) {
            items.push({
                title: 'Mes déclarations',
                href: declarationsIndex.url(),
                icon: FileStack,
            });
        } else {
            items.push(
                {
                    title: 'Clients',
                    href: clientsIndex.url(),
                    icon: Briefcase,
                },
                {
                    title: 'Déclarations',
                    href: declarationsIndex.url(),
                    icon: FileStack,
                },
                {
                    title: 'Équipe',
                    href: teamIndex.url(),
                    icon: UsersRound,
                },
            );
        }
    }
    return items;
});

const administrationNavItems: NavItem[] = [
    {
        title: 'Users',
        href: '/users',
        icon: Users,
    },
    {
        title: 'Workspaces',
        href: '/workspaces',
        icon: Building2,
    },
];

const footerNavItems: NavItem[] = [
    {
        title: 'Tutoriels',
        href: '#',
        icon: BookOpen,
    },
    {
        title: 'Help Center',
        href: '#',
        icon: HelpCircle,
    },
];
</script>

<template>
    <Sidebar collapsible="icon" variant="inset">
        <SidebarHeader>
            <WorkspaceSwitcher />
            <!-- <SidebarMenu>
                <SidebarMenuItem>
                    <SidebarMenuButton size="lg" as-child>
                        <Link :href="dashboard()">
                            <AppLogo />
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>
            </SidebarMenu> -->
        </SidebarHeader>

        <SidebarContent>
            <NavMain :items="mainNavItems" />
            <template
                v-if="
                    ['admin', 'superadmin'].includes(
                        String($page.props.auth.user?.group ?? ''),
                    )
                "
            >
                <NavMain
                    :items="administrationNavItems"
                    label="Administration"
                />
            </template>
        </SidebarContent>

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