Add use case drop down to nav

website/source/assets/stylesheets/_header.scss

@@ -1,6 +1,45 @@
 #header {
   background: $header-background-color;
 
+  // Kind of gnarly override for bootstrap's nav toggle behavior
+  @media (max-width: 991px) {
+    .navbar-header {
+      float: none;
+    }
+    .navbar-left,
+    .navbar-right {
+      float: none !important;
+    }
+    .navbar-toggle {
+      display: block;
+    }
+    .navbar-collapse {
+      border-top: 1px solid transparent;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    }
+    .navbar-fixed-top {
+      top: 0;
+      border-width: 0 0 1px;
+    }
+    .navbar-collapse.collapse {
+      display: none !important;
+    }
+    .navbar-nav {
+      float: none !important;
+      margin-top: 7.5px;
+    }
+    .navbar-nav > li {
+      float: none;
+    }
+    .navbar-nav > li > a {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+    .collapse.in {
+      display: block !important;
+    }
+  }
+
   .navbar-toggle {
     height: $header-height;
     margin: 0;
@@ -28,7 +67,9 @@
         transition: opacity 0.15s ease-in-out;
         @extend svg.logo.white;
 
-        &:hover, &:focus, &:active {
+        &:hover,
+        &:focus,
+        &:active {
           opacity: 0.6;
           outline: 0;
           text-decoration: none;
@@ -39,18 +80,17 @@
 
   ul.nav {
     li {
-      a {
+      color: $consul-black;
-        color: $header-link-color;
       font-size: $header-font-size;
       font-family: $font-family-open-sans;
       font-weight: $font-weight-bold;
       height: $header-height;
-        line-height: $header-height;
-        padding: 0 10px;
       margin: 0;
       text-decoration: none;
 
-        &:hover, &:focus, &:active {
+      &:hover,
+      &:focus,
+      &:active {
         background-color: transparent;
         color: $header-link-color-hover;
         outline: 0;
@@ -60,6 +100,21 @@
         }
       }
 
+      span {
+        display: block;
+        padding: 15px;
+        line-height: 20px;
+
+        svg {
+          fill: $header-link-color;
+          position: relative;
+          top: -2px;
+          width: 9px;
+          height: 5px;
+          margin-left: 7px;
+        }
+      }
+
       svg {
         fill: $header-link-color;
         position: relative;
@@ -68,11 +123,54 @@
         height: 14px;
         margin-right: 3px;
       }
+
+      &:hover {
+        cursor: pointer;
+
+        & > ul {
+          visibility: visible;
+          opacity: 1;
+          display: block;
+          transition: all 0.5s ease;
+        }
+      }
+
+      ul {
+        visibility: hidden;
+        opacity: 0;
+        transition: all 0.5s ease;
+        min-width: 22rem;
+        box-shadow: 0px 4px 12px -2px rgba(63, 68, 85, 0.5);
+        border-radius: 3px;
+        padding: 2rem;
+        position: absolute;
+        height: 160px;
+        z-index: 1;
+        background-color: white;
+        margin-left: -15px;
+
+        &:hover {
+          visibility: visible;
+          opacity: 1;
+        }
+
+        li {
+          clear: both;
+          width: 100%;
+          display: block;
+          padding: 1rem;
+          position: relative;
+          height: 44px;
+
+          a {
+            text-decoration: none;
+          }
+        }
       }
     }
   }
 
   .buttons {
-    margin-top: 2px;
+    margin-top: 20px;
   }
 }

website/source/assets/stylesheets/_variables.scss

@@ -1,19 +1,20 @@
 // Colors
-$white: #FFFFFF;
+$white: #ffffff;
 $black: #000000;
 $gray-darker: #555555;
+$consul-black: #252937;
 
-$consul-red: #C62A71;
+$consul-red: #c62a71;
-$consul-red-dark: #8C1C59;
+$consul-red-dark: #8c1c59;
-$packer-blue: #1DAEFF;
+$packer-blue: #1daeff;
-$packer-blue-dark: #1D94DD;
+$packer-blue-dark: #1d94dd;
-$terraform-purple: #5C4EE5;
+$terraform-purple: #5c4ee5;
-$terraform-purple-dark: #4040B2;
+$terraform-purple-dark: #4040b2;
-$vagrant-blue: #1563FF;
+$vagrant-blue: #1563ff;
-$vagrant-blue-dark: #104EB2;
+$vagrant-blue-dark: #104eb2;
 $vault-black: #000000;
-$vault-blue: #00ABE0;
+$vault-blue: #00abe0;
-$vault-gray: #919FA8;
+$vault-gray: #919fa8;
 
 // Typography
 $font-family-klavika: 'klavika-web', Helvetica, sans-serif;
@@ -45,8 +46,8 @@ $sidebar-font-weight: $font-weight-reg;
 $header-background-color: $consul-red;
 $header-font-size: $font-size - 2;
 $header-height: 92px;
-$header-link-color: rgba($white, 0.85);
+$header-link-color: rgba($black, 0.85);
-$header-link-color-hover: $white;
+$header-link-color-hover: $black;
 $header-font-family: $font-family-klavika;
 
 // Footer
@@ -56,7 +57,7 @@ $footer-link-color-hover: $black;
 
 // Button
 $button-background: $white;
-$button-font-color: #7b8A8E;
+$button-font-color: #7b8a8e;
 $button-font-family: $font-family-klavika;
 $button-font-size: $font-size;
 $button-font-weight: $font-weight-bold;

website/source/assets/stylesheets/application.scss

@@ -30,9 +30,9 @@
 @import '_logos';
 
 // Pages
-@import "_community";
+@import '_community';
-@import "_docs";
+@import '_docs';
-@import "_downloads";
+@import '_downloads';
 // @import "_home";
 
 // Consul Connect

website/source/layouts/_sidebar.erb

@@ -8,6 +8,9 @@
   <ul class="nav sidebar-nav">
     <li><a href="/intro/index.html">Intro</a></li>
     <li><a href="/docs/guides/index.html">Guides</a></li>
+    <li><a href="/discovery.html">Service Discovery</a></li>
+    <li><a href="/segmentation.html">Service Segmentation</a></li>
+    <li><a href="/configuration.html">Service Configuration</a></li>
     <li><a href="/docs/index.html">Docs</a></li>
     <li><a href="/api/index.html">API</a></li>
     <li><a href="/community.html">Community</a></li>

website/source/layouts/layout.erb

@@ -65,10 +65,16 @@
                 <span class="icon-bar"></span>
               </button>
             </div>
-            <div class="buttons hidden-xs">
+            <div class="buttons hidden-xs hidden-sm">
               <nav class="navigation-links" role="navigation">
                 <ul class="main-links nav navbar-nav navbar-right">
-                  <li><a href="/intro/index.html">Intro</a></li>
+                  <li><span>Use Cases<svg width="9" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M8.811 1.067a.612.612 0 0 0 0-.884.655.655 0 0 0-.908 0L4.5 3.491 1.097.183a.655.655 0 0 0-.909 0 .615.615 0 0 0 0 .884l3.857 3.75a.655.655 0 0 0 .91 0l3.856-3.75z" fill="#252937" fill-rule="evenodd"/></svg></span>
+                    <ul class="dropdown">
+                      <li><a href="/discovery.html">Service Discovery</a></li>
+                      <li><a href="/segmentation.html">Service Segmentation</a></li>
+                      <li><a href="/configuration.html">Service Configuration</a></li>
+                    </ul>
+                  </li>
                   <li><a href="/docs/guides/index.html">Guides</a></li>
                   <li><a href="/docs/index.html">Docs</a></li>
                   <li><a href="/api/index.html">API</a></li>