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

<script setup lang="ts">
import { Link, router, usePage } from '@inertiajs/vue3';
import { BoxSelect, Building2, ChevronsUpDown, Plus } from 'lucide-vue-next';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    useSidebar,
} from '@/components/ui/sidebar';

const page = usePage();
const { isMobile } = useSidebar();

const workspaces = page.props.auth?.workspaces ?? [];
const currentWorkspace = page.props.auth?.currentWorkspace ?? null;

function switchWorkspace(workspace: { id: number }) {
    router.post('/workspace/switch', { workspace_id: workspace.id }, {
        preserveState: false,
        onSuccess: () => router.reload(),
    });
}
</script>

<template>
    <SidebarMenu v-if="workspaces.length > 0">
        <SidebarMenuItem>
            <DropdownMenu>
                <DropdownMenuTrigger as-child>
                    <SidebarMenuButton
                        size="lg"
                        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                    >
                        <div
                            class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
                        >
                            <Building2 class="size-4" />
                        </div>
                        <div
                            class="grid flex-1 text-left text-sm leading-tight"
                        >
                            <span class="truncate font-medium">
                                {{
                                    currentWorkspace?.name ?? 'Select workspace'
                                }}
                            </span>
                            <span
                                v-if="currentWorkspace"
                                class="truncate text-xs text-muted-foreground"
                            >
                                {{ currentWorkspace.slug }}
                            </span>
                        </div>
                        <ChevronsUpDown class="ml-auto" />
                    </SidebarMenuButton>
                </DropdownMenuTrigger>
                <DropdownMenuContent
                    class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                    align="start"
                    :side="isMobile ? 'bottom' : 'right'"
                    :side-offset="4"
                >
                    <DropdownMenuLabel class="text-xs text-muted-foreground">
                        Workspaces
                    </DropdownMenuLabel>
                    <DropdownMenuItem
                        v-for="workspace in workspaces"
                        :key="workspace.id"
                        class="gap-2 p-2"
                        @click="switchWorkspace(workspace)"
                    >
                        <div
                            class="flex size-6 items-center justify-center rounded-sm border"
                        >
                            <Building2 class="size-3.5 shrink-0" />
                        </div>
                        <div class="flex flex-col">
                            <span>{{ workspace.name }}</span>
                            <span class="text-xs text-muted-foreground">{{
                                workspace.slug
                            }}</span>
                        </div>
                    </DropdownMenuItem>
                    <!-- <DropdownMenuSeparator />
                    <DropdownMenuItem as-child>
                        <Link
                            href="/workspaces"
                            class="flex w-full cursor-pointer items-center gap-2 p-2"
                        >
                            <div
                                class="flex size-6 items-center justify-center rounded-md border bg-transparent"
                            >
                                <Plus class="size-4" />
                            </div>
                            <span class="font-medium text-muted-foreground">
                                Manage workspaces
                            </span>
                        </Link>
                    </DropdownMenuItem> -->
                </DropdownMenuContent>
            </DropdownMenu>
        </SidebarMenuItem>
    </SidebarMenu>
    <SidebarMenu v-else>
        <SidebarMenuItem>
            <SidebarMenuButton size="lg" as-child>
                <div
                    class="flex items-center gap-2 text-muted-foreground"
                >
                    <div
                        class="flex aspect-square size-8 items-center justify-center rounded-lg border border-dashed"
                    >
                        <BoxSelect class="size-4" />
                    </div>
                    <span class="text-sm">No workspaces found</span>
                </div>
            </SidebarMenuButton>
        </SidebarMenuItem>
    </SidebarMenu>
</template>