Added option to hide the sidebar menu icon. (maykar#70)

* Added option to hide the sidebar menu icon. * Update README.md Co-authored-by: Ryan Meek <25127328+maykar@users.noreply.github.com>
nghaye · Oct 15, 2021 · 5c29a5a · 5c29a5a
1 parent 9bb52f6
commit 5c29a5a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -65,7 +65,8 @@ resources:
 |:---------------|:---------------|:---------------|:----------|
 |`kiosk:`| Boolean | false | Hides both the header and sidebar.
 |`hide_header:` | Boolean | false | Hides only the header.
-|`hide_sidebar:` | Boolean | false | Hides only the sidebar.
+|`hide_sidebar:` | Boolean | false | Hides only the sidebar. Disables swipe to open.
+|`hide_menubutton:` | Boolean | false | Hides only the sidebar menu icon. Does not disable swipe to open.
 |`hide_overflow:` | Boolean | false | Hides the top right menu.
 |`ignore_entity_settings:` | Boolean | false | Useful for [conditional configs](#conditional-lovelace-config) and will cause `entity_settings` to be ignored.
 |`ignore_mobile_settings:` | Boolean | false | Useful for [conditional configs](#conditional-lovelace-config) and will cause `mobile_settings` to be ignored.
@@ -183,6 +184,7 @@ The query string options are:
 * `?hide_header` to hide only the header
 * `?hide_sidebar` to hide only the sidebar
 * `?hide_overflow` to hide the top right menu
+* `?hide_menubutton` to hide sidebar menu button
 
 ## Query String Caching
 

diff --git a/kiosk-mode.js b/kiosk-mode.js
@@ -1,7 +1,7 @@
 class KioskMode {
   constructor() {
     window.kioskModeEntities = {};
-    if (this.queryString("clear_km_cache")) this.setCache(["kmHeader", "kmSidebar", "kmOverflow"], "false");
+    if (this.queryString("clear_km_cache")) this.setCache(["kmHeader", "kmSidebar", "kmOverflow", "kmMenuButton"], "false");
     this.ha = document.querySelector("home-assistant");
     this.main = this.ha.shadowRoot.querySelector("home-assistant-main").shadowRoot;
     this.user = this.ha.hass.user;
@@ -42,17 +42,19 @@ class KioskMode {
 
     // Retrieve localStorage values & query string options.
     const queryStringsSet =
-      this.cached(["kmHeader", "kmSidebar", "kmOverflow"]) || this.queryString(["kiosk", "hide_sidebar", "hide_header", "hide_overflow"]);
+      this.cached(["kmHeader", "kmSidebar", "kmOverflow", "kmMenuButton"]) || this.queryString(["kiosk", "hide_sidebar", "hide_header", "hide_overflow", "hide_menubutton"]);
     if (queryStringsSet) {
       this.hideHeader = this.cached("kmHeader") || this.queryString(["kiosk", "hide_header"]);
       this.hideSidebar = this.cached("kmSidebar") || this.queryString(["kiosk", "hide_sidebar"]);
-      this.hideOverflow = this.cached("kmOverflow") || this.queryString(["kiosk", "hide_overflow"])
+      this.hideOverflow = this.cached("kmOverflow") || this.queryString(["kiosk", "hide_overflow"]);
+      this.hideMenuButton = this.cached("kmMenuButton") || this.queryString(["kiosk", "hide_menubutton"]);
     }
 
     // Use config values only if config strings and cache aren't used.
     this.hideHeader = queryStringsSet ? this.hideHeader : config.kiosk || config.hide_header;
     this.hideSidebar = queryStringsSet ? this.hideSidebar : config.kiosk || config.hide_sidebar;
     this.hideOverflow = queryStringsSet ? this.hideOverflow : config.kiosk || config.hide_overflow;
+    this.hideMenuButton = queryStringsSet ? this.hideMenuButton : config.kiosk || config.hide_menubutton;
 
     const adminConfig = this.user.is_admin ? config.admin_settings : config.non_admin_settings;
     if (adminConfig) this.setOptions(adminConfig);
@@ -78,6 +80,7 @@ class KioskMode {
           if ("hide_header" in conf) this.hideHeader = conf.hide_header;
           if ("hide_sidebar" in conf) this.hideSidebar = conf.hide_sidebar;
           if ("hide_overflow" in conf) this.hideOverflow = conf.hide_overflow;
+          if ("hide_menubutton" in conf) this.hideMenuButton = conf.hide_menubutton;
           if ("kiosk" in conf) this.hideHeader = this.hideSidebar = conf.kiosk;
         }
       }
@@ -111,6 +114,13 @@ class KioskMode {
       this.removeStyle([appToolbar, drawerLayout]);
     }
 
+    if (this.hideMenuButton) {
+      this.addStyle("ha-menu-button{display:none !important;}", appToolbar);
+      if (this.queryString("cache")) this.setCache("kmMenuButton", "true");
+    } else {
+      this.removeStyle(appToolbar);
+    }
+
     // Resize window to "refresh" view.
     window.dispatchEvent(new Event("resize"));
 
@@ -147,7 +157,8 @@ class KioskMode {
   setOptions(config) {
     this.hideHeader = config.kiosk || config.hide_header;
     this.hideSidebar = config.kiosk || config.hide_sidebar;
-    this.hideOverflow = config.kiosk || config.hide_overflow
+    this.hideOverflow = config.kiosk || config.hide_overflow;
+    this.hideMenuButton = config.kiosk || config.hide_menubutton;
     this.ignoreEntity = config.ignore_entity_settings;
     this.ignoreMobile = config.ignore_mobile_settings;
   }