From 6e40e11f333c571507f9d205627160f0a489e991 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pooya@pi0.io>
Date: Fri, 23 Feb 2024 13:35:27 +0100
Subject: [PATCH] refactor: improve nav and design

---
 app/components/AppHeader.vue       | 44 ++++++++++++++----------------
 app/components/NavigationTree.vue  | 22 ---------------
 app/components/global/ReadMore.vue |  2 +-
 app/layouts/docs.vue               |  9 ++++--
 app/pages/[...slug].vue            |  8 ++++--
 app/pages/index.vue                |  2 +-
 app/utils/label.ts                 |  9 ------
 app/utils/nav.ts                   | 36 ++++++++++++++++++++++++
 app/utils/title.ts                 |  9 ++++++
 9 files changed, 79 insertions(+), 62 deletions(-)
 delete mode 100644 app/components/NavigationTree.vue
 delete mode 100644 app/utils/label.ts
 create mode 100644 app/utils/nav.ts
 create mode 100644 app/utils/title.ts

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index acc98de..c7ca2ae 100644
--- a/app/components/AppHeader.vue
+++ b/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>
diff --git a/app/components/NavigationTree.vue b/app/components/NavigationTree.vue
deleted file mode 100644
index a93bf98..0000000
--- a/app/components/NavigationTree.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { NavItem } from '@nuxt/content/dist/runtime/types'
-
-const navigation = inject<Ref<NavItem[]>>('navigation')
-
-const navigationLinks = computed(() => {
-  return mapContentNavigation(navigation.value).map((item) => {
-    if (item.children?.length === 1) {
-      return {
-        ...item,
-        ...item.children[0],
-        children: undefined,
-      }
-    }
-    return item
-  })
-})
-</script>
-
-<template>
-  <UNavigationTree :links="navigationLinks" default-open :multiple="false" />
-</template>
diff --git a/app/components/global/ReadMore.vue b/app/components/global/ReadMore.vue
index 1f90e2d..13a582b 100644
--- a/app/components/global/ReadMore.vue
+++ b/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,
diff --git a/app/layouts/docs.vue b/app/layouts/docs.vue
index 4aa8a0d..1717a12 100644
--- a/app/layouts/docs.vue
+++ b/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 />
diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
index d5b5ae4..57a8720 100644
--- a/app/pages/[...slug].vue
+++ b/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">
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 33b8fa5..89caae1 100644
--- a/app/pages/index.vue
+++ b/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,
diff --git a/app/utils/label.ts b/app/utils/label.ts
deleted file mode 100644
index 83d7e9b..0000000
--- a/app/utils/label.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { trainCase } from 'scule'
-
-export function toLabel(key: string) {
-  let label = trainCase(key).replaceAll('-', ' ')
-  if (label === 'Api') {
-    label = 'API'
-  }
-  return label
-}
diff --git a/app/utils/nav.ts b/app/utils/nav.ts
new file mode 100644
index 0000000..800f396
--- /dev/null
+++ b/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,
+  })
+}
diff --git a/app/utils/title.ts b/app/utils/title.ts
new file mode 100644
index 0000000..1c180e9
--- /dev/null
+++ b/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
+}