refactor: improve nav and design

app/components/AppHeader.vue

@@ -7,23 +7,15 @@ const appConfig = useAppConfig()
 
 const { metaSymbol } = useShortcuts()
 
-const route = useRoute()
-
-const navLinks = computed(() => {
-  // console.log(mapContentNavigation(navigation.value))
-  // console.log(JSON.parse(JSON.stringify(navigation.value, null, 2)))
-  return navigation.value
-    .map((nav) => {
-      if (!nav.children?.find((c) => c._path === nav._path)) {
-        return
-      }
-      return {
-        label: toLabel(nav._path.substring(1)),
-        to: nav._path,
-        active: route.path.startsWith(nav._path),
-      }
-    })
-    .filter(Boolean)
+const docsNav = useDocsNav()
+
+const headerLinks = computed(() => {
+  return docsNav.links.map((link) => {
+    return {
+      ...link,
+      children: link.children?.filter((child) => !child.children || child.children.some((c) => c.to === child.to)),
+    }
+  })
 })
 </script>
 
@@ -36,26 +28,30 @@ const navLinks = computed(() => {
           {{ appConfig.site.name }}
         </span>
       </NuxtLink>
-    </template>
 
-    <template #center>
-      <UContentSearchButton label="Search..." class="hidden lg:flex" />
+      <div class="ml-8 lg:flex hidden">
+        <UContentSearchButton label="Search..." />
+      </div>
     </template>
 
+    <!-- <template #center>
+      <UContentSearchButton label="Search..." class="lg:flex hidden" />
+    </template> -->
+
     <template #right>
-      <UHeaderLinks :links="navLinks" class="hidden sm:flex mr-4" v-if="navLinks.length > 1" />
+      <UHeaderLinks :links="headerLinks" class="hidden md:flex mr-4" v-if="docsNav.links.length > 1" />
 
       <UTooltip class="lg:hidden" text="Search" :shortcuts="[metaSymbol, 'K']">
         <UContentSearchButton :label="null" />
       </UTooltip>
 
-      <!-- <ColorPicker /> -->
+      <ColorPicker />
 
-      <SocialButtons :socials="['github']" />
+      <SocialButtons />
     </template>
 
     <template #panel>
-      <NavigationTree />
+      <UNavigationTree :links="docsNav.links" default-open :multiple="false" />
     </template>
   </UHeader>
 </template>

app/components/global/ReadMore.vue

@@ -16,7 +16,7 @@ import { splitByCase, upperFirst } from 'scule'
 const props = defineProps({
   to: {
     type: String,
-    required: true,
+    required: false,
   },
   title: {
     type: String,

app/layouts/docs.vue

@@ -1,11 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const docsNav = useDocsNav()
+</script>
 
 <template>
   <UContainer>
     <UPage>
       <template #left>
-        <UAside>
-          <NavigationTree />
+        <UAside :links="docsNav.links">
+          <UDivider type="dashed" class="mb-6" v-if="docsNav.activeLinks?.length" />
+          <UNavigationTree :links="docsNav.activeLinks" />
         </UAside>
       </template>
       <slot />

app/pages/[...slug].vue

@@ -68,9 +68,11 @@ onMounted(() => {
     <UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline">
     </UPageHeader>
 
-    <div class="float-right mt-4 top-[calc(var(--header-height)_+_0.5rem)] z-10 flex justify-end sticky">
+    <div
+      v-if="tocLinks.length > 1"
+      class="float-right mt-4 top-[calc(var(--header-height)_+_0.5rem)] z-10 flex justify-end sticky"
+    >
       <UDropdown
-        v-if="tocLinks.length > 2"
         :items="[[{ label: 'Return to top', click: scrollToTop }], tocLinks]"
         :popper="{ placement: 'bottom-end' }"
         :mode="isMobile ? 'click' : 'hover'"
@@ -86,6 +88,8 @@ onMounted(() => {
     </div>
 
     <UPageBody prose>
+      <br v-if="tocLinks.length > 1" />
+
       <ContentRenderer v-if="page.body" :value="page" />
 
       <div class="space-y-6">

app/pages/index.vue

@@ -38,7 +38,7 @@ function nornalizeHeroLinks(links: LandingConfig['heroLinks']) {
         link = { to: link }
       }
       return {
-        label: toLabel(key),
+        label: titleCase(key),
         order,
         target: link.to?.startsWith('https') ? '_blank' : undefined,
         ...link,

app/utils/nav.ts

@@ -0,0 +1,36 @@
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+export function useDocsNav() {
+  const navigation = inject<Ref<NavItem[]>>('navigation')
+
+  const route = useRoute()
+
+  const isActive = (path: string) => route.path.startsWith(path)
+
+  const links = computed(() => {
+    return mapContentNavigation(navigation.value).map((item) => {
+      if (item.children?.length === 1) {
+        return {
+          ...item,
+          ...item.children[0],
+          children: undefined,
+          active: isActive(item.to as string),
+        }
+      }
+      return {
+        ...item,
+        label: titleCase(item.to),
+        active: isActive(item.to as string),
+      }
+    })
+  })
+
+  const activeLinks = computed(() => {
+    return links.value.find((l) => route.path.startsWith(l.to as string))?.children || []
+  })
+
+  return reactive({
+    links,
+    activeLinks,
+  })
+}

app/utils/title.ts

@@ -0,0 +1,9 @@
+import { titleCase as _titleCase } from 'scule'
+
+export function titleCase(key: string) {
+  let label = _titleCase(key)
+  if (label === 'Api') {
+    label = 'API'
+  }
+  return label
+}