[refactor] improve menu render

src/css/menu.css

@@ -40,15 +40,19 @@
   flex-direction: row;
 }
 
-.menu-nav-area {
+.menu-nav-area-tab {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: flex-start;
+  flex-grow: 1;
 }
 
-.menu-nav-area-grow {
-  flex-grow: 1;
+.menu-nav-area-close {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
 }
 
 .menu-nav:not(:last-child) {
@@ -85,31 +89,23 @@
   padding: 0 0 2em 2em;
 }
 
-.menu-close {
-  background-color: transparent;
-  margin: 0;
-  padding-top: 0.75em;
-  padding-bottom: 0.75em;
-  border-radius: 0 var(--theme-radius) 0 0;
-}
-
 .menu-nav-button {
   background-color: transparent;
-  margin: 0;
-  padding: 1em;
   border-radius: 0;
+  margin: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 3.25em;
+  line-height: 1;
   flex-grow: 1;
 }
 
-.menu-nav-button:first-child {
+.menu-nav-area-tab .menu-nav-button:first-child {
   border-radius: var(--theme-radius) 0 0 0;
 }
 
-.menu-nav-button [class^="icon-"],
-.menu-nav-button [class*=" icon-"] {
-  line-height: 1;
-  padding-top: 1.5em;
-  padding-bottom: 1.5em;
+.menu-nav-area-close .menu-nav-button {
+  border-radius: 0 var(--theme-radius) 0 0;
 }
 
 @media (min-width: 550px) {
@@ -117,7 +113,7 @@
     width: 80vw;
   }
 
-  .menu-nav-button {
+  .menu-nav-area-tab .menu-nav-button {
     flex-basis: 33.3333333333%;
     max-width: 33.3333333333%;
   }
@@ -160,7 +156,7 @@
     z-index: 3;
   }
 
-  .menu-nav-button {
+  .menu-nav-area-tab .menu-nav-button {
     flex-basis: 50%;
     max-width: 50%;
   }
@@ -180,14 +176,14 @@
     grid-template-columns: 1fr 2fr;
   }
 
-  .menu-nav-button {
+  .menu-nav-area-tab .menu-nav-button {
     flex-basis: 33.3333333333%;
     max-width: 33.3333333333%;
   }
 }
 
 @media (min-width: 1100px) {
-  .menu-nav-button {
+  .menu-nav-area-tab .menu-nav-button {
     flex-basis: 0;
     max-width: inherit;
   }

src/js/control.js

@@ -1,10 +1,64 @@
 var control = (function() {
 
   var _allControl = [{
-    element: helper.e(".control-menu"),
+    element: helper.e(".control-menu-open"),
     type: "button",
     func: function() {
-      menu.toggle();
+      menu.mod.open();
+      menu.render.toggle();
+      menu.render.tabindex.toggle();
+      pagelock.render.toggle();
+    }
+  }, {
+    element: helper.e(".control-menu-layout"),
+    type: "button",
+    func: function() {
+      menu.render.tab(this.element, helper.e(".menu-content-area-layout"));
+    }
+  }, {
+    element: helper.e(".control-menu-header"),
+    type: "button",
+    func: function() {
+      menu.render.tab(this.element, helper.e(".menu-content-area-header"));
+    }
+  }, {
+    element: helper.e(".control-menu-bookmarks"),
+    type: "button",
+    func: function() {
+      menu.render.tab(this.element, helper.e(".menu-content-area-bookmarks"));
+    }
+  }, {
+    element: helper.e(".control-menu-theme"),
+    type: "button",
+    func: function() {
+      menu.render.tab(this.element, helper.e(".menu-content-area-theme"));
+    }
+  }, {
+    element: helper.e(".control-menu-background"),
+    type: "button",
+    func: function() {
+      menu.render.tab(this.element, helper.e(".menu-content-area-background"));
+    }
+  }, {
+    element: helper.e(".control-menu-data"),
+    type: "button",
+    func: function() {
+      menu.render.tab(this.element, helper.e(".menu-content-area-data"));
+    }
+  }, {
+    element: helper.e(".control-menu-nightTab"),
+    type: "button",
+    func: function() {
+      menu.render.tab(this.element, helper.e(".menu-content-area-nightTab"));
+    }
+  }, {
+    element: helper.e(".control-menu-close"),
+    type: "button",
+    func: function() {
+      shade.destroy();
+      menu.mod.close();
+      menu.render.toggle();
+      menu.render.tabindex.toggle();
       pagelock.render.toggle();
     }
   }, {
@@ -1448,14 +1502,14 @@ var control = (function() {
       event: "input",
       func: function() {
         edge.render.box({
-          element: helper.e(".control-menu"),
+          element: helper.e(".control-menu-open"),
         });
       }
     }, {
       event: "mousedown",
       func: function() {
         edge.render.box({
-          element: helper.e(".control-menu"),
+          element: helper.e(".control-menu-open"),
         });
       }
     }, {
@@ -1473,7 +1527,7 @@ var control = (function() {
       func: function() {
         if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
           edge.render.box({
-            element: helper.e(".control-menu"),
+            element: helper.e(".control-menu-open"),
           });
         };
       }
@@ -1493,7 +1547,7 @@ var control = (function() {
       event: "click",
       func: function() {
         edge.render.box({
-          element: helper.e(".control-menu"),
+          element: helper.e(".control-menu-open"),
           delay: 500
         });
       }

src/js/header.js

@@ -137,13 +137,13 @@ var header = (function() {
           helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
           helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
           helper.removeClass(helper.e(".control-link-add"), "button-link");
-          helper.removeClass(helper.e(".control-menu"), "button-link");
+          helper.removeClass(helper.e(".control-menu-open"), "button-link");
         },
         clear: function() {
           helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
           helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
           helper.addClass(helper.e(".control-link-add"), "button-link");
-          helper.addClass(helper.e(".control-menu"), "button-link");
+          helper.addClass(helper.e(".control-menu-open"), "button-link");
         }
       };
       action[state.get().header.button.style]();

src/js/menu.js

@@ -1,65 +1,24 @@
 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();
-      pagelock.render.toggle();
-    }, false);
-  };
+  var mod = {};
 
-  var _scrollToTop = function() {
-    if (window.innerWidth < 550) {
-      helper.e(".menu-area").scrollTop = 0;
-    } else {
-      helper.e(".menu-content").scrollTop = 0;
-    };
-  };
-
-  var _tab = function(button) {
-    var allMenuNavButton = helper.eA(".menu-nav-button");
-    var allMenuContentArea = helper.eA(".menu-content-area");
-    var target = helper.e(button.dataset.target);
-    allMenuNavButton.forEach(function(arrayItem, index) {
-      helper.removeClass(arrayItem, "active");
-    });
-    allMenuContentArea.forEach(function(arrayItem, index) {
-      helper.addClass(arrayItem, "is-hidden");
-    });
-    helper.addClass(button, "active");
-    helper.removeClass(target, "is-hidden");
-    _scrollToTop();
-  };
-
-  var close = function() {
-    helper.setObject({
-      object: state.get(),
-      path: "menu",
-      newValue: false
-    });
-    render.menu();
-    render.tabindex();
-  };
-
-  var open = function() {
-    _scrollToTop();
+  mod.open = function() {
     helper.setObject({
       object: state.get(),
       path: "menu",
       newValue: true
     });
-    render.menu();
-    render.tabindex();
   };
 
-  var toggle = function() {
+  mod.close = function() {
+    helper.setObject({
+      object: state.get(),
+      path: "menu",
+      newValue: false
+    });
+  };
+
+  mod.toggle = function() {
     if (state.get().menu) {
       helper.setObject({
         object: state.get(),
@@ -67,27 +26,49 @@ var menu = (function() {
         newValue: false
       });
     } else {
-      _scrollToTop();
+      render.scrollToTop();
       helper.setObject({
         object: state.get(),
         path: "menu",
         newValue: true
       });
     };
-    render.menu();
-    render.tabindex();
   };
 
   var render = {};
 
-  render.menu = function() {
+  render.scrollToTop = function() {
+    if (window.innerWidth < 550) {
+      helper.e(".menu-area").scrollTop = 0;
+    } else {
+      helper.e(".menu-content").scrollTop = 0;
+    };
+  };
+
+  render.tab = function(menuNavButton, menuContentArea) {
+    var allMenuNavButton = helper.eA(".menu-nav-button");
+    var allMenuContentArea = helper.eA(".menu-content-area");
+    allMenuNavButton.forEach(function(arrayItem, index) {
+      helper.removeClass(arrayItem, "active");
+    });
+    allMenuContentArea.forEach(function(arrayItem, index) {
+      helper.addClass(arrayItem, "is-hidden");
+    });
+    helper.addClass(menuNavButton, "active");
+    helper.removeClass(menuContentArea, "is-hidden");
+    render.scrollToTop();
+  };
+
+  render.toggle = function() {
     var html = helper.e("html");
     if (state.get().menu) {
       helper.addClass(html, "is-menu-open");
       helper.e(".menu").focus();
       shade.render({
         action: function() {
-          close();
+          mod.close();
+          render.toggle();
+          menu.render.tabindex.toggle();
           pagelock.render.toggle();
         }
       });
@@ -96,31 +77,31 @@ var menu = (function() {
     };
   };
 
-  render.tabindex = function() {
-    var menu = helper.e(".menu");
-    if (state.get().menu) {
-      menu.tabIndex = 1;
-      menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
-        arrayItem.tabIndex = 1;
-      });
-    } else {
-      menu.tabIndex = -1;
-      menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
-        arrayItem.tabIndex = -1;
-      });
-    };
+  render.tabindex = {
+    toggle: function() {
+      var menu = helper.e(".menu");
+      if (state.get().menu) {
+        menu.tabIndex = 1;
+        menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
+          arrayItem.tabIndex = 1;
+        });
+      } else {
+        menu.tabIndex = -1;
+        menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) {
+          arrayItem.tabIndex = -1;
+        });
+      };
+    }
   };
 
   var init = function() {
-    _bind();
-    close();
+    mod.close();
+    render.toggle();
   };
 
   return {
     init: init,
-    close: close,
-    open: open,
-    toggle: toggle,
+    mod: mod,
     render: render
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.41.0";
+  var current = "3.42.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.41.0",
+  "version": "3.42.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"