102 lines
3.0 KiB
Vue
102 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { Calendar, ChevronsUpDown, Home, Inbox, Music2, Music4, Search, Settings } from "lucide-vue-next"
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarHeader,
|
|
SidebarRail,
|
|
} from "@/components/ui/sidebar"
|
|
import Container from "@/components/ui/container/Container.vue";
|
|
import { useSidebar } from "@/components/ui/sidebar";
|
|
|
|
const items = [
|
|
{
|
|
title: "Home",
|
|
url: "#",
|
|
icon: Home,
|
|
},
|
|
{
|
|
title: "Inbox",
|
|
url: "#",
|
|
icon: Inbox,
|
|
},
|
|
{
|
|
title: "Calendar",
|
|
url: "#",
|
|
icon: Calendar,
|
|
},
|
|
{
|
|
title: "Search",
|
|
url: "#",
|
|
icon: Search,
|
|
},
|
|
{
|
|
title: "Settings",
|
|
url: "#",
|
|
icon: Settings,
|
|
},
|
|
];
|
|
|
|
const {
|
|
open,
|
|
openMobile,
|
|
} = useSidebar()
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<div v-if="open">
|
|
<div class="flex p-2 gap-2 items-center">
|
|
<Container borderRadius="round" background="primary" padding="dense" margin="none">
|
|
<Music4 class="text-primary-foreground" :size="24" />
|
|
</Container>
|
|
<div class="overflow-hidden">
|
|
<h4 class="text-xl font-semibold tracking-tight truncate">
|
|
My playlist
|
|
</h4>
|
|
<p class="text-sm text-muted-foreground">
|
|
11 track(s)
|
|
</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<ChevronsUpDown />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!open">
|
|
<div class="flex items-center">
|
|
<Container borderRadius="round" background="primary" padding="dense" margin="none">
|
|
<Music4 class="text-primary-foreground" :size="24" />
|
|
</Container>
|
|
</div>
|
|
</div>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu class="group-data-[collapsible=icon]:p-1">
|
|
<SidebarMenuItem v-for="item in items" :key="item.title">
|
|
<SidebarMenuButton asChild>
|
|
<a :href="item.url">
|
|
<div class="text-[1.5rem]">
|
|
<component :is="item.icon" />
|
|
</div>
|
|
<span>{{ item.title }}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|