Reorganize secondary nav links into sectioned ecosystem dropdown (vuejs#604)

* reorganize secondary nav links into sectioned ecosystem dropdown

* improve typeface of nav dropdown

Author: chrisvfritz

themes/vue/layout/partials/community_dropdown.ejs

@@ -1,9 +1,29 @@
 <li class="nav-dropdown-container ecosystem">
   <a class="nav-link">Ecosystem</a><span class="arrow"></span>
   <ul class="nav-dropdown">
-    <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">vue-router</a></li>
-    <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">vuex</a></li>
-    <li><a href="https://github.com/vuejs/vue-cli" class="nav-link" target="_blank">vue-cli</a></li>
-    <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">awesome-vue</a></li>
+    <li><h4>Help</h4></li>
+    <li><ul>
+      <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
+      <li><a href="https://github.com/vuejs-templates" class="nav-link" target="_blank">Templates</a></li>
+    </ul></li>
+    <li><h4>News</h4></li>
+    <li><ul>
+      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
+      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">Blog</a></li>
+      <li><a href="https://vuejsjob.com/?ref=vuejs" class="nav-link" target="_blank">Jobs</a></li>
+    </ul></li>
+    <li><h4>Core Plugins</h4></li>
+    <li><ul>
+      <li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
+      <li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
+    </ul></li>
+    <li><h4>Resource Lists</h4></li>
+    <li><ul>
+      <li><a href="https://github.com/vuejs" class="nav-link" target="_blank">Official Repos</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Awesome Vue</a></li>
+    </ul></li>
   </ul>
 </li>
+
+

themes/vue/layout/partials/ecosystem_dropdown.ejs

@@ -1,5 +1,5 @@
 <li class="nav-dropdown-container language">
-  <a class="nav-link">Language</a><span class="arrow"></span>
+  <a class="nav-link">Translations</a><span class="arrow"></span>
   <ul class="nav-dropdown">
     <li><a href="https://cn.vuejs.org/" class="nav-link" target="_blank">中文</a></li>
     <li><a href="https://jp.vuejs.org/" class="nav-link" target="_blank">日本語</a></li>

themes/vue/layout/partials/language_dropdown.ejs

@@ -6,7 +6,5 @@
 <li><a href="/v2/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
 <li><a href="/v2/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
 <li><a href="/v2/examples/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
-<li><a href="https://medium.com/the-vue-point" target="_blank" class="nav-link<%- page.path.match(/blog/) ? ' current' : '' %>">Blog</a></li>
-<%- partial('partials/community_dropdown') %>
 <%- partial('partials/ecosystem_dropdown') %>
 <%- partial('partials/language_dropdown') %>

themes/vue/layout/partials/main_menu.ejs

@@ -150,13 +150,18 @@ a.button
         &:hover
             .nav-dropdown
                 display block
-        &.ecosystem, &.language
+        &.language
             margin-left 20px
+        .arrow
+            pointer-events none
     .nav-dropdown
         display none
+        box-sizing border-box
+        max-height "calc(100vh - %s)" % $header-height
+        overflow-y scroll
         position absolute
         top 100%
-        left 0
+        right -15px
         background-color #fff
         padding 10px 0
         border 1px solid #ddd
@@ -168,11 +173,24 @@ a.button
             line-height 1.8em
             margin 0
             display block
+            > ul
+                padding-left: 0
+            &:first-child
+                h4
+                    margin-top 0
+                    padding-top: 0
+                    border-top: 0
+        a, h4
+            padding 0 24px 0 20px
+        h4
+            // text-transform uppercase
+            margin .45em 0 0
+            padding-top: .45em
+            border-top: 1px solid #eee
         a
-            color $light
+            color lighten($dark, 10%)
             font-size .9em
             display block
-            padding 0 24px 0 20px
             &:hover
                 color $green
     .arrow

themes/vue/source/css/_common.styl

@@ -75,6 +75,10 @@
         padding 4px 0
         text-align center
         margin-bottom 20px
+    .nav-dropdown
+        h4
+            font-weight normal
+            margin: 0
 
 @media screen and (max-width: 900px)
     .sidebar