1 files changed, 94 insertions, 0 deletions
diff --git a/docs/components/app/AppHeaderNavigation.vue b/docs/components/app/AppHeaderNavigation.vue
new file mode 100644
index 0000000..6f3ea91
--- /dev/null
+++ b/docs/components/app/AppHeaderNavigation.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const route = useRoute()
+const { navBottomLink } = useContentHelpers()
+const { navigation } = useContent()
+const { config } = useDocus()
+
+const hasNavigation = computed(() => !!config.value.aside?.level)
+
+const filtered = computed(() => config.value.header?.exclude || [])
+
+const tree = computed(() => {
+  return (navigation.value || []).filter((item: any) => {
+    if (filtered.value.includes(item._path as never)) { return false }
+    return true
+  })
+})
+
+const isActive = (link: any) => (link.exact ? route.fullPath === link._path : route.fullPath.startsWith(link._path))
+</script>
+
+<template>
+  <nav v-if="hasNavigation">
+    <ul>
+      <li
+        v-for="link in tree"
+        :key="link._path"
+      >
+        <NuxtLink
+          class="link"
+          :to="link.redirect? link.redirect : navBottomLink(link)"
+          :class="{ active: isActive(link) }"
+        >
+          <Icon v-if="link.icon && config?.header?.showLinkIcon" :name="link.icon" />
+          {{ link.title }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style scoped lang="ts">
+css({
+  nav: {
+    display: 'none',
+    '@lg': {
+      display: 'block'
+    },
+    ul: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: '1',
+      maxWidth: '100%',
+      truncate: true,
+
+      '& > * + *': {
+        marginLeft: '{space.2}'
+      },
+
+      li: {
+        display: 'inline-flex',
+        gap: '{space.1}',
+      },
+
+      '.link': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '{space.2}',
+        padding: '{space.2} {space.4}',
+        fontSize: '{fontSize.sm}',
+        borderRadius: '{radii.md}',
+        outline: 'none',
+        transition: 'background 200ms ease',
+
+        svg: {
+          display: 'inline-block'
+        },
+
+        '&:active,&.active,&:hover': {
+          backgroundColor: '{color.gray.100}',
+          '@dark': {
+            backgroundColor: '{color.gray.900}',
+          },
+        },
+
+        '&.active': {
+          boxShadow: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+          fontWeight: '{fontWeight.semibold}'
+        }
+      }
+    }
+  }
+})
+</style>