rag/resources/js/Components/AppSidebar.vue

<script setup lang="ts">
import {Plus, MoreHorizontal, Trash, MessageSquareOff} from "lucide-vue-next"

import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupContent,
    SidebarGroupLabel,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarGroupAction, SidebarMenuAction
} from '@/Packages/Shadcn/Components/ui/sidebar'

import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem
} from "@/Packages/Shadcn/Components/ui/dropdown-menu";

import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/Packages/Shadcn/Components/ui/empty'
import {router} from "@inertiajs/vue3";


defineProps({
    chats: {
        type: Array,
        default: () => [],
    }
})

const items = [{title: "Нет чатов", url: "#"}];
</script>

<template>
    <Sidebar variant="floating">
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel>Application</SidebarGroupLabel>
                <SidebarGroupAction title="New Chat" class="rounded-full cursor-pointer" @click="() => router.visit(route('chats.index'))">
                    <Plus/>
                    <span class="sr-only">New Chat</span>
                </SidebarGroupAction>
                <SidebarGroupContent>
                    <template v-if="chats.length === 0">
                        <Empty class="border border-dashed">
                            <EmptyHeader>
                                <EmptyMedia variant="icon">
                                    <MessageSquareOff/>
                                </EmptyMedia>
                                <EmptyTitle>Нет чатов</EmptyTitle>
                                <EmptyDescription>Список чатов пока пуст</EmptyDescription>
                            </EmptyHeader>
                        </Empty>
                    </template>
                    <template v-else>
                        <SidebarMenu>
                            <SidebarMenuItem v-for="item in chats" :key="item.title">
                                <SidebarMenuButton asChild class="cursor-pointer" @click="() => router.visit(route('chats.view', item.id))">
                                    <span>{{ item.title ?? 'Новый чат' }}</span>
                                </SidebarMenuButton>
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <SidebarMenuAction class="rounded-full cursor-pointer">
                                            <MoreHorizontal/>
                                        </SidebarMenuAction>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent side="right" align="center">
                                        <DropdownMenuItem class="text-primary cursor-pointer" @click="() => router.delete(route('chats.destroy', item.id))">
                                            <Trash/>
                                            <span>Удалить чат</span>
                                        </DropdownMenuItem>
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </SidebarMenuItem>
                        </SidebarMenu>
                    </template>

                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
    </Sidebar>
</template>