From 05273c7c3643f63defceff3bf47e0fc3ea09f35f Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 25 Jul 2018 10:35:03 -0700
Subject: [PATCH] Add open/close functionality to the gutter-menu when it's
 collapsed

---
 ui/app/components/global-header.js            | 5 +++++
 ui/app/components/gutter-menu.js              | 2 ++
 ui/app/components/page-layout.js              | 2 ++
 ui/app/styles/components/page-layout.scss     | 1 +
 ui/app/templates/components/global-header.hbs | 1 +
 ui/app/templates/components/gutter-menu.hbs   | 7 ++++++-
 ui/app/templates/components/page-layout.hbs   | 9 +++++++--
 7 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 ui/app/components/global-header.js

diff --git a/ui/app/components/global-header.js b/ui/app/components/global-header.js
new file mode 100644
index 000000000..6ee147b08
--- /dev/null
+++ b/ui/app/components/global-header.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  onHamburgerClick() {},
+});
diff --git a/ui/app/components/gutter-menu.js b/ui/app/components/gutter-menu.js
index 261516440..66db45e8f 100644
--- a/ui/app/components/gutter-menu.js
+++ b/ui/app/components/gutter-menu.js
@@ -32,6 +32,8 @@ export default Component.extend({
     });
   }),
 
+  onHamburgerClick() {},
+
   gotoJobsForNamespace(namespace) {
     if (!namespace || !namespace.get('id')) return;
 
diff --git a/ui/app/components/page-layout.js b/ui/app/components/page-layout.js
index 4c5658fda..722b5f9eb 100644
--- a/ui/app/components/page-layout.js
+++ b/ui/app/components/page-layout.js
@@ -2,4 +2,6 @@ import Component from '@ember/component';
 
 export default Component.extend({
   classNames: ['page-layout'],
+
+  isGutterOpen: false,
 });
diff --git a/ui/app/styles/components/page-layout.scss b/ui/app/styles/components/page-layout.scss
index 84c81e4c1..e6f9494d3 100644
--- a/ui/app/styles/components/page-layout.scss
+++ b/ui/app/styles/components/page-layout.scss
@@ -43,6 +43,7 @@
         &.is-left {
           top: 0;
           left: -$gutter-width;
+          transition: left ease-in-out 0.3s;
 
           &.is-open {
             left: 0;
diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs
index 8996b11d4..428310e96 100644
--- a/ui/app/templates/components/global-header.hbs
+++ b/ui/app/templates/components/global-header.hbs
@@ -1,5 +1,6 @@
 <nav class="navbar is-primary">
   <div class="navbar-brand">
+    <span class="navbar-item" onclick={{action onHamburgerClick}}>Hamburger</span>
     <span class="navbar-item is-logo">
       <img src="/ui/images/nomad-logo.svg" alt="Nomad" />
     </span>
diff --git a/ui/app/templates/components/gutter-menu.hbs b/ui/app/templates/components/gutter-menu.hbs
index 90d9aa32e..048daa0b2 100644
--- a/ui/app/templates/components/gutter-menu.hbs
+++ b/ui/app/templates/components/gutter-menu.hbs
@@ -1,6 +1,11 @@
-<div class="page-column is-left">
+<div class="page-column is-left {{if isOpen "is-open"}}">
   <div class="gutter">
     <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>
diff --git a/ui/app/templates/components/page-layout.hbs b/ui/app/templates/components/page-layout.hbs
index 27a5f3133..fa2cd0e4b 100644
--- a/ui/app/templates/components/page-layout.hbs
+++ b/ui/app/templates/components/page-layout.hbs
@@ -1,6 +1,11 @@
-{{#global-header class="page-header"}}
+{{#global-header
+  class="page-header"
+  onHamburgerClick=(action (mut isGutterOpen) true)}}
   {{app-breadcrumbs}}
 {{/global-header}}
-{{#gutter-menu class="page-body"}}
+{{#gutter-menu
+  class="page-body"
+  isOpen=isGutterOpen
+  onHamburgerClick=(action (mut isGutterOpen) false)}}
   {{yield}}
 {{/gutter-menu}}