GF-4 (#4) Finalized layout

app/layouts/default/Sidebar.vue

@@ -1,20 +1,113 @@
 <script setup lang="ts">
+import { computed } from "vue";
+import {
+  BadgeCheck,
+  Bell,
+  ChevronRight,
+  ChevronsUpDown,
+  CreditCard,
+  BookOpen,
+  HandCoins,
+  LogOut,
+  Settings2,
+  Sparkles,
+  SquareTerminal,
+} from "lucide-vue-next";
+
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
+  SidebarGroup,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarRail,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
   type SidebarProps,
 } from "~/components/ui/sidebar";
-import { HandCoins } from "lucide-vue-next";
 
-const props = withDefaults(defineProps<SidebarProps>(), {
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible";
+
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+
+const data = {
+  user: {
+    name: "Liviu",
+    email: "x.liviu@gmail.com",
+    avatar: "https://git.burcusel.nl/avatars/bcc51c59d08174c798ba7db59631df6cb820e042679af9098cc03ef68330f486?size=200",
+  },
+  navMain: [
+    {
+      title: "Playground",
+      url: "#",
+      icon: SquareTerminal,
+      isActive: true,
+      items: [
+        { title: "History", url: "#" },
+        { title: "Starred", url: "#" },
+        { title: "Settings", url: "#" },
+      ],
+    },
+    {
+      title: "Documentation",
+      url: "#",
+      icon: BookOpen,
+      isActive: true,
+      items: [
+        { title: "Introduction", url: "#" },
+        { title: "Get Started", url: "#" },
+        { title: "Tutorials", url: "#" },
+        { title: "Changelog", url: "#" },
+      ],
+    },
+    {
+      title: "Settings",
+      url: "#",
+      icon: Settings2,
+      isActive: true,
+      items: [
+        { title: "General", url: "#" },
+        { title: "Billing", url: "#" },
+        { title: "Limits", url: "#" },
+      ],
+    },
+  ],
+};
+
+interface NavItem {
+  title: string;
+  url: string;
+  icon?: any;
+  isActive?: boolean;
+  items?: { title: string; url: string }[];
+}
+
+interface SidebarLayoutProps extends /* @vue-ignore */ SidebarProps {
+  navItems?: NavItem[];
+}
+
+const props = withDefaults(defineProps<SidebarLayoutProps>(), {
   collapsible: "icon",
 });
+
+const navMain = computed(() => props.navItems || data.navMain);
+
+const { isMobile } = useSidebar();
 </script>
 
 <template>
@@ -30,16 +123,123 @@ const props = withDefaults(defineProps<SidebarProps>(), {
                 <HandCoins class="size-4" />
               </div>
               <div class="flex flex-col gap-0.5 leading-none">
-                <span class="font-medium">Glowing Fiesta</span>
-                <span class="">v1.0.0</span>
+                <span class="font-bold text-primary">Glowing Fiesta</span>
+                <span>v1.0.0</span>
               </div>
             </NuxtLink>
           </SidebarMenuButton>
         </SidebarMenuItem>
       </SidebarMenu>
     </SidebarHeader>
-    <SidebarContent></SidebarContent>
-    <SidebarFooter></SidebarFooter>
+
+    <SidebarContent>
+      <SidebarGroup>
+        <SidebarMenu>
+          <Collapsible
+            v-for="item in navMain"
+            :key="item.title"
+            as-child
+            :default-open="item.isActive"
+            class="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger as-child>
+                <SidebarMenuButton :tooltip="item.title">
+                  <component :is="item.icon" v-if="item.icon" class="text-primary" />
+                  <span class="font-bold text-primary">{{ item.title }}</span>
+                  <ChevronRight
+                    class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 text-primary"
+                  />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
+                    <SidebarMenuSubButton as-child>
+                      <NuxtLink :to="subItem.url">
+                        <span>{{ subItem.title }}</span>
+                      </NuxtLink>
+                    </SidebarMenuSubButton>
+                  </SidebarMenuSubItem>
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        </SidebarMenu>
+      </SidebarGroup>
+    </SidebarContent>
+
+    <SidebarFooter>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <SidebarMenuButton
+                size="lg"
+                class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <Avatar class="h-8 w-8 rounded-lg">
+                  <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
+                  <AvatarFallback class="rounded-lg"> LB </AvatarFallback>
+                </Avatar>
+                <div class="grid flex-1 text-left text-sm leading-tight">
+                  <span class="truncate font-medium">{{ data.user.name }}</span>
+                  <span class="truncate text-xs">{{ data.user.email }}</span>
+                </div>
+                <ChevronsUpDown class="ml-auto size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+              :side="isMobile ? 'bottom' : 'right'"
+              align="end"
+              :side-offset="4"
+            >
+              <DropdownMenuLabel class="p-0 font-normal">
+                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar class="h-8 w-8 rounded-lg">
+                    <AvatarImage :src="data.user.avatar" :alt="data.user.name" />
+                    <AvatarFallback class="rounded-lg">LB</AvatarFallback>
+                  </Avatar>
+                  <div class="grid flex-1 text-left text-sm leading-tight">
+                    <span class="truncate font-semibold">{{ data.user.name }}</span>
+                    <span class="truncate text-xs">{{ data.user.email }}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <Sparkles />
+                  Upgrade to Pro
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem>
+                  <BadgeCheck />
+                  Account
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <CreditCard />
+                  Billing
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Bell />
+                  Notifications
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <LogOut />
+                Log out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarFooter>
+
     <SidebarRail></SidebarRail>
   </Sidebar>
 </template>