[feature] add menu close button

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);
   }

index.html

@@ -88,7 +88,8 @@
   <section class="menu">
     <div class="menu-area">
 
-      <ul class="menu-nav u-list-unstyled">
+      <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>
@@ -99,6 +100,10 @@
             <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">

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) {