Initial codebase commit

app/components/ui/sidebar/AppSidebar.vue

@@ -0,0 +1,101 @@
+<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>