129 lines
4.7 KiB
Vue
129 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import { ChevronsUpDown, Download, Edit, Music4, Settings, Upload } from "lucide-vue-next"
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarHeader,
|
|
SidebarRail,
|
|
} from "@/components/ui/sidebar"
|
|
import { useSidebar } from "@/components/ui/sidebar";
|
|
import EditAudio from "@/components/icon/EditAudio.vue";
|
|
import Frame from "@/components/ui/frame/Frame.vue";
|
|
import Select from "@/components/ui/select/Select.vue";
|
|
import SelectTrigger from "@/components/ui/select/SelectTrigger.vue";
|
|
import SelectContent from "@/components/ui/select/SelectContent.vue";
|
|
import SelectLabel from "@/components/ui/select/SelectLabel.vue";
|
|
import SelectSeparator from "@/components/ui/select/SelectSeparator.vue";
|
|
import SelectGroup from "@/components/ui/select/SelectGroup.vue";
|
|
import SelectItem from "@/components/ui/select/SelectItem.vue";
|
|
import SelectCustomTrigger from "@/components/ui/select/SelectCustomTrigger.vue";
|
|
|
|
const items = [
|
|
{
|
|
title: "Edit track",
|
|
url: "/edit",
|
|
icon: Edit,
|
|
},
|
|
{
|
|
title: "Import",
|
|
url: "/import",
|
|
icon: Upload,
|
|
},
|
|
{
|
|
title: "Export",
|
|
url: "/export",
|
|
icon: Download,
|
|
},
|
|
{
|
|
title: "Modify audio",
|
|
url: "/modify",
|
|
icon: EditAudio,
|
|
}, {
|
|
title: "Settings",
|
|
url: "/settings",
|
|
icon: Settings,
|
|
},
|
|
];
|
|
|
|
const {
|
|
open,
|
|
} = useSidebar()
|
|
const route = useRoute()
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<Select>
|
|
<div v-if="open" class="hover:bg-sidebar-muted cursor-pointer rounded-md select-none">
|
|
<SelectCustomTrigger class="w-full flex p-2 gap-2 items-center">
|
|
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
|
|
<Music4 class="text-primary-foreground" :size="24" />
|
|
</Frame>
|
|
<div class="overflow-hidden text-start">
|
|
<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>
|
|
</SelectCustomTrigger>
|
|
</div>
|
|
<div v-if="!open">
|
|
<div class="flex items-center">
|
|
<SelectCustomTrigger as-child>
|
|
<Frame borderRadius="round" background="primary" padding="dense" margin="none">
|
|
<Music4 class="text-primary-foreground" :size="24" />
|
|
</Frame>
|
|
</SelectCustomTrigger>
|
|
</div>
|
|
</div>
|
|
<SelectContent class="w-full">
|
|
<SelectLabel>Playlists</SelectLabel>
|
|
<SelectSeparator />
|
|
<SelectGroup>
|
|
<SelectItem value="test">
|
|
<span>Test</span>
|
|
</SelectItem>
|
|
<SelectItem value="second">
|
|
<span>Second</span>
|
|
</SelectItem>
|
|
<SelectItem value="third">
|
|
<span>Third</span>
|
|
</SelectItem>
|
|
<SelectItem value="fourth">
|
|
<span>Fourth</span>
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu class="group-data-[collapsible=icon]:p-2">
|
|
<SidebarMenuItem v-for="item in items" :key="item.title">
|
|
<SidebarMenuButton asChild :is-active="route.path === item.url">
|
|
<a :href="item.url">
|
|
<component :is="item.icon" />
|
|
<span>{{ item.title }}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|