feat(HorizontalNavigation): new component (#1279)

docs/components/content/examples/HorizontalNavigationExample.vue

@@ -0,0 +1,27 @@
+<script setup>
+const route = useRoute()
+
+const links = [{
+  label: 'Profile',
+  avatar: {
+    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+  },
+  badge: 100
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-home',
+  to: '/getting-started/installation'
+}, {
+  label: 'Horizontal Navigation',
+  icon: 'i-heroicons-chart-bar',
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+}, {
+  label: 'Command Palette',
+  icon: 'i-heroicons-command-line',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
+</template>

docs/components/content/examples/HorizontalNavigationExampleDefaultSlot.vue

@@ -0,0 +1,22 @@
+<script setup>
+const route = useRoute()
+
+const links = [{
+  label: 'Horizontal Navigation',
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+}, {
+  label: 'Command Palette',
+  to: '/navigation/command-palette'
+}, {
+  label: 'Table',
+  to: '/data/table'
+}]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links">
+    <template #default="{ link }">
+      <span class="group-hover:text-primary relative">{{ link.label }}</span>
+    </template>
+  </UHorizontalNavigation>
+</template>

docs/components/content/examples/HorizontalNavigationExampleSections.vue

@@ -0,0 +1,29 @@
+<script setup>
+const route = useRoute()
+
+const links = [
+  [{
+    label: 'Installation',
+    icon: 'i-heroicons-home',
+    to: '/getting-started/installation'
+  }, {
+    label: 'Horizontal Navigation',
+    icon: 'i-heroicons-chart-bar',
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/horizontal-navigation`
+  }, {
+    label: 'Command Palette',
+    icon: 'i-heroicons-command-line',
+    to: '/navigation/command-palette'
+  }], [{
+    label: 'Examples',
+    icon: 'i-heroicons-light-bulb'
+  }, {
+    label: 'Help',
+    icon: 'i-heroicons-question-mark-circle'
+  }]
+]
+</script>
+
+<template>
+  <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" />
+</template>

docs/components/content/examples/VerticalNavigationExample.vue

@@ -1,4 +1,6 @@
 <script setup>
+const route = useRoute()
+
 const links = [{
   label: 'Profile',
   avatar: {
@@ -12,7 +14,7 @@ const links = [{
 }, {
   label: 'Vertical Navigation',
   icon: 'i-heroicons-chart-bar',
-  to: '/navigation/vertical-navigation'
+  to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/vertical-navigation`
 }, {
   label: 'Command Palette',
   icon: 'i-heroicons-command-line',

docs/components/content/examples/VerticalNavigationExampleSections.vue

@@ -1,38 +1,32 @@
 <script setup>
+const route = useRoute()
+
 const links = [
-  [
-    {
-      label: 'Profile',
-      avatar: {
-        src: 'https://avatars.githubusercontent.com/u/739984?v=4'
-      },
-      badge: 100
-    }, {
-      label: 'Installation',
-      icon: 'i-heroicons-home',
-      to: '/getting-started/installation'
-    }, {
-      label: 'Vertical Navigation',
-      icon: 'i-heroicons-chart-bar',
-      to: '/navigation/vertical-navigation'
-    }, {
-      label: 'Command Palette',
-      icon: 'i-heroicons-command-line',
-      to: '/navigation/command-palette'
-    }
-  ],
-  [
-    {
-      label: 'Examples',
-      icon: 'i-heroicons-light-bulb',
-      to: '/getting-started/examples#verticalnavigation'
+  [{
+    label: 'Profile',
+    avatar: {
+      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
     },
-    {
-      label: 'Help',
-      icon: 'i-heroicons-question-mark-circle',
-      to: '/getting-started/examples'
-    }
-  ]
+    badge: 100
+  }, {
+    label: 'Installation',
+    icon: 'i-heroicons-home',
+    to: '/getting-started/installation'
+  }, {
+    label: 'Vertical Navigation',
+    icon: 'i-heroicons-chart-bar',
+    to: `${route.path.startsWith('/dev') ? '/dev' : ''}/navigation/vertical-navigation`
+  }, {
+    label: 'Command Palette',
+    icon: 'i-heroicons-command-line',
+    to: '/navigation/command-palette'
+  }], [{
+    label: 'Examples',
+    icon: 'i-heroicons-light-bulb'
+  }, {
+    label: 'Help',
+    icon: 'i-heroicons-question-mark-circle'
+  }]
 ]
 </script>