diff --git a/README.md b/README.md index 52fff4a..9640704 100644 --- 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 index c8df9bb..5b52ed3 100644 --- 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; }