From 823c12ea26e82e96b08383192725ec9a8b7cb31d Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 25 Jul 2018 17:06:39 -0700
Subject: [PATCH] Style the hamburber menu icon

---
 ui/app/styles/core/navbar.scss                | 20 +++++++++++++++++++
 ui/app/styles/utils/z-indices.scss            |  4 ++--
 ui/app/templates/components/global-header.hbs |  8 +++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss
index c38f676d3..6f397867f 100644
--- a/ui/app/styles/core/navbar.scss
+++ b/ui/app/styles/core/navbar.scss
@@ -85,4 +85,24 @@
       }
     }
   }
+
+  .navbar-gutter-toggle {
+    display: none;
+
+    position: absolute;
+    left: 0;
+    padding: 1rem;
+    transform: translate(-35%, 0%);
+    height: 100%;
+    fill: desaturate(lighten($nomad-green, 20%), 30%);
+    cursor: pointer;
+
+    > svg {
+      width: 20px;
+    }
+
+    @media #{$mq-hidden-gutter} {
+      display: inline-block;
+    }
+  }
 }
diff --git a/ui/app/styles/utils/z-indices.scss b/ui/app/styles/utils/z-indices.scss
index 12c13b4ad..778aa9a7e 100644
--- a/ui/app/styles/utils/z-indices.scss
+++ b/ui/app/styles/utils/z-indices.scss
@@ -1,5 +1,5 @@
 $z-tooltip: 250;
-$z-header: 200;
-$z-gutter: 200;
+$z-header: 210;
+$z-gutter: 220;
 $z-subnav: 200;
 $z-base: 100;
diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs
index 428310e96..ef83a24c9 100644
--- a/ui/app/templates/components/global-header.hbs
+++ b/ui/app/templates/components/global-header.hbs
@@ -1,6 +1,12 @@
 <nav class="navbar is-primary">
   <div class="navbar-brand">
-    <span class="navbar-item" onclick={{action onHamburgerClick}}>Hamburger</span>
+    <span class="navbar-gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect x="0" y="0" width="100" height="16" />
+        <rect x="0" y="42" width="100" height="16" />
+        <rect x="0" y="84" width="100" height="16" />
+      </svg>
+    </span>
     <span class="navbar-item is-logo">
       <img src="/ui/images/nomad-logo.svg" alt="Nomad" />
     </span>