GF-4 (#4) Start work on main layout

app/layouts/Default.vue

@@ -1,5 +1,14 @@
+<script setup lang="ts">
+import DefaultSidebar from "~/layouts/default/Sidebar.vue";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+</script>
+
 <template>
-  <div>
-    <slot />
-  </div>
+  <SidebarProvider>
+    <DefaultSidebar />
+    <main>
+      <SidebarTrigger />
+      <slot />
+    </main>
+  </SidebarProvider>
 </template>

app/layouts/default/Sidebar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  type SidebarProps,
+} from "~/components/ui/sidebar";
+import { HandCoins } from "lucide-vue-next";
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  collapsible: "icon",
+});
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" as-child>
+            <NuxtLink to="/">
+              <div
+                class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
+              >
+                <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>
+              </div>
+            </NuxtLink>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarHeader>
+    <SidebarContent></SidebarContent>
+    <SidebarFooter></SidebarFooter>
+    <SidebarRail></SidebarRail>
+  </Sidebar>
+</template>