feat(NavigationMenu): handle content, color, variant, etc.

playground/pages/navigation-menu.vue

@@ -1,33 +1,75 @@
 <script setup lang="ts">
+import theme from '#build/ui/navigation-menu'
+
+const colors = Object.keys(theme.variants.color)
+const variants = Object.keys(theme.variants.variant)
+const orientations = Object.keys(theme.variants.orientation)
+
+const color = ref(theme.defaultVariants.color)
+const variant = ref(theme.defaultVariants.variant)
+const orientation = ref('horizontal' as const)
+
 const items = [
   [{
-    label: 'Profile',
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    children: [{
+      label: 'Introduction',
+      description: 'Fully styled and customizable components for Nuxt.',
+      icon: 'i-heroicons-home'
+    }, {
+      label: 'Installation',
+      description: 'Learn how to install and configure Nuxt UI in your application.',
+      icon: 'i-heroicons-cloud-arrow-down'
+    }, {
+      label: 'Theming',
+      description: 'Learn how to customize the look and feel of the components.',
+      icon: 'i-heroicons-swatch'
+    }, {
+      label: 'Shortcuts',
+      description: 'Learn how to display and define keyboard shortcuts in your app.',
+      icon: 'i-heroicons-computer-desktop'
+    }]
+  }, {
+    label: 'Components',
+    icon: 'i-heroicons-cube-transparent',
     active: true,
-    avatar: {
-      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-    },
-    badge: 100,
-    select() {
-      console.log('Profile clicked')
-    }
+    children: [{
+      label: 'Link',
+      icon: 'i-heroicons-document',
+      description: 'Use NuxtLink with superpowers.',
+      to: '/link'
+    }, {
+      label: 'Modal',
+      icon: 'i-heroicons-document',
+      description: 'Display a modal within your application.',
+      to: '/modal'
+    }, {
+      label: 'NavigationMenu',
+      icon: 'i-heroicons-document',
+      description: 'Display a list of links.',
+      to: '/navigation-menu'
+    }, {
+      label: 'Pagination',
+      icon: 'i-heroicons-document',
+      description: 'Display a list of pages.',
+      to: '/pagination'
+    }, {
+      label: 'Popover',
+      icon: 'i-heroicons-document',
+      description: 'Display a non-modal dialog that floats around a trigger element.',
+      to: '/popover'
+    }, {
+      label: 'Progress',
+      icon: 'i-heroicons-document',
+      description: 'Show a horizontal bar to indicate task progression.',
+      to: '/progress'
+    }]
   }, {
-    label: 'Modal',
-    icon: 'i-heroicons-home',
-    to: '/modal'
-  }, {
-    label: 'NavigationMenu',
-    icon: 'i-heroicons-chart-bar',
-    to: '/navigation-menu'
-  }, {
-    label: 'Popover',
-    icon: 'i-heroicons-command-line',
-    to: '/popover'
-  }], [{
-    label: 'Examples',
-    icon: 'i-heroicons-light-bulb',
-    to: 'https://ui.nuxt.com',
-    target: '_blank',
-    slot: 'custom' as const
+    label: 'GitHub',
+    icon: 'i-simple-icons-github',
+    to: 'https://github.com/nuxt/ui',
+    target: '_blank'
   }, {
     label: 'Help',
     icon: 'i-heroicons-question-mark-circle',
@@ -37,15 +79,13 @@ const items = [
 </script>
 
 <template>
-  <div class="flex flex-col gap-12 w-full max-w-4xl">
-    <UNavigationMenu :items="items" class="border-b border-gray-200 dark:border-gray-800">
-      <template #custom="{ item }">
-        <UIcon v-if="item.icon" :name="item.icon" class="size-5" />
+  <div class="flex flex-col items-center gap-12">
+    <div class="flex items-center gap-2">
+      <USelect v-model="color" :items="colors" placeholder="Color" />
+      <USelect v-model="variant" :items="variants" placeholder="Variant" />
+      <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
+    </div>
 
-        <span class="truncate text-primary-500 dark:text-primary-400">{{ item.label }}</span>
-      </template>
-    </UNavigationMenu>
-
-    <UNavigationMenu :items="items" orientation="vertical" class="w-48" />
+    <UNavigationMenu :color="color" :variant="variant" :orientation="orientation" :items="items" arrow />
   </div>
 </template>