KanbanGit/resources/js/components/AppSidebar.vue

<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import {
    ArrowLeft,
    BookOpen,
    CirclePlus,
    Folder,
    FolderGit2,
    LayoutGrid,
    Layers3,
    Shield,
    Users,
} from 'lucide-vue-next';
import { computed } from 'vue';
import AppLogo from '@/components/AppLogo.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 adminUsers } from '@/routes/admin/users';
import { index as projectTemplatesIndex } from '@/routes/project-templates';
import {
    create as projectsCreate,
    index as projectsIndex,
} from '@/routes/projects';
import { index as teamsIndex } from '@/routes/teams';
import type { AppSidebarProps, NavItem } from '@/types';

const props = defineProps<AppSidebarProps>();

const page = usePage();

const mainNavItems = computed<NavItem[]>(() => {
    const items: NavItem[] = [
        {
            title: 'Dashboard',
            href: dashboard(),
            icon: LayoutGrid,
        },
        {
            title: 'Projects',
            href: projectsIndex(),
            icon: Folder,
        },
    ];

    if (page.props.auth.permissions.projectCreate) {
        items.push({
            title: 'Project templates',
            href: projectTemplatesIndex(),
            icon: Layers3,
        });
    }

    if (page.props.auth.permissions.globalAdmin) {
        items.push({
            title: 'Users',
            href: adminUsers(),
            icon: Shield,
        });
    }

    if (page.props.auth.permissions.canManageTeams) {
        items.push({
            title: 'Teams',
            href: teamsIndex(),
            icon: Users,
        });
    }

    return items;
});

const footerNavItems: NavItem[] = [
    {
        title: 'Repository',
        href: 'https://git.twyco.de/OpenSource/KanbanGit',
        icon: FolderGit2,
    },
    {
        title: 'Documentation',
        href: 'https://git.twyco.de/OpenSource/KanbanGit/src/branch/main/README.md',
        icon: BookOpen,
    },
];
</script>

<template>
    <Sidebar collapsible="icon" variant="sidebar" class="border-sidebar-border">
        <SidebarHeader>
            <SidebarMenu>
                <SidebarMenuItem>
                    <SidebarMenuButton size="lg" as-child>
                        <Link :href="project ? projectsIndex() : dashboard()">
                            <AppLogo />
                        </Link>
                    </SidebarMenuButton>
                </SidebarMenuItem>
            </SidebarMenu>
        </SidebarHeader>

        <SidebarContent>
            <template v-if="project">
                <div
                    class="border-sidebar-border bg-sidebar-accent/60 mx-3 mb-3 rounded-lg border p-3 group-data-[collapsible=icon]:hidden"
                >
                    <div
                        class="text-sidebar-foreground/55 text-[0.65rem] font-bold uppercase tracking-[0.12em]"
                    >
                        {{ project.key }}
                    </div>
                    <div class="mt-1 truncate text-sm font-semibold">
                        {{ project.name }}
                    </div>
                </div>
                <div class="mt-auto px-3 pb-3">
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <SidebarMenuButton as-child tooltip="All projects">
                                <Link :href="projectsIndex()">
                                    <ArrowLeft />
                                    <span>All projects</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </div>
            </template>
            <template v-else>
                <NavMain :items="mainNavItems" label="Workspace" />
                <div
                    v-if="page.props.auth.permissions.projectCreate"
                    class="px-3 pt-3 group-data-[collapsible=icon]:px-2"
                >
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <SidebarMenuButton
                                as-child
                                tooltip="New project"
                                class="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
                            >
                                <Link :href="projectsCreate()">
                                    <CirclePlus />
                                    <span>New project</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </div>
            </template>
        </SidebarContent>

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