mp3-composer/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix colors, replace Dropdown with Select, add clear layout

Browse Source
This commit is contained in:
bivashy
2025-11-06 00:31:47 +05:00
parent 73a3be7539
commit 86b41eb5e0
51 changed files with 1248 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
app/components/ui/sidebar/AppSidebar.vue
View File

@ -1,93 +1,120 @@
<script setup lang="ts">
import { Calendar, ChevronsUpDown, Home, Inbox, Music2, Music4, Search, Settings } from "lucide-vue-next"
import { ChevronsUpDown, Download, Edit, Music4, Settings, Upload } 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";
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: "Home",
url: "#",
icon: Home,
title: "Edit track",
url: "/edit",
icon: Edit,
},
{
title: "Inbox",
url: "#",
icon: Inbox,
title: "Import",
url: "/import",
icon: Upload,
},
{
title: "Calendar",
url: "#",
icon: Calendar,
},
{
title: "Search",
url: "#",
icon: Search,
title: "Export",
url: "/export",
icon: Download,
},
{
title: "Modify audio",
url: "/modify",
icon: EditAudio,
}, {
title: "Settings",
url: "#",
url: "/settings",
icon: Settings,
},
];
const {
open,
openMobile,
} = useSidebar()
const route = useRoute()
</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 />
<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>
</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>
<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-1">
<SidebarMenu class="group-data-[collapsible=icon]:p-2">
<SidebarMenuItem v-for="item in items" :key="item.title">
<SidebarMenuButton asChild>
<SidebarMenuButton asChild :is-active="route.path === item.url">
<a :href="item.url">
<div class="text-[1.5rem]">
<component :is="item.icon" />
</div>
<component :is="item.icon" />
<span>{{ item.title }}</span>
</a>
</SidebarMenuButton>