add community dropdown

craiggeil · Oct 23, 2015 · 3adfba2 · 3adfba2
1 parent c20af01
commit 3adfba2
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 11 deletions.
diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs
@@ -4,9 +4,8 @@
       <li><a href="/guide/" class="nav-link">Guide</a></li>
       <li><a href="/api/" class="nav-link">API</a></li>
       <li><a href="/examples/" class="nav-link">Examples</a></li>
-      <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
-      <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="/blog" class="nav-link">Blog</a></li>
+      <%- partial('partials/community_dropdown') %>
     </ul>
     <div id="logo-wrap">
       <img id="logo" src="/images/logo.png">

diff --git a/themes/vue/layout/partials/community_dropdown.ejs b/themes/vue/layout/partials/community_dropdown.ejs
@@ -0,0 +1,9 @@
+<li class="nav-dropdown-container">
+  <a class="nav-link">Community</a><span class="arrow"></span>
+  <ul class="nav-dropdown">
+    <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
+    <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://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
+  </ul>
+</li>
diff --git a/themes/vue/layout/partials/main_menu.ejs b/themes/vue/layout/partials/main_menu.ejs
@@ -6,6 +6,5 @@
 <li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
 <li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
 <li><a href="/examples/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>
-<li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
-<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="/blog/" class="nav-link<%- page.path.match(/blog/) ? ' current' : '' %>">Blog</a></li>
+<%- partial('partials/community_dropdown') %>
diff --git a/themes/vue/source/css/_common.styl b/themes/vue/source/css/_common.styl
@@ -120,3 +120,47 @@ a.button
     .carbon-poweredby
         color #aaa
         font-weight normal
+
+#nav
+    .nav-link
+        cursor pointer
+    .nav-dropdown-container
+        .nav-link
+            &:hover
+                border-bottom none
+        &:hover
+            .nav-dropdown
+                display block
+    .nav-dropdown
+        display none
+        position absolute
+        top 100%
+        left 0
+        background-color #fff
+        padding 10px 0
+        border 1px solid #ddd
+        border-bottom-color #ccc
+        text-align left
+        border-radius 4px
+        li
+            line-height 1.8em
+            margin 0
+            display block
+        a
+            color $light
+            font-size .9em
+            display block
+            padding 0 30px 0 20px
+            &:hover
+                color $green
+    .arrow
+        display inline-block
+        vertical-align middle
+        margin-top -1px
+        margin-left 6px
+        margin-right -14px
+        width 0
+        height 0
+        border-left 4px solid transparent
+        border-right 4px solid transparent
+        border-top 5px solid #ccc
diff --git a/themes/vue/source/css/index.styl b/themes/vue/source/css/index.styl
@@ -13,8 +13,11 @@ html, body
     list-style-type none
     text-align center
     padding 0
+    margin 0
     li
         display inline-block
+        position relative
+        line-height 40px
         &:last-child .nav-link
             margin-right 0
 
@@ -41,7 +44,7 @@ html, body
     width 200px
 
 #logo-wrap
-    margin 4em 0
+    margin 3.5em 0 4em
 
 #hero
     text-align center
@@ -251,11 +254,9 @@ html, body
     body
         font-size 14px
     #nav
-        margin 3em 1.8em 0
+        margin 2em 1.8em 0
     #translations
         margin-bottom 2em
-    #logo-wrap
-        margin 4em 0
     #logo
         width 120px
     .nav-link

diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
@@ -9,7 +9,7 @@ $header-height = 40px
     box-shadow 0 0 4px rgba(0,0,0,.25)
     padding 25px 60px
     position relative
-    z-index 0
+    z-index 2
 
 #nav
     list-style-type none
@@ -24,6 +24,7 @@ $header-height = 40px
         display none
     li
         display inline-block
+        position relative
         margin 0 .6em
 
 .nav-link