feat: collapsible docs (#438)

* ✨ (nav) add releases to resources

* ✨ (releases) hide releases page from nav

* ✨ (resources) update code sandbox icon

* 🐛 (aside) make aside sticky again

* 📝 (collapse) collapse docs to avoid scrolling on nav when landing

* docs: collapse get started

* fix: rename to `collapse`

Co-authored-by: Farnabaz <farnabaz@gmail.com>

docs/components/AsideBottom.vue

@@ -3,8 +3,11 @@
     <h5 class="py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100">Resources</h5>
     <ul>
       <li v-for="resource of resources" :key="resource.title">
+        <!-- Href links via `url` -->
         <a
+          v-if="!resource.to"
           :href="resource.url"
+          :to="resource.to"
           target="_blank"
           rel="noopener nofollow"
           class="flex items-center py-1.5 group dark:hover:text-gray-100 hover:text-gray-900"
@@ -13,6 +16,17 @@
           <span>{{ resource.title }}</span>
           <IconExternalLink class="w-4 h-4 ml-2 text-gray-400 opacity-0 group-hover:opacity-100" />
         </a>
+
+        <!-- Local links via `to` -->
+        <NuxtLink
+          v-else
+          :to="resource.to"
+          class="flex items-center py-1.5 group dark:hover:text-gray-100 hover:text-gray-900"
+        >
+          <Component :is="resource.icon" v-if="resource.icon" class="w-5 h-5 mr-2" :class="resource.iconClass" />
+          <span>{{ resource.title }}</span>
+          <IconExternalLink class="w-4 h-4 ml-2 text-gray-400 opacity-0 group-hover:opacity-100" />
+        </NuxtLink>
       </li>
     </ul>
   </div>
@@ -25,6 +39,11 @@ export default defineComponent({
   setup() {
     return {
       resources: [
+        {
+          title: 'Releases',
+          to: '/releases',
+          icon: 'IconGit'
+        },
         {
           title: 'NuxtJS',
           url: 'https://nuxtjs.org',

docs/components/icons/IconGit.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
+    <path
+      d="M 6 2 C 4.346 2 3 3.346 3 5 C 3 6.3016094 3.8387486 7.4021391 5 7.8164062 L 5 15 C 5 17.749516 7.2504839 20 10 20 L 11 20 L 11 21.025391 C 11 21.512391 11.588594 21.757109 11.933594 21.412109 L 13.755859 19.591797 C 14.082859 19.264797 14.082859 18.735203 13.755859 18.408203 L 11.933594 16.587891 C 11.588594 16.243891 11 16.487609 11 16.974609 L 11 18 L 10 18 C 8.3315161 18 7 16.668484 7 15 L 7 7.8164062 C 8.1612514 7.4021391 9 6.3016094 9 5 C 9 3.346 7.654 2 6 2 z M 12.357422 2.4335938 C 12.253687 2.4514844 12.152656 2.5018906 12.066406 2.5878906 L 10.244141 4.4082031 C 9.9171406 4.7352031 9.9171406 5.2647969 10.244141 5.5917969 L 12.066406 7.4121094 C 12.411406 7.7571094 13 7.5123906 13 7.0253906 L 13 6 L 14 6 C 15.668484 6 17 7.3315161 17 9 L 17 16.183594 C 15.838749 16.597861 15 17.698391 15 19 C 15 20.654 16.346 22 18 22 C 19.654 22 21 20.654 21 19 C 21 17.698391 20.161251 16.597861 19 16.183594 L 19 9 C 19 6.2504839 16.749516 4 14 4 L 13 4 L 13 2.9746094 C 13 2.6093594 12.668625 2.3799219 12.357422 2.4335938 z"
+    />
+  </svg>
+</template>

docs/content/1.get-started/0.index.md

@@ -0,0 +1,4 @@
+---
+navigation:
+  collapse: true
+---

docs/content/2.writing/0.index.md

@@ -0,0 +1,4 @@
+---
+navigation:
+  collapse: true
+---

docs/content/3.features/0.index.md

@@ -0,0 +1,4 @@
+---
+navigation:
+  collapse: true
+---

docs/content/4.theme/0.index.md

@@ -0,0 +1,4 @@
+---
+navigation:
+  collapse: true
+---

docs/content/5.templates/0.index.md

@@ -0,0 +1,5 @@
+---
+navigation:
+  collapse: true
+  redirect: /writing/my-first-page
+---

docs/content/releases.md

@@ -1,4 +1,5 @@
 ---
+navigation: false
 template: releases
 ---
 

nuxtjs.org/content/0.docs/1.get-started/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: false
+  collapse: false
   redirect: /docs/get-started/installation
 ---

nuxtjs.org/content/0.docs/2.concepts/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /docs/concepts/views
 ---

nuxtjs.org/content/0.docs/3.features/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /docs/features/rendering-modes
 ---

nuxtjs.org/content/0.docs/4.directory-structure/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /docs/directory-structure/nuxt
 ---

nuxtjs.org/content/0.docs/5.configuration-glossary/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /docs/configuration-glossary/configuration-alias
 ---

nuxtjs.org/content/0.docs/6.internals-glossary/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /docs/internals-glossary/context
 ---

nuxtjs.org/content/0.docs/7.components-glossary/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /docs/components-glossary/fetch
 ---

nuxtjs.org/content/0.docs/8.deployment/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /docs/deployment/21yunbox
 ---

nuxtjs.org/content/1.examples/1.routing/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: false
+  collapse: false
   redirect: /examples/routing/hello-world
 ---

nuxtjs.org/content/1.examples/10.modules/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/modules/local
 ---

nuxtjs.org/content/1.examples/2.data-fetching/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/data-fetching/async-data
 ---

nuxtjs.org/content/1.examples/3.assets-management/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/assets-management/pre-processors
 ---

nuxtjs.org/content/1.examples/4.transitions/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/transitions/transitions
 ---

nuxtjs.org/content/1.examples/5.seo/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/seo/html-head
 ---

nuxtjs.org/content/1.examples/6.loading/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/loading/customize-nuxt-loading
 ---

nuxtjs.org/content/1.examples/7.miscellaneous/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/miscellaneous/layouts
 ---

nuxtjs.org/content/1.examples/8.middlewares/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/middlewares/router
 ---

nuxtjs.org/content/1.examples/9.plugins/index.md

@@ -1,5 +1,5 @@
 ---
 navigation:
-  collapsed: true
+  collapse: true
   redirect: /examples/plugins/vue
 ---

src/defaultTheme/components/atoms/icons/IconCodeSandbox.vue

@@ -2,7 +2,7 @@
   <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296">
     <path
       d="M115.498 261.088v-106.61L23.814 101.73v60.773l41.996 24.347v45.7l49.688 28.54zm23.814.627l50.605-29.151V185.78l42.269-24.495v-60.011l-92.874 53.621v106.82zm80.66-180.887l-48.817-28.289l-42.863 24.872l-43.188-24.897l-49.252 28.667l91.914 52.882l92.206-53.235zM0 222.212V74.495L127.987 0L256 74.182v147.797l-128.016 73.744L0 222.212z"
-      fill="#000"
+      fill="currentColor"
     />
   </svg>
 </template>

src/defaultTheme/components/molecules/AsideNavigation.vue

@@ -9,7 +9,7 @@
       overflow-auto
       pointer-events-auto
       min-h-fill-available
-      lg:sticky lg:top-header lg:w-60 lg:max-h-[400vh]
+      lg:h-screen lg:sticky lg:top-header lg:w-60
     "
   >
     <div class="w-auto h-full overflow-auto bg-white dark:bg-gray-900 dark:lg:bg-transparent lg:bg-transparent">
@@ -64,7 +64,7 @@
                 :key="link.navigation.title"
                 :title="link.navigation.title"
                 :docs="link.children"
-                :collapsed="link.navigation.collapsed"
+                :collapse="link.navigation.collapse"
               />
               <AsideNavigationItem v-else :key="link.navigation.title" :docs="[link]" />
             </template>

src/defaultTheme/components/molecules/AsideNavigationItem.vue

@@ -4,11 +4,11 @@
       v-if="title"
       class="py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100"
       :class="[isActive ? '' : 'hover:text-gray-600 dark:hover:text-gray-400']"
-      @click="collapse"
+      @click="toggle"
     >
       {{ title }}
     </h5>
-    <ul v-if="!isCollapse || isActive" class="mb-2 ml-2">
+    <ul v-if="!isCollapsed || isActive" class="mb-2 ml-2">
       <li v-for="doc of docs" :key="doc.to">
         <NuxtLink
           :to="$contentLocalePath(doc.navigation.redirect || doc.to)"
@@ -62,24 +62,24 @@ export default defineComponent({
       type: Array,
       required: true
     },
-    collapsed: {
+    collapse: {
       type: Boolean,
       default: false
     }
   },
   setup(props) {
     const { $docus } = useContext()
 
-    const isCollapse = ref(props.collapsed)
+    const isCollapsed = ref(props.collapse)
 
     const isActive = computed(() => props.docs.some(document => $docus.isLinkActive(document.to)))
 
-    const collapse = () => {
+    const toggle = () => {
       if (isActive.value) {
         return
       }
 
-      isCollapse.value = !isCollapse.value
+      isCollapsed.value = !isCollapsed.value
     }
 
     const isDocumentNew = document => {
@@ -95,9 +95,9 @@ export default defineComponent({
     }
 
     return {
-      collapse,
+      toggle,
       isActive,
-      isCollapse,
+      isCollapsed,
       isDocumentNew
     }
   }

src/types/core.ts

@@ -25,7 +25,7 @@ export interface NavItemNavigationConfig {
   nested: boolean
   slot: string
   exclusive: boolean
-  // Collapsed aside navigation by default
+  // Collapse aside navigation by default
   collapse: boolean
   // Useful for directories `index.md` which are empty pages, to get redirect to another page
   redirect: string