feat(HorizontalNavigation): new component (#1279)

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>