dropdown - init

Author: ulivz

docs/.vuepress/config.js

@@ -25,7 +25,22 @@ module.exports = {
       {
         text: 'Default Theme Config',
         link: '/default-theme-config/'
-      }
+      },
+      {
+        text: 'Dropdown Test',
+        type: 'dropdown',
+        items: [
+          {
+            text: 'item1',
+            link: '/dropdown-test/'
+          },
+          {
+            text: 'item1',
+            link: '/dropdown-test/'
+          }
+        ],
+        link: '/dropdown-test/'
+      },
     ],
     sidebar: {
       '/guide/': [

lib/default-theme/NavLinks.vue

@@ -1,11 +1,26 @@
 <template>
   <nav class="nav-links" v-if="userLinks.length || githubLink">
     <!-- user links -->
-    <router-link v-for="item in userLinks"
-      :to="item.link"
-      :key="item.link">
-      {{ item.text }}
-    </router-link>
+    <div class="nav-item" v-for="item in userLinks" :key="item.link">
+      <div
+          v-if="item.type === 'dropdown'"
+          class="nav-dropdown-wrapper">
+        <span>{{ item.text }}</span>
+        <ul class="nav-dropdown">
+          <li v-for="subItem in item.items">
+            <router-link
+                :to="subItem.link">
+              {{ subItem.text }}
+            </router-link>
+          </li>
+        </ul>
+      </div>
+      <router-link
+          v-else
+          :to="item.link">
+        {{ item.text }}
+      </router-link>
+    </div>
     <!-- github link -->
     <a v-if="githubLink"
       :href="githubLink"
@@ -26,9 +41,11 @@ export default {
   components: { OutboundLink },
   computed: {
     userLinks () {
-      return (this.$site.themeConfig.nav || []).map(item => ({
-        text: item.text,
-        link: ensureExt(item.link)
+      return (this.$site.themeConfig.nav || []).map(({ text, link, type, items }) => ({
+        text,
+        type,
+        link: ensureExt(link),
+        items: (items || []).map(({ text, link }) => ({ text, link: ensureExt(link) }))
       }))
     },
     githubLink () {
@@ -52,12 +69,52 @@ export default {
 .nav-links
   display inline-block
   a
-    color inherit
-    font-weight 500
     line-height 1.25rem
-    margin-left 1.5rem
+    color inherit
     &:hover, &.router-link-active
       color $accentColor
+  .github-link
+    margin-left 1.5rem
+  .nav-item
+    position relative
+    display inline-block
+    margin-left 1.5rem
+    font-weight 500
+    line-height 2rem
+    .nav-dropdown-wrapper
+      cursor pointer
+      padding-right 15px
+      &:after
+        content: ''
+        position absolute
+        right: 0px
+        top: calc(50% - 2px)
+        display block
+        border-left: 4px solid transparent
+        border-right: 4px solid transparent
+        border-top: 5px solid #ccc
+      &:hover
+        .nav-dropdown
+          display: block
+      .nav-dropdown
+        display: none
+        box-sizing: border-box;
+        max-height: calc(100vh - 2.7rem)
+        overflow-y: auto
+        position: absolute
+        top: 100%
+        right: 0
+        background-color: #fff
+        padding: 10px 0
+        border: 1px solid #ddd
+        border-bottom-color: #ccc
+        text-align: left
+        border-radius: 0.25rem
+        white-space: nowrap
+        margin 0
+        & > li
+          line-height 1.7rem
+          padding: 0 1.5rem 0 1.25rem;
 
 @media (max-width: $MQMobile)
   .nav-links a