From 0494566e278f8ee03ece2fdf4640cf746f7ebe73 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 14 Apr 2018 16:42:38 +0800
Subject: [PATCH 01/21] dropdown - init

---
 docs/.vuepress/config.js       | 17 +++++++-
 lib/default-theme/NavLinks.vue | 79 +++++++++++++++++++++++++++++-----
 2 files changed, 84 insertions(+), 12 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 9cece56a58..25d03da61c 100644
--- a/docs/.vuepress/config.js
+++ b/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/': [
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index ea108bdb8f..2782429727 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/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

From 121e6cabec46eea1f138c849e0c0cb743d490aa3 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 14 Apr 2018 17:56:11 +0800
Subject: [PATCH 02/21] add nav link component to distinguish internal and
 external link

---
 docs/.vuepress/config.js       |  13 ++---
 lib/default-theme/NavLink.vue  |  33 +++++++++++
 lib/default-theme/NavLinks.vue | 103 ++++++++++++++++++---------------
 lib/default-theme/Sidebar.vue  |   5 +-
 lib/default-theme/util.js      |   6 +-
 5 files changed, 101 insertions(+), 59 deletions(-)
 create mode 100644 lib/default-theme/NavLink.vue

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 25d03da61c..9e72001e5a 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -27,20 +27,15 @@ module.exports = {
         link: '/default-theme-config/'
       },
       {
-        text: 'Dropdown Test',
+        text: 'Links',
         type: 'dropdown',
         items: [
           {
-            text: 'item1',
-            link: '/dropdown-test/'
-          },
-          {
-            text: 'item1',
-            link: '/dropdown-test/'
+            text: 'Vue',
+            link: 'https://vuejs.org/',
           }
         ],
-        link: '/dropdown-test/'
-      },
+      }
     ],
     sidebar: {
       '/guide/': [
diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
new file mode 100644
index 0000000000..2b03b3d4f7
--- /dev/null
+++ b/lib/default-theme/NavLink.vue
@@ -0,0 +1,33 @@
+<template>
+  <router-link
+    class="router-link"
+    :to="item.link"
+    v-if="!isExternal(item.link)">
+    {{ item.text }}
+  </router-link>
+  <a
+    v-else
+    :href="item.link"
+    target="_blank"
+    class="router-link">
+    {{ item.text }}
+  </a>
+</template>
+
+<script>
+  import { isExternal } from './util'
+  export default {
+    props: {
+      item: {
+        required: true
+      }
+    },
+    mixins: [
+      {
+        methods: {
+          isExternal
+        }
+      }
+    ]
+  }
+</script>
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index 2782429727..e4a3fb08b1 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -3,23 +3,19 @@
     <!-- user links -->
     <div class="nav-item" v-for="item in userLinks" :key="item.link">
       <div
-          v-if="item.type === 'dropdown'"
-          class="nav-dropdown-wrapper">
+        v-if="item.type === 'dropdown'"
+        class="nav-dropdown-wrapper">
         <span>{{ item.text }}</span>
+        <span class="arrow"></span>
         <ul class="nav-dropdown">
-          <li v-for="subItem in item.items">
-            <router-link
-                :to="subItem.link">
-              {{ subItem.text }}
-            </router-link>
+          <li
+            v-for="subItem in item.items"
+            :key="subItem.link">
+            <nav-link  :item="subItem"></nav-link>
           </li>
         </ul>
       </div>
-      <router-link
-          v-else
-          :to="item.link">
-        {{ item.text }}
-      </router-link>
+      <nav-link v-else :item="item"></nav-link>
     </div>
     <!-- github link -->
     <a v-if="githubLink"
@@ -35,16 +31,17 @@
 
 <script>
 import OutboundLink from './OutboundLink.vue'
+import NavLink from './NavLink.vue'
 import { isActive, ensureExt } from './util'
 
 export default {
-  components: { OutboundLink },
+  components: { OutboundLink, NavLink },
   computed: {
     userLinks () {
       return (this.$site.themeConfig.nav || []).map(({ text, link, type, items }) => ({
         text,
         type,
-        link: ensureExt(link),
+        link: link ? ensureExt(link) : void 0,
         items: (items || []).map(({ text, link }) => ({ text, link: ensureExt(link) }))
       }))
     },
@@ -73,8 +70,6 @@ export default {
     color inherit
     &:hover, &.router-link-active
       color $accentColor
-  .github-link
-    margin-left 1.5rem
   .nav-item
     position relative
     display inline-block
@@ -84,46 +79,58 @@ export default {
     .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
+      .arrow
+        display: inline-block;
+        vertical-align: middle;
+        margin-top: -1px;
+        margin-left: 6px;
+        width: 0;
+        height: 0;
+        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
+          color inherit
           line-height 1.7rem
-          padding: 0 1.5rem 0 1.25rem;
+          padding: 0 1.5rem 0 1.25rem
+          &:hover
+            color $accentColor
+  .github-link
+    margin-left 1.5rem
 
 @media (max-width: $MQMobile)
-  .nav-links a
-    margin-left 0
+  .nav-links
+    .nav-item
+      display block
+      margin-left 0
+    .github-link
+      margin-left 0
 
 @media (min-width: $MQMobile)
-  .nav-links a
-    &:hover, &.router-link-active
-      color $textColor
-      margin-bottom -2px
-      border-bottom 2px solid lighten($accentColor, 5%)
+  .nav-links
+    a
+      &:hover, &.router-link-active
+        color $textColor
+        margin-bottom -2px
+        border-bottom 2px solid lighten($accentColor, 5%)
+    .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
 </style>
diff --git a/lib/default-theme/Sidebar.vue b/lib/default-theme/Sidebar.vue
index d8c94c1fd5..a04ee2f973 100644
--- a/lib/default-theme/Sidebar.vue
+++ b/lib/default-theme/Sidebar.vue
@@ -81,11 +81,14 @@ function resolveOpenGroupIndex (route, items) {
     display none
     border-bottom 1px solid $borderColor
     padding 0.5rem 0 0.75rem 0
-    a
+    .nav-item, .github-link, .nav-dropdown > li
       display block
+      line-height 1.25rem
       font-weight 600
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
+    .nav-item .nav-dropdown-wrapper .nav-dropdown > li
+      padding-top 10px
   .sidebar-links
     margin-top 1.5rem
 
diff --git a/lib/default-theme/util.js b/lib/default-theme/util.js
index 1ac90661c1..228e77026c 100644
--- a/lib/default-theme/util.js
+++ b/lib/default-theme/util.js
@@ -16,8 +16,12 @@ export function getHash (path) {
   }
 }
 
+export function isExternal (path) {
+  return outboundRE.test(path)
+}
+
 export function ensureExt (path) {
-  if (outboundRE.test(path)) {
+  if (isExternal(path)) {
     return path
   }
   const hashMatch = path.match(hashRE)

From 3ddca36b94e7e3178a5c1964d63393c13f92f7ef Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 14 Apr 2018 18:15:32 +0800
Subject: [PATCH 03/21] enhance the active state of dropdown link

---
 docs/.vuepress/config.js       | 16 ++++++++++++++--
 lib/default-theme/NavLinks.vue | 21 ++++++++++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 9e72001e5a..de7d0e1112 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -33,8 +33,20 @@ module.exports = {
           {
             text: 'Vue',
             link: 'https://vuejs.org/',
-          }
-        ],
+          },
+          {
+            text: 'Vue-Router',
+            link: 'https://router.vuejs.org/en/',
+          },
+          {
+            text: 'Vue-CLI',
+            link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/README.md',
+          },
+          {
+            text: 'Vue-Press',
+            link: '/',
+          },
+        ]
       }
     ],
     sidebar: {
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index e4a3fb08b1..ffd7e13d83 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -93,12 +93,27 @@ export default {
         .nav-dropdown
           display: block
       .nav-dropdown
-        & > li
+        li
           color inherit
           line-height 1.7rem
           padding: 0 1.5rem 0 1.25rem
-          &:hover
-            color $accentColor
+          a
+            position relative
+            border-bottom: none
+            &.router-link-active
+              color: $accentColor
+              &:after
+                content: ""
+                width: 0
+                height: 0
+                border-left: 5px solid $accentColor
+                border-top: 3px solid transparent
+                border-bottom: 3px solid transparent
+                position: absolute
+                top: calc(50% - 3px)
+                left: -10px
+            &:hover
+              color $accentColor
   .github-link
     margin-left 1.5rem
 

From 72be30ceea8bee00e57f8de60b979236f231d439 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 14 Apr 2018 18:38:40 +0800
Subject: [PATCH 04/21] beautify font weight for dropdown link and clean code

---
 lib/default-theme/NavLinks.vue | 73 +++++++++++++++++-----------------
 lib/default-theme/Sidebar.vue  | 11 +++--
 2 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index ffd7e13d83..e51d14c3e6 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -4,8 +4,8 @@
     <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>
+        class="dropdown-wrapper">
+        <span class="dropdown-title">{{ item.text }}</span>
         <span class="arrow"></span>
         <ul class="nav-dropdown">
           <li
@@ -76,22 +76,21 @@ export default {
     margin-left 1.5rem
     font-weight 500
     line-height 2rem
-    .nav-dropdown-wrapper
+    .dropdown-wrapper
       cursor pointer
-      padding-right 15px
+      padding-right 15
+      &:hover .nav-dropdown
+          display block
       .arrow
-        display: inline-block;
-        vertical-align: middle;
-        margin-top: -1px;
-        margin-left: 6px;
-        width: 0;
-        height: 0;
-        border-left: 4px solid transparent;
-        border-right: 4px solid transparent;
-        border-top: 5px solid #ccc;
-      &:hover
-        .nav-dropdown
-          display: block
+        display inline-block
+        vertical-align middle
+        margin-top -1px
+        margin-left 6px
+        width 0
+        height 0
+        border-left 4px solid transparent
+        border-right 4px solid transparent
+        border-top 5px solid #ccc
       .nav-dropdown
         li
           color inherit
@@ -100,19 +99,21 @@ export default {
           a
             position relative
             border-bottom: none
+            font-weight 400
             &.router-link-active
               color: $accentColor
               &:after
                 content: ""
                 width: 0
                 height: 0
-                border-left: 5px solid $accentColor
-                border-top: 3px solid transparent
-                border-bottom: 3px solid transparent
-                position: absolute
-                top: calc(50% - 3px)
-                left: -10px
+                border-left 5px solid $accentColor
+                border-top 4px solid transparent
+                border-bottom 4px solid transparent
+                position absolute
+                top calc(50% - 3px)
+                left -10px
             &:hover
+              margin-bottom 0
               color $accentColor
   .github-link
     margin-left 1.5rem
@@ -133,19 +134,19 @@ export default {
         margin-bottom -2px
         border-bottom 2px solid lighten($accentColor, 5%)
     .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
+      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
 </style>
diff --git a/lib/default-theme/Sidebar.vue b/lib/default-theme/Sidebar.vue
index a04ee2f973..40349a4ded 100644
--- a/lib/default-theme/Sidebar.vue
+++ b/lib/default-theme/Sidebar.vue
@@ -81,14 +81,19 @@ function resolveOpenGroupIndex (route, items) {
     display none
     border-bottom 1px solid $borderColor
     padding 0.5rem 0 0.75rem 0
-    .nav-item, .github-link, .nav-dropdown > li
+    .nav-item, .github-link
       display block
       line-height 1.25rem
       font-weight 600
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
-    .nav-item .nav-dropdown-wrapper .nav-dropdown > li
-      padding-top 10px
+    .nav-item .dropdown-wrapper
+      .dropdown-title
+        display inline-block
+        margin-bottom 5px
+      .nav-dropdown li
+        font-size 15px
+        line-height 1.7rem
   .sidebar-links
     margin-top 1.5rem
 

From 4bccf3aca738e977403debb22f553bb7fe41d8bd Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 14 Apr 2018 18:44:36 +0800
Subject: [PATCH 05/21] clean code

---
 lib/default-theme/NavLinks.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index e51d14c3e6..21eb0f8e0f 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -1,7 +1,10 @@
 <template>
   <nav class="nav-links" v-if="userLinks.length || githubLink">
     <!-- user links -->
-    <div class="nav-item" v-for="item in userLinks" :key="item.link">
+    <div
+      class="nav-item"
+      v-for="item in userLinks"
+      :key="item.link">
       <div
         v-if="item.type === 'dropdown'"
         class="dropdown-wrapper">
@@ -11,7 +14,7 @@
           <li
             v-for="subItem in item.items"
             :key="subItem.link">
-            <nav-link  :item="subItem"></nav-link>
+            <nav-link :item="subItem"></nav-link>
           </li>
         </ul>
       </div>
@@ -120,10 +123,7 @@ export default {
 
 @media (max-width: $MQMobile)
   .nav-links
-    .nav-item
-      display block
-      margin-left 0
-    .github-link
+    .nav-item, .github-link
       margin-left 0
 
 @media (min-width: $MQMobile)

From 5ac3c2a599a11ba632587e673a98f0e5347baef7 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 14 Apr 2018 18:52:11 +0800
Subject: [PATCH 06/21] update doc

---
 docs/default-theme-config/README.md | 19 +++++++++++++++++++
 docs/guide/README.md                |  1 -
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
index 9c6885fd9a..767bd6c538 100644
--- a/docs/default-theme-config/README.md
+++ b/docs/default-theme-config/README.md
@@ -48,6 +48,25 @@ module.exports = {
 }
 ```
 
+The item in `themeConfig.nav` could also be a dropdown menu:
+
+```js
+module.exports = {
+  themeConfig: {
+    nav: [
+      {
+        text: 'Languages', 
+        type: 'dropdown', 
+        items: [
+          { text: 'Chinese', link: '/language/chinese' },
+          { text: 'Japanese', link: '/language/japanese' }
+        ]
+      }
+    ]
+  }
+}
+```
+
 ## Sidebar
 
 To enable the sidebar, use `themeConfig.sidebar`. The basic configuration expects an Array of links:
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 663ddd9451..4a54cd14ce 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -30,7 +30,6 @@ Each markdown file is compiled into HTML with [markdown-it](https://github.com/m
 
 VuePress is still a work in progress. There are a few things that it currently does not support but are planned:
 
-- Dropdown Items in Navbar
 - Multi-Language Support
 - Algolia DocSearch Integration
 - Blogging support

From dbb7a082bc8fc55cdbe5cd36ac8442ea7f0d369a Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sat, 14 Apr 2018 20:17:34 +0800
Subject: [PATCH 07/21] update README

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index d8e6f5b6b9..5df50d75c8 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,6 @@ https://vuepress.vuejs.org/
 
 VuePress is still a work in progress. There are a few things that it currently does not support but are planned:
 
-- Dropdown Items in Navbar
 - Multi-Language Support
 - Algolia DocSearch Integration
 - Blogging support

From 50689ea13da744b0fdac8368e815fd2e6bdd7a30 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 00:53:52 +0800
Subject: [PATCH 08/21] address comments

---
 docs/default-theme-config/README.md |  2 +-
 lib/default-theme/NavLinks.vue      | 22 +++++++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
index 767bd6c538..65ebf9e66a 100644
--- a/docs/default-theme-config/README.md
+++ b/docs/default-theme-config/README.md
@@ -48,7 +48,7 @@ module.exports = {
 }
 ```
 
-The item in `themeConfig.nav` could also be a dropdown menu:
+Those links can also be dropdown menus, add nested items via `items`:
 
 ```js
 module.exports = {
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index 21eb0f8e0f..a38c0dba26 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -44,7 +44,7 @@ export default {
       return (this.$site.themeConfig.nav || []).map(({ text, link, type, items }) => ({
         text,
         type,
-        link: link ? ensureExt(link) : void 0,
+        link: link ? ensureExt(link) : null,
         items: (items || []).map(({ text, link }) => ({ text, link: ensureExt(link) }))
       }))
     },
@@ -98,26 +98,26 @@ export default {
         li
           color inherit
           line-height 1.7rem
-          padding: 0 1.5rem 0 1.25rem
+          padding 0 1.5rem 0 1.25rem
           a
             position relative
-            border-bottom: none
+            border-bottom none
             font-weight 400
+            &:hover
+              margin-bottom 0
+              color $accentColor
             &.router-link-active
-              color: $accentColor
-              &:after
-                content: ""
-                width: 0
-                height: 0
+              color $accentColor
+              &::after
+                content ""
+                width 0
+                height 0
                 border-left 5px solid $accentColor
                 border-top 4px solid transparent
                 border-bottom 4px solid transparent
                 position absolute
                 top calc(50% - 3px)
                 left -10px
-            &:hover
-              margin-bottom 0
-              color $accentColor
   .github-link
     margin-left 1.5rem
 

From 6de2efa4bb21b83f28847dab28de3489ee3dae17 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 01:21:45 +0800
Subject: [PATCH 09/21] fix jumpy link

---
 lib/default-theme/NavLinks.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index a38c0dba26..9872f34c60 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -103,8 +103,8 @@ export default {
             position relative
             border-bottom none
             font-weight 400
+            margin-bottom 0
             &:hover
-              margin-bottom 0
               color $accentColor
             &.router-link-active
               color $accentColor

From 7eb2563a9b7c1e444e38f442da0b80e97314131d Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 02:44:08 +0800
Subject: [PATCH 10/21] address comments

---
 lib/default-theme/NavLink.vue | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
index 2b03b3d4f7..ba965f9b9a 100644
--- a/lib/default-theme/NavLink.vue
+++ b/lib/default-theme/NavLink.vue
@@ -2,16 +2,14 @@
   <router-link
     class="router-link"
     :to="item.link"
-    v-if="!isExternal(item.link)">
-    {{ item.text }}
-  </router-link>
+    v-if="!isExternal(item.link)"
+  >{{ item.text }}</router-link>
   <a
     v-else
     :href="item.link"
     target="_blank"
-    class="router-link">
-    {{ item.text }}
-  </a>
+    class="router-link"
+  >{{ item.text }}</a>
 </template>
 
 <script>
@@ -22,12 +20,8 @@
         required: true
       }
     },
-    mixins: [
-      {
-        methods: {
-          isExternal
-        }
-      }
-    ]
+    methods: {
+      isExternal
+    }
   }
 </script>

From 94c2236e148f191ea8c0a0efb95149eb6783c30a Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 03:20:40 +0800
Subject: [PATCH 11/21] use exact match mode for route link

---
 lib/default-theme/NavLink.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
index ba965f9b9a..9c3a80050e 100644
--- a/lib/default-theme/NavLink.vue
+++ b/lib/default-theme/NavLink.vue
@@ -3,6 +3,7 @@
     class="router-link"
     :to="item.link"
     v-if="!isExternal(item.link)"
+    exact
   >{{ item.text }}</router-link>
   <a
     v-else

From 6c9e1a404b5326f216db906e5d8ba4612f844f72 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 06:55:48 +0800
Subject: [PATCH 12/21] implement nested links in dropdown

---
 docs/.vuepress/config.js       | 73 ++++++++++++++++++++++++++++++++++
 lib/default-theme/NavLink.vue  | 13 ++++--
 lib/default-theme/NavLinks.vue | 42 ++++++++++++++-----
 lib/default-theme/Sidebar.vue  | 13 ++++--
 lib/default-theme/util.js      |  6 +++
 5 files changed, 129 insertions(+), 18 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index de7d0e1112..751ef3ed39 100644
--- 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
index 9c3a80050e..7c912865a0 100644
--- 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
index 9872f34c60..ddc45f1d4c 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -6,7 +6,7 @@
       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>
@@ -14,7 +14,15 @@
           <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
index 40349a4ded..00dd33518a 100644
--- 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
index 228e77026c..f89ea8a3f1 100644
--- 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 {

From 5ca1d021a6d241f0ccc3368ff87e292430d96e50 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 07:04:38 +0800
Subject: [PATCH 13/21] clean dropdown type

---
 docs/.vuepress/config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 751ef3ed39..e6955c1044 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -28,7 +28,6 @@ module.exports = {
       },
       {
         text: 'Links',
-        type: 'dropdown',
         items: [
           {
             text: 'Vue',

From 7c6d462b71cbfd9b12fd70335a523af412ad2f01 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 07:04:56 +0800
Subject: [PATCH 14/21] fix cursor status

---
 lib/default-theme/NavLinks.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index ddc45f1d4c..148eaa443d 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -87,7 +87,6 @@ export default {
     font-weight 500
     line-height 2rem
     .dropdown-wrapper
-      cursor pointer
       &:hover .nav-dropdown
           display block
       .arrow

From 96c30c5a7678afb28cf306ae957b73412f479610 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Sun, 15 Apr 2018 12:35:50 +0800
Subject: [PATCH 15/21] chore: tweaks

---
 docs/default-theme-config/README.md | 1 -
 lib/default-theme/NavLinks.vue      | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
index 65ebf9e66a..29f83ac54b 100644
--- a/docs/default-theme-config/README.md
+++ b/docs/default-theme-config/README.md
@@ -56,7 +56,6 @@ module.exports = {
     nav: [
       {
         text: 'Languages', 
-        type: 'dropdown', 
         items: [
           { text: 'Chinese', link: '/language/chinese' },
           { text: 'Japanese', link: '/language/japanese' }
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index 148eaa443d..9df28b1db4 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -127,9 +127,9 @@ export default {
                 top calc(50% - 3px)
                 left 10px
           &:first-child h4
-            margin-top: 0;
-            padding-top: 0;
-            border-top: 0;
+            margin-top 0
+            padding-top 0
+            border-top 0
           & > h4
             margin 0.45rem 0 0
             border-top 1px solid #eee

From 96a6cc666edaa370a21b7739ed2e629c9d42fac8 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Mon, 16 Apr 2018 09:45:50 +0800
Subject: [PATCH 16/21] refactor: address comments and clean duplicate code due
 to merging.

---
 lib/default-theme/NavLink.vue  | 3 ++-
 lib/default-theme/NavLinks.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
index 7c912865a0..610b9f104f 100644
--- a/lib/default-theme/NavLink.vue
+++ b/lib/default-theme/NavLink.vue
@@ -3,13 +3,14 @@
     class="router-link"
     :to="link"
     v-if="!isExternal(link)"
-    exact
+    :exact="link === '/'"
   >{{ item.text }}</router-link>
   <a
     v-else
     :href="link"
     target="_blank"
     class="router-link"
+    rel="noopener noreferrer"
   >{{ item.text }}</a>
 </template>
 
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index a889185a08..1092d51b66 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -42,7 +42,7 @@
 
 <script>
 import OutboundLink from './OutboundLink.vue'
-import { isActive, ensureExt, resolveNavLinkItem, outboundRE } from './util'
+import { isActive, resolveNavLinkItem } from './util'
 import NavLink from './NavLink.vue'
 
 export default {

From 7f440d0124e591bd34d15f7fd2d77bf24ef28841 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Mon, 16 Apr 2018 10:07:15 +0800
Subject: [PATCH 17/21] style: use more exact class selector, and clean old
 element selector code.

---
 docs/.vuepress/config.js       |  2 +-
 lib/default-theme/NavLinks.vue | 22 +++++++++++++---------
 lib/default-theme/Sidebar.vue  | 24 ++++++++++++++----------
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e6955c1044..4efbb5e9b6 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -110,7 +110,7 @@ module.exports = {
             items: [
               {
                 text: 'Vue Curated',
-                link: 'ttps://curated.vuejs.org/'
+                link: 'https://curated.vuejs.org/'
               },
               {
                 text: 'Awesome Vue',
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index 1092d51b66..ca81cf6d71 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -12,11 +12,13 @@
         <span class="arrow"></span>
         <ul class="nav-dropdown">
           <li
+            class="dropdown-item"
             v-for="subItem in item.items"
             :key="subItem.link">
             <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
-            <ul v-if="subItem.type === 'links'">
+            <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
               <li
+                class="dropdown-subitem"
                 v-for="childSubItem in subItem.items"
                 :key="childSubItem.link">
                 <nav-link :item="childSubItem"></nav-link>
@@ -100,9 +102,18 @@ export default {
         border-right 4px solid transparent
         border-top 5px solid #ccc
       .nav-dropdown
-        li
+        .dropdown-item
           color inherit
           line-height 1.7rem
+          h4
+            margin 0.45rem 0 0
+            border-top 1px solid #eee
+            padding 0.45rem 1.5rem 0 1.25rem
+          .dropdown-subitem-wrapper
+            padding 0
+            list-style none
+            .dropdown-subitem
+              font-size 0.9em
           a
             display block
             height 1.7rem
@@ -130,13 +141,6 @@ export default {
             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
index 00dd33518a..ad7fad3a90 100644
--- a/lib/default-theme/Sidebar.vue
+++ b/lib/default-theme/Sidebar.vue
@@ -90,17 +90,21 @@ function resolveOpenGroupIndex (route, items) {
     .nav-item .dropdown-wrapper
       .dropdown-title
         display inline-block
-        margin-bottom 5px
+        margin-bottom 0.5rem
       .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
+        .dropdown-item
+          h4
+            border-top 0
+            margin-top 0
+            padding-top 0
+          h4, & > a
+            font-size 15px
+            height 2rem
+            line-height 2rem
+          .dropdown-subitem
+            font-size 14px
+            padding-left 1rem
+
   .sidebar-links
     margin-top 1.5rem
 

From 4bf15cb5b759a3b907c104fab69588d7821effcd Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Tue, 17 Apr 2018 00:54:20 +0800
Subject: [PATCH 18/21] add cursor: pointer to nav item.

---
 lib/default-theme/NavLinks.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index ca81cf6d71..7fa826f79a 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -83,6 +83,7 @@ export default {
     &:hover, &.router-link-active
       color $accentColor
   .nav-item
+    cursor: pointer
     position relative
     display inline-block
     margin-left 1.5rem

From 650089dbca4173c840a2b666aeb000f36f545e22 Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Tue, 17 Apr 2018 01:27:14 +0800
Subject: [PATCH 19/21] feat: togglable dropdown on mobile

---
 lib/default-theme/DropdownLink.vue | 152 +++++++++++++++++++++++++++++
 lib/default-theme/NavLink.vue      |   4 +-
 lib/default-theme/NavLinks.vue     |  96 +-----------------
 lib/default-theme/Sidebar.vue      |  18 ----
 4 files changed, 158 insertions(+), 112 deletions(-)
 create mode 100644 lib/default-theme/DropdownLink.vue

diff --git a/lib/default-theme/DropdownLink.vue b/lib/default-theme/DropdownLink.vue
new file mode 100644
index 0000000000..4c01ee3e9f
--- /dev/null
+++ b/lib/default-theme/DropdownLink.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="dropdown-wrapper" :class="{ open }">
+    <div class="dropdown-title" @click="toggle">
+      <span class="title">{{ item.text }}</span>
+      <span class="arrow"></span>
+    </div>
+    <ul class="nav-dropdown">
+      <li
+        class="dropdown-item"
+        v-for="subItem in item.items"
+        :key="subItem.link">
+        <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+        <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
+          <li
+            class="dropdown-subitem"
+            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>
+</template>
+
+<script>
+  import { isExternal, ensureExt } from './util'
+  import NavLink from './NavLink.vue'
+
+  export default {
+    components: { NavLink },
+    data() {
+      return {
+        open: true
+      }
+    },
+    props: {
+      item: {
+        required: true
+      }
+    },
+    methods: {
+      toggle() {
+        this.open = !this.open
+      }
+    }
+  }
+</script>
+
+<style lang="stylus">
+@import './styles/config.styl'
+
+.dropdown-wrapper
+  .dropdown-title
+    .arrow
+      display inline-block
+      vertical-align middle
+      margin-top -1px
+      margin-left 6px
+      width 0
+      height 0
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 5px solid #ccc
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid #eee
+        padding 0.45rem 1.5rem 0 1.25rem
+      .dropdown-subitem-wrapper
+        padding 0
+        list-style none
+        .dropdown-subitem
+          font-size 0.9em
+      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
+          color $accentColor
+          &::after
+            content ""
+            width 0
+            height 0
+            border-left 5px solid $accentColor
+            border-top 4px solid transparent
+            border-bottom 4px solid transparent
+            position absolute
+            top calc(50% - 3px)
+            left 10px
+      &:first-child h4
+        margin-top 0
+        padding-top 0
+        border-top 0
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    &.open .dropdown-title
+      margin-bottom 0.5rem
+    &:not(.open)
+      .dropdown-title .arrow
+        border-top 4px solid transparent
+        border-bottom 4px solid transparent
+        border-left 5px solid #ccc
+      .nav-dropdown
+        display none
+    .nav-dropdown
+      .dropdown-item
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        h4, & > a
+          font-size 15px
+          height 2rem
+          line-height 2rem
+        .dropdown-subitem
+          font-size 14px
+          padding-left 1rem
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    &: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
+</style>
diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
index 610b9f104f..626fad52bc 100644
--- a/lib/default-theme/NavLink.vue
+++ b/lib/default-theme/NavLink.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link
-    class="router-link"
+    class="nav-link"
     :to="link"
     v-if="!isExternal(link)"
     :exact="link === '/'"
@@ -9,7 +9,7 @@
     v-else
     :href="link"
     target="_blank"
-    class="router-link"
+    class="nav-link"
     rel="noopener noreferrer"
   >{{ item.text }}</a>
 </template>
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
index 7fa826f79a..b3bad047f7 100644
--- a/lib/default-theme/NavLinks.vue
+++ b/lib/default-theme/NavLinks.vue
@@ -5,29 +5,9 @@
       class="nav-item"
       v-for="item in userLinks"
       :key="item.link">
-      <div
+      <dropdown-link
         v-if="item.type === 'links'"
-        class="dropdown-wrapper">
-        <span class="dropdown-title">{{ item.text }}</span>
-        <span class="arrow"></span>
-        <ul class="nav-dropdown">
-          <li
-            class="dropdown-item"
-            v-for="subItem in item.items"
-            :key="subItem.link">
-            <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
-            <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
-              <li
-                class="dropdown-subitem"
-                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>
+        :item="item"></dropdown-link>
       <nav-link v-else :item="item"></nav-link>
     </div>
     <!-- github link -->
@@ -46,9 +26,10 @@
 import OutboundLink from './OutboundLink.vue'
 import { isActive, resolveNavLinkItem } from './util'
 import NavLink from './NavLink.vue'
+import DropdownLink from './DropdownLink.vue'
 
 export default {
-  components: { OutboundLink, NavLink },
+  components: { OutboundLink, NavLink, DropdownLink },
   computed: {
     userLinks () {
       return (this.$site.themeConfig.nav || []).map((link => {
@@ -89,59 +70,6 @@ export default {
     margin-left 1.5rem
     font-weight 500
     line-height 2rem
-    .dropdown-wrapper
-      &:hover .nav-dropdown
-          display block
-      .arrow
-        display inline-block
-        vertical-align middle
-        margin-top -1px
-        margin-left 6px
-        width 0
-        height 0
-        border-left 4px solid transparent
-        border-right 4px solid transparent
-        border-top 5px solid #ccc
-      .nav-dropdown
-        .dropdown-item
-          color inherit
-          line-height 1.7rem
-          h4
-            margin 0.45rem 0 0
-            border-top 1px solid #eee
-            padding 0.45rem 1.5rem 0 1.25rem
-          .dropdown-subitem-wrapper
-            padding 0
-            list-style none
-            .dropdown-subitem
-              font-size 0.9em
-          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
-              color $accentColor
-              &::after
-                content ""
-                width 0
-                height 0
-                border-left 5px solid $accentColor
-                border-top 4px solid transparent
-                border-bottom 4px solid transparent
-                position absolute
-                top calc(50% - 3px)
-                left 10px
-          &:first-child h4
-            margin-top 0
-            padding-top 0
-            border-top 0
   .github-link
     margin-left 1.5rem
 
@@ -157,20 +85,4 @@ export default {
         color $textColor
         margin-bottom -2px
         border-bottom 2px solid lighten($accentColor, 5%)
-    .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
 </style>
diff --git a/lib/default-theme/Sidebar.vue b/lib/default-theme/Sidebar.vue
index ad7fad3a90..c7be0cfa86 100644
--- a/lib/default-theme/Sidebar.vue
+++ b/lib/default-theme/Sidebar.vue
@@ -87,24 +87,6 @@ function resolveOpenGroupIndex (route, items) {
       font-weight 600
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
-    .nav-item .dropdown-wrapper
-      .dropdown-title
-        display inline-block
-        margin-bottom 0.5rem
-      .nav-dropdown
-        .dropdown-item
-          h4
-            border-top 0
-            margin-top 0
-            padding-top 0
-          h4, & > a
-            font-size 15px
-            height 2rem
-            line-height 2rem
-          .dropdown-subitem
-            font-size 14px
-            padding-left 1rem
-
   .sidebar-links
     margin-top 1.5rem
 

From b3e0583610ed543b077e7a511496582b9201545b Mon Sep 17 00:00:00 2001
From: ULIVZ <472590061@qq.com>
Date: Tue, 17 Apr 2018 02:00:04 +0800
Subject: [PATCH 20/21] chore: dropdown - remove test links, and make it
 collapsed by default on mobile.

---
 docs/.vuepress/config.js           | 94 ------------------------------
 lib/default-theme/DropdownLink.vue |  2 +-
 2 files changed, 1 insertion(+), 95 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 4efbb5e9b6..9cece56a58 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -25,100 +25,6 @@ module.exports = {
       {
         text: 'Default Theme Config',
         link: '/default-theme-config/'
-      },
-      {
-        text: 'Links',
-        items: [
-          {
-            text: 'Vue',
-            link: 'https://vuejs.org/',
-          },
-          {
-            text: 'Vue-Router',
-            link: 'https://router.vuejs.org/en/',
-          },
-          {
-            text: 'Vue-CLI',
-            link: 'https://github.com/vuejs/vue-cli/blob/dev/docs/README.md',
-          },
-          {
-            text: 'Vue-Press',
-            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: 'https://curated.vuejs.org/'
-              },
-              {
-                text: 'Awesome Vue',
-                link: 'https://github.com/vuejs/awesome-vue'
-              }
-            ]
-          }
-        ]
       }
     ],
     sidebar: {
diff --git a/lib/default-theme/DropdownLink.vue b/lib/default-theme/DropdownLink.vue
index 4c01ee3e9f..cd3796ac66 100644
--- a/lib/default-theme/DropdownLink.vue
+++ b/lib/default-theme/DropdownLink.vue
@@ -32,7 +32,7 @@
     components: { NavLink },
     data() {
       return {
-        open: true
+        open: false
       }
     },
     props: {

From bf13baabed01f5be3b13c27c38a1848ce9c58d38 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 16 Apr 2018 14:06:09 -0400
Subject: [PATCH 21/21] Update README.md

---
 docs/default-theme-config/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
index 9cbb8c0504..9e252b0109 100644
--- a/docs/default-theme-config/README.md
+++ b/docs/default-theme-config/README.md
@@ -50,7 +50,7 @@ module.exports = {
 }
 ```
 
-Those links can also be dropdown menus, add nested items via `items`:
+These links can also be dropdown menus if you provide nested items via `items`:
 
 ```js
 module.exports = {