From 285b1d88bc08bf7073eb5d83cc28ae7e0253f9fe Mon Sep 17 00:00:00 2001
From: Kombie <crudetoaster@gmail.com>
Date: Mon, 14 Jan 2019 18:22:39 +0000
Subject: [PATCH] [feature] add menu close button

---
 css/menu.css | 27 +++++++++++++++++++++++++++
 index.html   | 27 ++++++++++++++++-----------
 js/menu.js   |  5 +++++
 3 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/css/menu.css b/css/menu.css
index 4fefee95..727ef57d 100644
--- a/css/menu.css
+++ b/css/menu.css
@@ -22,10 +22,19 @@
 }
 
 .menu-nav {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.menu-nav-area {
   display: flex;
   flex-direction: column;
 }
 
+.menu-nav-area-grow {
+  flex-grow: 1;
+}
+
 .menu-nav:not(:last-child) {
   margin: 0;
 }
@@ -59,6 +68,13 @@
   border-bottom: 0;
 }
 
+.menu-close {
+  margin: 0;
+  padding-top: 1.25em;
+  padding-bottom: 1.25em;
+  border-radius: 0;
+}
+
 .menu-nav-button {
   margin: 0;
   padding-top: 1.5em;
@@ -66,6 +82,13 @@
   border-radius: 0;
 }
 
+.menu-nav-button [class^="icon-"],
+.menu-nav-button [class*=" icon-"] {
+  line-height: 1;
+  padding-top: 1.5em;
+  padding-bottom: 1.5em;
+}
+
 .menu-nav-button.active {
   background-color: var(--gray-04);
   color: var(--white);
@@ -80,6 +103,10 @@
     flex-direction: row;
   }
 
+  .menu-nav-area {
+    flex-direction: row;
+  }
+
   .menu-content-area {
     grid-template-columns: repeat(2, 1fr);
   }
diff --git a/index.html b/index.html
index 2ae8ed69..957e449b 100644
--- a/index.html
+++ b/index.html
@@ -88,17 +88,22 @@
   <section class="menu">
     <div class="menu-area">
 
-      <ul class="menu-nav u-list-unstyled">
-        <li class="menu-nav-item">
-          <button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
-        </li>
-        <li class="menu-nav-item">
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
-        </li>
-        <li class="menu-nav-item">
-          <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
-        </li>
-      </ul>
+      <div class="menu-nav">
+        <ul class="menu-nav-area menu-nav-area-grow mb-0 u-list-unstyled">
+          <li class="menu-nav-item">
+            <button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
+          </li>
+          <li class="menu-nav-item">
+            <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
+          </li>
+          <li class="menu-nav-item">
+            <button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
+          </li>
+        </ul>
+        <div class="menu-nav-area">
+          <button class="menu-close button button-block button-large mb-0" tabindex="1"><span class="icon-close"></span></button>
+        </div>
+      </div>
       <div class="menu-content">
         <div class="menu-content-area menu-content-area-header">
           <div class="menu-item">
diff --git a/js/menu.js b/js/menu.js
index ec1bcf26..1f854f44 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -2,11 +2,16 @@ var menu = (function() {
 
   var _bind = function() {
     var allMenuNavButton = helper.eA(".menu-nav-button");
+    var menuClose = helper.e(".menu-close");
     allMenuNavButton.forEach(function(arrayItem, index) {
       arrayItem.addEventListener("click", function() {
         _tab(this);
       }, false);
     });
+    menuClose.addEventListener("click", function() {
+      close();
+      shade.destroy();
+    }, false);
   };
 
   var _tab = function(button) {