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'

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

<template>
    <Sidebar variant="floating">
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel>Application</SidebarGroupLabel>
                <SidebarGroupAction title="New Chat" class="rounded-full cursor-pointer">
                    <Plus/>
                    <span class="sr-only">New Chat</span>
                </SidebarGroupAction>
                <SidebarGroupContent>
                    <Empty class="border border-dashed">
                        <EmptyHeader>
                            <EmptyMedia variant="icon">
                                <MessageSquareOff/>
                            </EmptyMedia>
                            <EmptyTitle>Нет чатов</EmptyTitle>
                            <EmptyDescription>Список чатов пока пуст</EmptyDescription>
                        </EmptyHeader>
                    </Empty>
                    <!--                    <SidebarMenu>-->
                    <!--                        <SidebarMenuItem v-for="item in items" :key="item.title">-->
                    <!--                            <SidebarMenuButton asChild class="cursor-pointer">-->
                    <!--                                <span>{{ item.title }}</span>-->
                    <!--                            </SidebarMenuButton>-->
                    <!--                            <DropdownMenu>-->
                    <!--                                <DropdownMenuTrigger asChild>-->
                    <!--                                    <SidebarMenuAction class="rounded-full cursor-pointer">-->
                    <!--                                        <MoreHorizontal/>-->
                    <!--                                    </SidebarMenuAction>-->
                    <!--                                </DropdownMenuTrigger>-->
                    <!--                                <DropdownMenuContent side="top" align="start">-->
                    <!--                                    <DropdownMenuItem class="text-primary cursor-pointer">-->
                    <!--                                        <Trash /> <span>Удалить чат</span>-->
                    <!--                                    </DropdownMenuItem>-->
                    <!--                                </DropdownMenuContent>-->
                    <!--                            </DropdownMenu>-->
                    <!--                        </SidebarMenuItem>-->
                    <!--                    </SidebarMenu>-->
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
    </Sidebar>
</template>