implement nested links in dropdown

vuejs · Apr 14, 2018 · 6c9e1a4 · 6c9e1a4
1 parent 94c2236
commit 6c9e1a4
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 18 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -47,6 +47,79 @@ module.exports = {
             link: '/',
           },
         ]
+      },
+      {
+        text: 'Ecosystem',
+        items: [
+          {
+            text: 'Help',
+            items: [
+              {
+                text: 'Forum',
+                link: 'https://forum.vuejs.org/'
+              },
+              {
+                text: 'Chat',
+                link: 'https://chat.vuejs.org/'
+              }
+            ]
+          },
+          {
+            text: 'Tooling',
+            items: [
+              {
+                text: 'Devtools',
+                link: 'https://github.com/vuejs/vue-devtools'
+              },
+              {
+                text: 'Webpack Template',
+                link: 'https://vuejs-templates.github.io/webpack'
+              },
+              {
+                text: 'Vue Loader',
+                link: 'https://vue-loader.vuejs.org'
+              }
+            ]
+          },
+          {
+            text: 'News',
+            items: [
+              {
+                text: 'Weekly News',
+                link: 'https://news.vuejs.org'
+              },
+              {
+                text: 'Roadmap',
+                link: 'https://github.com/vuejs/roadmap'
+              },
+              {
+                text: 'Twitter',
+                link: 'https://twitter.com/vuejs'
+              },
+              {
+                text: 'Blog',
+                link: 'https://medium.com/the-vue-point'
+              },
+              {
+                text: 'Jobs',
+                link: 'https://vuejobs.com/?ref=vuejs'
+              }
+            ]
+          },
+          {
+            text: 'Resource Lists',
+            items: [
+              {
+                text: 'Vue Curated',
+                link: 'ttps://curated.vuejs.org/'
+              },
+              {
+                text: 'Awesome Vue',
+                link: 'https://github.com/vuejs/awesome-vue'
+              }
+            ]
+          }
+        ]
       }
     ],
     sidebar: {

diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
@@ -1,26 +1,31 @@
 <template>
   <router-link
     class="router-link"
-    :to="item.link"
-    v-if="!isExternal(item.link)"
+    :to="link"
+    v-if="!isExternal(link)"
     exact
   >{{ item.text }}</router-link>
   <a
     v-else
-    :href="item.link"
+    :href="link"
     target="_blank"
     class="router-link"
   >{{ item.text }}</a>
 </template>
 
 <script>
-  import { isExternal } from './util'
+  import { isExternal, ensureExt } from './util'
   export default {
     props: {
       item: {
         required: true
       }
     },
+    computed: {
+      link() {
+        return ensureExt(this.item.link)
+      }
+    },
     methods: {
       isExternal
     }

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
@@ -6,15 +6,23 @@
       v-for="item in userLinks"
       :key="item.link">
       <div
-        v-if="item.type === 'dropdown'"
+        v-if="item.type === 'links'"
         class="dropdown-wrapper">
         <span class="dropdown-title">{{ item.text }}</span>
         <span class="arrow"></span>
         <ul class="nav-dropdown">
           <li
             v-for="subItem in item.items"
             :key="subItem.link">
-            <nav-link :item="subItem"></nav-link>
+            <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+            <ul v-if="subItem.type === 'links'">
+              <li
+                v-for="childSubItem in subItem.items"
+                :key="childSubItem.link">
+                <nav-link :item="childSubItem"></nav-link>
+              </li>
+            </ul>
+            <nav-link v-else :item="subItem"></nav-link>
           </li>
         </ul>
       </div>
@@ -35,17 +43,16 @@
 <script>
 import OutboundLink from './OutboundLink.vue'
 import NavLink from './NavLink.vue'
-import { isActive, ensureExt } from './util'
+import { isActive, resolveNavLinkItem } from './util'
 
 export default {
   components: { OutboundLink, NavLink },
   computed: {
     userLinks () {
-      return (this.$site.themeConfig.nav || []).map(({ text, link, type, items }) => ({
-        text,
-        type,
-        link: link ? ensureExt(link) : null,
-        items: (items || []).map(({ text, link }) => ({ text, link: ensureExt(link) }))
+      return (this.$site.themeConfig.nav || []).map((link => {
+        return Object.assign(resolveNavLinkItem(link), {
+          items: (link.items || []).map(resolveNavLinkItem)
+        })
       }))
     },
     githubLink () {
@@ -81,7 +88,6 @@ export default {
     line-height 2rem
     .dropdown-wrapper
       cursor pointer
-      padding-right 15
       &:hover .nav-dropdown
           display block
       .arrow
@@ -98,12 +104,15 @@ export default {
         li
           color inherit
           line-height 1.7rem
-          padding 0 1.5rem 0 1.25rem
           a
+            display block
+            height 1.7rem
+            line-height 1.7rem
             position relative
             border-bottom none
             font-weight 400
             margin-bottom 0
+            padding 0 1.5rem 0 1.25rem
             &:hover
               color $accentColor
             &.router-link-active
@@ -117,7 +126,18 @@ export default {
                 border-bottom 4px solid transparent
                 position absolute
                 top calc(50% - 3px)
-                left -10px
+                left 10px
+          &:first-child h4
+            margin-top: 0;
+            padding-top: 0;
+            border-top: 0;
+          & > h4
+            margin 0.45rem 0 0
+            border-top 1px solid #eee
+            padding 0.45rem 1.5rem 0 1.25rem
+          & > ul
+            padding 0
+            list-style none
   .github-link
     margin-left 1.5rem
 

diff --git a/lib/default-theme/Sidebar.vue b/lib/default-theme/Sidebar.vue
@@ -91,9 +91,16 @@ function resolveOpenGroupIndex (route, items) {
       .dropdown-title
         display inline-block
         margin-bottom 5px
-      .nav-dropdown li
-        font-size 15px
-        line-height 1.7rem
+      .nav-dropdown
+        li, h4
+          font-size 15px
+          line-height 1.7rem
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        ul > li
+          padding-left 1rem
   .sidebar-links
     margin-top 1.5rem
 

diff --git a/lib/default-theme/util.js b/lib/default-theme/util.js
@@ -151,6 +151,12 @@ export function groupHeaders (headers) {
   return headers.filter(h => h.level === 2)
 }
 
+export function resolveNavLinkItem (linkItem) {
+  return Object.assign(linkItem, {
+    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
+  })
+}
+
 function resolveMatchingSidebarConfig (route, sidebarConfig) {
   if (Array.isArray(sidebarConfig)) {
     return {