71 lines
1.9 KiB
Vue
71 lines
1.9 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 EditAudio from "@/components/icon/EditAudio.vue";
|
|
import PlaylistSelect from "@/components/internal/PlaylistSelect.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 route = useRoute()
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<PlaylistSelect />
|
|
</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>
|