fix: improve navigation

Author: antfu

components/ContentNavItem.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types'
 
-const props = defineProps<{
-  item: NavItem
-}>()
+const props = withDefaults(
+  defineProps<{
+    item: NavItem
+    level: number
+  }>(),
+  {
+    level: 0,
+  },
+)
 
 const ui = useUiState()
 
@@ -12,30 +18,42 @@ const resolved = computed(() => {
     return props.item.children[0]
   return props.item
 })
+
+const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
 </script>
 
 <template>
-  <div px1 py0.5 class="content-nav-item">
+  <div class="content-nav-item">
     <template v-if="resolved.children?.length">
       <details>
         <summary>
-          <div flex="~ gap-1 items-center" cursor-pointer select-none>
+          <div
+            flex="~ gap-1 items-center" cursor-pointer select-none px1 py0.5
+            hover="text-primary bg-active"
+            :style="{ paddingLeft }"
+          >
             <div class="caret" i-ph-caret-right-duotone text-sm op50 transition duration-400 />
             <div i-ph-folder-simple-duotone />
             <div ml1>
               {{ resolved.title }}
             </div>
           </div>
         </summary>
-        <div v-if="resolved.children?.length" pl-2>
-          <ContentNavItem v-for="child in resolved.children" :key="child.url" :item="child" />
+        <div v-if="resolved.children?.length">
+          <ContentNavItem
+            v-for="child in resolved.children"
+            :key="child.url" :item="child" :level="props.level + 1"
+          />
         </div>
       </details>
     </template>
     <NuxtLink
-      v-else :to="resolved._path"
+      v-else
+      :to="resolved._path"
+      px1 py0.5
+      :style="{ paddingLeft }"
       flex="~ gap-1 items-center"
-      hover="text-primary"
+      hover="text-primary bg-active "
       @click="ui.isContentDropdownShown = false"
     >
       <div i-ph-caret-right-duotone class="caret" text-sm op0 />

components/PanelDocs.vue

@@ -67,7 +67,7 @@ const sourceUrl = computed(() => page.value?._file
       <div i-ph-book-duotone />
       <template v-for="bc, idx of breadcrumbs" :key="bc.path">
         <div v-if="idx !== 0" i-ph-caret-right mx--1 text-sm op50 />
-        <NuxtLink :to="bc.path" text-sm hover="underline underline-dashed text-primary">
+        <NuxtLink :to="bc.path" text-sm hover="text-primary">
           {{ bc.title }}
         </NuxtLink>
       </template>
@@ -109,15 +109,17 @@ const sourceUrl = computed(() => page.value?._file
         </div>
       </article>
       <!-- Navigration Dropdown -->
-      <div
-        v-if="ui.isContentDropdownShown"
-        flex="~ col"
-        border="b base"
-        absolute left-0 right-0 top-0 max-h-60vh py2
-        backdrop-blur-10 bg-base important-bg-opacity-80
-      >
-        <ContentNavItem v-for="item in navigation" :key="item.url" :item="item" />
-      </div>
+      <Transition name="nav-dropdown">
+        <div
+          v-if="ui.isContentDropdownShown"
+          flex="~ col"
+          border="b base"
+          absolute left-0 right-0 top-0 max-h-60vh py2
+          backdrop-blur-10 bg-base important-bg-opacity-80
+        >
+          <ContentNavItem v-for="item in navigation" :key="item.url" :item="item" />
+        </div>
+      </Transition>
     </div>
     <div border="t base dashed" px6 py2>
       <NuxtLink
@@ -131,3 +133,19 @@ const sourceUrl = computed(() => page.value?._file
     </div>
   </div>
 </template>
+
+<style>
+.nav-dropdown-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.nav-dropdown-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.nav-dropdown-enter-from,
+.nav-dropdown-leave-to {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+</style>