Visual treatment for the collapsed gutter menu

ui/app/styles/components/gutter.scss

 .gutter {
   height: 100%;
   border-right: 1px solid $grey-blue;
+
+  .collapsed-menu {
+    display: none;
+    height: 3.5rem;
+
+    .gutter-toggle {
+      fill: $grey-light;
+    }
+
+    .nomad-logo {
+      fill: $grey-light;
+    }
+
+    .logo-container {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0.5rem 1rem;
+      margin-left: 20px;
+    }
+
+    @media #{$mq-hidden-gutter} {
+      display: block;
+    }
+  }
 }

ui/app/styles/components/page-layout.scss

@@ -43,7 +43,7 @@
         &.is-left {
           top: 0;
           left: -$gutter-width;
-          transition: left ease-in-out 0.3s;
+          transition: left ease-in-out 0.2s;
 
           &.is-open {
             left: 0;

ui/app/templates/components/gutter-menu.hbs

 <div class="page-column is-left {{if isOpen "is-open"}}">
   <div class="gutter">
+    <header class="collapsed-menu">
+      <span class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
+        {{partial "partials/hamburger-menu"}}
+      </span>
+      <span class="logo-container">
+        {{partial "partials/nomad-logo"}}
+      </span>
+    </header>
     <aside class="menu">
-      <ul class="menu-list">
-        <li>
-          <div class="menu-item"><a onclick={{action onHamburgerClick}}>Close</a></div>
-        </li>
-      </ul>
       <p class="menu-label">
         Workload
       </p>