reorganize main menu

Author: chrisvfritz

themes/vue/layout/partials/learn_dropdown.ejs

@@ -0,0 +1,10 @@
+<li class="nav-dropdown-container learn">
+  <a class="nav-link<%- page.path.match(/(guide(?!\/team.html$)|api|examples|cookbook)/) ? ' current' : '' %>">Learn</a><span class="arrow"></span>
+  <ul class="nav-dropdown">
+    <li><ul>
+      <li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
+      <li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
+      <li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
+    </ul></li>
+  </ul>
+</li>

themes/vue/layout/partials/main_menu.ejs

@@ -3,11 +3,10 @@
     <input type="text" id="search-query-<%- context %>" class="search-query st-default-search-input">
   </form>
 </li>
-<li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
-<li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
-<li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
+<%- partial('partials/learn_dropdown') %>
 <%- partial('partials/ecosystem_dropdown') %>
-<%- partial('partials/language_dropdown') %>
 <li>
-  <a href="https://vue.threadless.com" target="_blank" class="nav-link shop">Shop</a>
+  <a href="<%- url_for("/v2/guide/team.html") %>" class="nav-link team<%- page.path.match(/team\.html/) ? ' current' : '' %>">Team</a>
 </li>
+<%- partial('partials/support_vue_dropdown') %>
+<%- partial('partials/language_dropdown') %>

themes/vue/layout/partials/support_vue_dropdown.ejs

@@ -0,0 +1,10 @@
+<li class="nav-dropdown-container support-vue">
+  <a class="nav-link">Support Vue</a><span class="arrow"></span>
+  <ul class="nav-dropdown">
+    <li><ul>
+      <li><a href="https://vue.threadless.com" target="_blank" class="nav-link">Shop</a></li>
+      <li><a href="https://opencollective.com/vuejs" target="_blank" class="nav-link">Support Us on OpenCollective</a></li>
+      <li><a href="https://www.patreon.com/evanyou" target="_blank" class="nav-link">Support Evan on Patreon</a></li>
+    </ul></li>
+  </ul>
+</li>

themes/vue/source/css/_common.styl

@@ -115,12 +115,12 @@ a.button
     cursor: pointer
   .nav-dropdown-container
     .nav-link
-      &:hover
+      &:hover:not(.current)
         border-bottom: none
     &:hover
       .nav-dropdown
         display: block
-    &.language
+    &.language, &.ecosystem
       margin-left: 20px
     .arrow
       pointer-events: none

themes/vue/source/css/_header.styl

@@ -35,9 +35,26 @@ body.docs
   padding-bottom: 3px
   &:hover, &.current
     border-bottom: 3px solid $green
-  &.shop
+  &.team
     margin-left: 10px
 
+.nav-dropdown
+  .nav-link
+    &:hover, &.current
+      border-bottom: none
+    &.current
+      &::after
+        content: ''
+        width: 0
+        height: 0
+        border-left: 5px solid $green
+        border-top: 3px solid transparent
+        border-bottom: 3px solid transparent
+        position: absolute;
+        top: 50%;
+        margin-top: -4px;
+        left: 8px;
+
 .new-label
   position: absolute
   top: 3px