[feature] add menu close button

Author: zombieFox

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,13 +68,27 @@
 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;
 padding-bottom:1.5em;
 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,17 +88,22 @@
 <sectionclass="menu">
 <divclass="menu-area">
 
-<ulclass="menu-nav u-list-unstyled">
-<liclass="menu-nav-item">
-<buttonclass="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
-</li>
-<liclass="menu-nav-item">
-<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
-</li>
-<liclass="menu-nav-item">
-<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
-</li>
-</ul>
+<divclass="menu-nav">
+<ulclass="menu-nav-area menu-nav-area-grow mb-0 u-list-unstyled">
+<liclass="menu-nav-item">
+<buttonclass="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header" tabindex="1">Header</button>
+</li>
+<liclass="menu-nav-item">
+<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks" tabindex="1">Bookmarks</button>
+</li>
+<liclass="menu-nav-item">
+<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout" tabindex="1">Layout</button>
+</li>
+</ul>
+<divclass="menu-nav-area">
+<buttonclass="menu-close button button-block button-large mb-0" tabindex="1"><spanclass="icon-close"></span></button>
+</div>
+</div>
 <divclass="menu-content">
 <divclass="menu-content-area menu-content-area-header">
 <divclass="menu-item">

js/menu.js

@@ -2,11 +2,16 @@ var menu = (function(){
 
 var_bind=function(){
 varallMenuNavButton=helper.eA(".menu-nav-button");
+varmenuClose=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){