feat: Hamburger menu (#32)

riboseinc · Sep 4, 2018 · 3fef41d · 3fef41d
1 parent 4e7dc1c
commit 3fef41d
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 10 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -18,10 +18,27 @@
   <div class="underlay header" role="presentation">
     <header>
       <h1 class="site-logo"><a href="/">{% include logo.html %}</a></h1>
-      <nav>
+      <nav class="top-menu">
         {% include nav-links.html %}
       </nav>
+
       {% include social-links.html %}
+
+      <button class="hamburger" aria-expanded="false" id="hamburgerButton">
+        <i class="fa fa-bars"></i>
+      </button>
+
+      <div class="hamburger-menu" id="hamburgerMenu" aria-hidden="true">
+        <div class="site-logo-container">
+          <h1 class="site-logo"><a href="/">{% include logo.html %}</a></h1>
+        </div>
+
+        <nav>
+          {% include nav-links.html %}
+        </nav>
+
+        {% include social-links.html %}
+      </div>
     </header>
 
     {% if page.hero_include %}
@@ -58,5 +75,21 @@ <h1 class="site-logo"><a href="/">{% include logo.html %}</a></h1>
     </footer>
   </div>
 
+  <script>
+    (function () {
+      var hamBtn = document.getElementById('hamburgerButton');
+      var hamMnu = document.getElementById('hamburgerMenu');
+      var hasOpened = false;
+
+      hamBtn.addEventListener('click', function (evt) {
+        hasOpened = hamMnu.classList.toggle('expanded');
+        if (hasOpened) {
+          hamBtn.setAttribute('aria-expanded', true);
+          hamMnu.setAttribute('aria-hidden', false);
+        }
+      });
+    }());
+  </script>
+
   {% include scripts.html %}
 </body>
diff --git a/_sass/open-project-header-footer.scss b/_sass/open-project-header-footer.scss
@@ -1,17 +1,10 @@
 body > .underlay > header,
 body > .underlay > footer {
   display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-
-  @media screen and (min-width: $bigscreen-breakpoint) {
-    flex-flow: row nowrap;
-  }
 
   .site-logo {
     margin: 0;
     padding: 0;
-    margin-right: 100px;
 
     line-height: .5;
     font-size: 24px;
@@ -27,6 +20,10 @@ body > .underlay > footer {
       height: 30px;
       vertical-align: middle;
     }
+
+    @media screen and (min-width: $bigscreen-breakpoint) {
+      margin-right: 100px;
+    }
   }
   .social-links {
     > a {
@@ -220,9 +217,78 @@ body > .underlay > header {
   padding-top: 26px;
   padding-bottom: 26px;
 
+  align-items: flex-start;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+
   color: white;
 
-  > nav {
+  > button.hamburger {
+    border: 0;
+    background: transparent;
+    color: white;
+    font-size: inherit;
+    z-index: 20;
+  }
+
+  > .hamburger-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-100%);
+    transition: transform .2s ease-out;
+
+    height: 100vh;
+    z-index: 10;
+    color: white;
+    background: rgba($primary-dark-color, 0.95);
+
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: flex-start;
+
+    .site-logo-container {
+      margin-left: 2em;
+      margin-top: 26px;
+      align-self: flex-start;
+    }
+
+    > nav,
+    > .social-links {
+      span, a:link, a:visited, a:hover {
+        color: white;
+        font-size: 2em;
+      }
+    }
+
+    > nav {
+      flex: 1;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      justify-content: center;
+
+      > * {
+        margin: .25em;
+      }
+      > span {
+        font-weight: bold;
+      }
+    }
+
+    .social-links {
+      margin-top: 1em;
+      margin-bottom: 2em;
+    }
+
+    &.expanded {
+      transform: translateY(0);
+    }
+  }
+
+  > .top-menu {
     flex: 1;
 
     > * {
@@ -234,22 +300,37 @@ body > .underlay > header {
     }
   }
 
-  > nav, > .social-links {
+  > .top-menu, > .social-links {
     color: white;
 
+    display: none;
+
     span {
       background-color: rgba(black, 0.1);
     }
     a:link, a:hover, a:visited {
       color: white;
     }
   }
+
+  @media screen and (min-width: $bigscreen-breakpoint) {
+    justify-content: unset;
+    > button.hamburger {
+      display: none;
+    }
+    > .top-menu, > .social-links {
+      display: block;
+    }
+  }
 }
 
 body > .underlay > footer {
   padding-top: 50px;
   padding-bottom: 50px;
 
+  align-items: center;
+  flex-flow: column nowrap;
+
   color: #909B9C;
 
   a:link, a:visited, a:hover {
@@ -286,4 +367,8 @@ body > .underlay > footer {
       }
     }
   }
+
+  @media screen and (min-width: $bigscreen-breakpoint) {
+    flex-flow: row nowrap;
+  }
 }