sidebar + basic layout

components/AppSidebar.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { Icon } from '#components';
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
+
+const items = [
+    {
+        title: 'Home',
+        url: '/',
+        icon: h(Icon, { name: 'lucide:home' }),
+    },
+    {
+        title: 'About',
+        url: '/about',
+        icon: h(Icon, { name: 'lucide:inbox' }),
+    },
+];
+</script>
+
+<template>
+    <Sidebar collapsible="icon">
+        <SidebarContent>
+            <SidebarGroup>
+                <SidebarGroupLabel>Application</SidebarGroupLabel>
+                <SidebarMenu>
+                    <SidebarMenuItem v-for="item in items" :key="item.title">
+                        <SidebarMenuButton as-child :tooltip="item.title">
+                            <NuxtLink :to="item.url">
+                                <component :is="item.icon"></component>
+                                <span>{{ item.title }}</span>
+                            </NuxtLink>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarGroup>
+        </SidebarContent>
+    </Sidebar>
+</template>