feat: basic navigation dropdown

Author: antfu

components/ContentNavItem.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content/dist/runtime/types'
+
+const props = defineProps<{
+  item: NavItem
+}>()
+
+const ui = useUiState()
+
+const resolved = computed(() => {
+  if (props.item.children?.length === 1)
+    return props.item.children[0]
+  return props.item
+})
+</script>
+
+<template>
+  <div px1 py0.5 class="content-nav-item">
+    <template v-if="resolved.children?.length">
+      <details>
+        <summary>
+          <div flex="~ gap-1 items-center" cursor-pointer select-none>
+            <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>
+      </details>
+    </template>
+    <NuxtLink
+      v-else :to="resolved._path"
+      flex="~ gap-1 items-center"
+      hover="text-primary"
+      @click="ui.isContentDropdownShown = false"
+    >
+      <div i-ph-caret-right-duotone class="caret" text-sm op0 />
+      <div i-ph-file-duotone />
+      <div ml1>
+        {{ resolved.title }}
+      </div>
+    </NuxtLink>
+  </div>
+</template>
+
+<style>
+.content-nav-item details summary {
+  list-style-type: none;
+}
+
+.content-nav-item details[open] .caret {
+  transform: rotate(90deg);
+}
+</style>

components/PanelDocs.vue

@@ -1,22 +1,42 @@
 <script setup lang="ts">
 const { page } = useContent()
+const ui = useUiState()
 
 const sourceUrl = computed(() => page.value?._file
   ? `https://github.com/nuxt/learn.nuxt.com/edit/main/content/${page.value._file}`
   : undefined)
+
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 </script>
 
 <template>
-  <div h-full grid="~ rows-[min-content_1fr_min-content]">
-    <div flex="~ gap-2 items-center" border="b base dashed" bg-faded px4 py2>
+  <div grid="~ rows-[min-content_1fr_min-content]" relative h-full>
+    <button
+      flex="~ gap-2 items-center" border="b base dashed" bg-faded px4 py2
+      @click="ui.isContentDropdownShown = !ui.isContentDropdownShown"
+    >
       <div i-ph-book-duotone />
       <NuxtLink to="/" text-sm>
         Guide
       </NuxtLink>
+      <div flex-auto />
+      <div i-ph-caret-down-duotone text-sm op50 transition duration-400 :class="ui.isContentDropdownShown ? 'rotate-180' : ''" />
+    </button>
+    <div relative h-full of-hidden>
+      <article class="max-w-none prose" h-full of-auto p6>
+        <ContentDoc />
+      </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>
     </div>
-    <article class="max-w-none prose" of-auto p6>
-      <ContentDoc />
-    </article>
     <div border="t base dashed" px6 py2>
       <NuxtLink
         v-if="sourceUrl"

content/index.md renamed to content/0.index.md

@@ -1,5 +1,6 @@
 export const useUiState = defineStore('ui', () => {
   const isPanelDragging = ref(false)
+  const isContentDropdownShown = ref(false)
 
   const persistState = reactive(getLayoutDefaults())
 
@@ -44,6 +45,7 @@ export const useUiState = defineStore('ui', () => {
 
   return {
     isPanelDragging,
+    isContentDropdownShown,
     toggleTerminal,
     resetLayout,
     ...toRefs(persistState),