Menu button simplify (#2930)

* Simplify the hass-menu button

* Purge showMenu boolean

hassio/src/addon-view/hassio-addon-view.js

@@ -60,11 +60,7 @@ class HassioAddonView extends PolymerElement {
       <app-header-layout has-scrolling-region="">
         <app-header fixed="" slot="header">
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button hassio></ha-menu-button>
-              hassio
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <paper-icon-button
               icon="hassio:arrow-left"
               on-click="backTapped"
@@ -119,8 +115,6 @@ class HassioAddonView extends PolymerElement {
   static get properties() {
     return {
       hass: Object,
-      showMenu: Boolean,
-      narrow: Boolean,
       route: Object,
       routeData: {
         type: Object,

hassio/src/hassio-app.js

@@ -8,12 +8,7 @@ class HassioApp extends PolymerElement {
   static get template() {
     return html`
       <template is="dom-if" if="[[hass]]">
-        <hassio-main
+        <hassio-main hass="[[hass]]" route="[[route]]"></hassio-main>
-          hass="[[hass]]"
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-          route="[[route]]"
-        ></hassio-main>
       </template>
     `;
   }
@@ -21,8 +16,6 @@ class HassioApp extends PolymerElement {
   static get properties() {
     return {
       hass: Object,
-      narrow: Boolean,
-      showMenu: Boolean,
       route: Object,
       hassioPanel: {
         type: Object,
@@ -35,12 +28,9 @@ class HassioApp extends PolymerElement {
     super.ready();
     window.setProperties = this.setProperties.bind(this);
     this.addEventListener("location-changed", () => this._locationChanged());
-    this.addEventListener("hass-open-menu", () => this._menuEvent(true));
+    this.addEventListener("hass-toggle-menu", (ev) =>
-    this.addEventListener("hass-close-menu", () => this._menuEvent(false));
+      this.hassioPanel.fire("hass-toggle-menu", ev.detail)
-  }
+    );
-
-  _menuEvent(shouldOpen) {
-    this.hassioPanel.fire(shouldOpen ? "hass-open-menu" : "hass-close-menu");
   }
 
   _locationChanged() {

hassio/src/hassio-main.js

@@ -28,18 +28,13 @@ class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
       ></hassio-data>
 
       <template is="dom-if" if="[[!loaded]]">
-        <hass-loading-screen
+        <hass-loading-screen></hass-loading-screen>
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></hass-loading-screen>
       </template>
 
       <template is="dom-if" if="[[loaded]]">
         <template is="dom-if" if="[[!equalsAddon(routeData.page)]]">
           <hassio-pages-with-tabs
             hass="[[hass]]"
-            narrow="[[narrow]]"
-            show-menu="[[showMenu]]"
             page="[[routeData.page]]"
             supervisor-info="[[supervisorInfo]]"
             hass-info="[[hassInfo]]"
@@ -49,8 +44,6 @@ class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
         <template is="dom-if" if="[[equalsAddon(routeData.page)]]">
           <hassio-addon-view
             hass="[[hass]]"
-            narrow="[[narrow]]"
-            show-menu="[[showMenu]]"
             route="[[route]]"
           ></hassio-addon-view>
         </template>
@@ -61,8 +54,6 @@ class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
   static get properties() {
     return {
       hass: Object,
-      narrow: Boolean,
-      showMenu: Boolean,
       route: {
         type: Object,
         // Fake route object

hassio/src/hassio-pages-with-tabs.js

@@ -37,11 +37,7 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
       <app-header-layout id="layout" has-scrolling-region>
         <app-header fixed slot="header">
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button hassio></ha-menu-button>
-              hassio
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>Hass.io</div>
             <template is="dom-if" if="[[showRefreshButton(page)]]">
               <paper-icon-button
@@ -107,8 +103,6 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
   static get properties() {
     return {
       hass: Object,
-      showMenu: Boolean,
-      narrow: Boolean,
       page: String,
       supervisorInfo: Object,
       hostInfo: Object,

src/components/ha-menu-button.ts

@@ -11,9 +11,6 @@ import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("ha-menu-button")
 class HaMenuButton extends LitElement {
-  @property({ type: Boolean })
-  public showMenu = false;
-
   @property({ type: Boolean })
   public hassio = false;
 
@@ -33,7 +30,7 @@ class HaMenuButton extends LitElement {
   }
 
   private _toggleMenu(): void {
-    fireEvent(this, this.showMenu ? "hass-close-menu" : "hass-open-menu");
+    fireEvent(this, "hass-toggle-menu");
   }
 }
 

src/entrypoints/custom-panel.js

@@ -55,8 +55,7 @@ function initialize(panel, properties) {
 
         const forwardEvent = (ev) =>
           window.parent.customPanel.fire(ev.type, ev.detail);
-        root.addEventListener("hass-open-menu", forwardEvent);
+        root.addEventListener("hass-toggle-menu", forwardEvent);
-        root.addEventListener("hass-close-menu", forwardEvent);
         root.addEventListener("location-changed", () =>
           window.parent.customPanel.navigate(window.location.pathname)
         );

src/layouts/hass-loading-screen.ts

@@ -4,7 +4,6 @@ import {
   LitElement,
   TemplateResult,
   html,
-  property,
   CSSResultArray,
   css,
   customElement,
@@ -14,19 +13,10 @@ import { haStyle } from "../resources/styles";
 
 @customElement("hass-loading-screen")
 class HassLoadingScreen extends LitElement {
-  @property({ type: Boolean })
-  public narrow?: boolean;
-
-  @property({ type: Boolean })
-  public showMenu?: boolean;
-
   protected render(): TemplateResult | void {
     return html`
       <app-toolbar>
-        <ha-menu-button
+        <ha-menu-button></ha-menu-button>
-          .narrow=${this.narrow}
-          .showMenu=${this.showMenu}
-        ></ha-menu-button>
       </app-toolbar>
       <div class="content">
         <paper-spinner-lite active></paper-spinner-lite>

src/layouts/home-assistant-main.ts

@@ -25,8 +25,7 @@ const NON_SWIPABLE_PANELS = ["kiosk", "map"];
 declare global {
   // for fire event
   interface HASSDomEvents {
-    "hass-open-menu": undefined;
+    "hass-toggle-menu": undefined;
-    "hass-close-menu": undefined;
   }
 }
 
@@ -70,7 +69,6 @@ class HomeAssistantMain extends LitElement {
           .narrow=${this._narrow}
           .hass=${hass}
           .route=${this.route}
-          .showMenu=${hass.dockedSidebar}
         ></partial-panel-resolver>
       </app-drawer-layout>
     `;
@@ -79,17 +77,20 @@ class HomeAssistantMain extends LitElement {
   protected firstUpdated() {
     import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
 
-    this.addEventListener("hass-open-menu", () => {
+    this.addEventListener("hass-toggle-menu", () => {
-      if (this._narrow) {
+      const shouldOpen = !this.drawer.opened;
-        this.drawer.open();
+
+      if (shouldOpen) {
+        if (this._narrow) {
+          this.drawer.open();
+        } else {
+          fireEvent(this, "hass-dock-sidebar", { dock: true });
+        }
       } else {
-        fireEvent(this, "hass-dock-sidebar", { dock: true });
+        this.drawer.close();
-      }
+        if (this.hass!.dockedSidebar) {
-    });
+          fireEvent(this, "hass-dock-sidebar", { dock: false });
-    this.addEventListener("hass-close-menu", () => {
+        }
-      this.drawer.close();
-      if (this.hass!.dockedSidebar) {
-        fireEvent(this, "hass-dock-sidebar", { dock: false });
       }
     });
   }

src/panels/calendar/ha-panel-calendar.js

@@ -67,10 +67,7 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>[[localize('panel.calendar')]]</div>
           </app-toolbar>
         </app-header>
@@ -145,11 +142,6 @@ class HaPanelCalendar extends LocalizeMixin(PolymerElement) {
         type: Boolean,
         reflectToAttribute: true,
       },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
     };
   }
 

src/panels/config/automation/ha-automation-picker.js

@@ -128,15 +128,6 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       automations: {
         type: Array,
       },

src/panels/config/automation/ha-config-automation.js

@@ -31,8 +31,6 @@ class HaConfigAutomation extends PolymerElement {
       <template is="dom-if" if="[[!showEditor]]">
         <ha-automation-picker
           hass="[[hass]]"
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
           automations="[[automations]]"
           is-wide="[[isWide]]"
         ></ha-automation-picker>
@@ -52,8 +50,6 @@ class HaConfigAutomation extends PolymerElement {
   static get properties() {
     return {
       hass: Object,
-      narrow: Boolean,
-      showMenu: Boolean,
       route: Object,
       isWide: Boolean,
       _routeData: Object,

src/panels/config/dashboard/ha-config-dashboard.js

@@ -40,7 +40,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
     <app-header-layout has-scrolling-region="">
       <app-header slot="header" fixed="">
         <app-toolbar>
-          <ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
+          <ha-menu-button></ha-menu-button>
           <div main-title="">[[localize('panel.config')]]</div>
         </app-toolbar>
       </app-header>
@@ -111,8 +111,6 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
       hass: Object,
       isWide: Boolean,
       cloudStatus: Object,
-      narrow: Boolean,
-      showMenu: Boolean,
     };
   }
 

src/panels/config/ha-config-section.js

@@ -75,11 +75,6 @@ class HaConfigSection extends PolymerElement {
         type: Boolean,
       },
 
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       isWide: {
         type: Boolean,
         value: false,

src/panels/config/script/ha-config-script.js

@@ -32,8 +32,6 @@ class HaConfigScript extends PolymerElement {
       <template is="dom-if" if="[[!showEditor]]">
         <ha-script-picker
           hass="[[hass]]"
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
           scripts="[[scripts]]"
           is-wide="[[isWide]]"
         ></ha-script-picker>
@@ -53,8 +51,6 @@ class HaConfigScript extends PolymerElement {
   static get properties() {
     return {
       hass: Object,
-      narrow: Boolean,
-      showMenu: Boolean,
       route: Object,
       isWide: Boolean,
       _routeData: Object,

src/panels/config/script/ha-script-editor.js

@@ -130,15 +130,6 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       errors: {
         type: Object,
         value: null,

src/panels/config/script/ha-script-picker.js

@@ -124,15 +124,6 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       scripts: {
         type: Array,
       },

src/panels/custom/ha-panel-custom.js

@@ -16,7 +16,6 @@ class HaPanelCustom extends NavigateMixin(EventsMixin(PolymerElement)) {
     return {
       hass: Object,
       narrow: Boolean,
-      showMenu: Boolean,
       route: Object,
       panel: {
         type: Object,
@@ -26,7 +25,7 @@ class HaPanelCustom extends NavigateMixin(EventsMixin(PolymerElement)) {
   }
 
   static get observers() {
-    return ["_dataChanged(hass, narrow, showMenu, route)"];
+    return ["_dataChanged(hass, narrow, route)"];
   }
 
   constructor() {
@@ -74,7 +73,6 @@ It will have access to all data in Home Assistant.
             panel,
             hass: this.hass,
             narrow: this.narrow,
-            showMenu: this.showMenu,
             route: this.route,
           });
           this.appendChild(element);
@@ -109,16 +107,15 @@ It will have access to all data in Home Assistant.
     delete window.customPanel;
   }
 
-  _dataChanged(hass, narrow, showMenu, route) {
+  _dataChanged(hass, narrow, route) {
     if (!this._setProperties) return;
-    this._setProperties({ hass, narrow, showMenu, route });
+    this._setProperties({ hass, narrow, route });
   }
 
   registerIframe(initialize, setProperties) {
     initialize(this.panel, {
       hass: this.hass,
       narrow: this.narrow,
-      showMenu: this.showMenu,
       route: this.route,
     });
     this._setProperties = setProperties;

src/panels/dev-event/ha-panel-dev-event.js

@@ -52,10 +52,7 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>Events</div>
           </app-toolbar>
         </app-header>
@@ -100,16 +97,6 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       eventType: {
         type: String,
         value: "",

src/panels/dev-info/ha-panel-dev-info.ts

@@ -23,14 +23,10 @@ const OPT_IN_PANEL = "states";
 
 class HaPanelDevInfo extends LitElement {
   public hass?: HomeAssistant;
-  public narrow?: boolean;
-  public showMenu?: boolean;
 
   static get properties(): PropertyDeclarations {
     return {
       hass: {},
-      narrow: {},
-      showMenu: {},
     };
   }
 
@@ -60,10 +56,7 @@ class HaPanelDevInfo extends LitElement {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              .narrow="${this.narrow}"
-              .showMenu="${this.showMenu}"
-            ></ha-menu-button>
             <div main-title>About</div>
           </app-toolbar>
         </app-header>

src/panels/dev-mqtt/ha-panel-dev-mqtt.js

@@ -41,10 +41,7 @@ class HaPanelDevMqtt extends PolymerElement {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>MQTT</div>
           </app-toolbar>
         </app-header>
@@ -80,8 +77,6 @@ class HaPanelDevMqtt extends PolymerElement {
   static get properties() {
     return {
       hass: Object,
-      narrow: Boolean,
-      showMenu: Boolean,
       topic: String,
       payload: String,
     };

src/panels/dev-service/ha-panel-dev-service.js

@@ -84,10 +84,7 @@ class HaPanelDevService extends PolymerElement {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>Services</div>
           </app-toolbar>
         </app-header>
@@ -187,16 +184,6 @@ class HaPanelDevService extends PolymerElement {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       domainService: {
         type: String,
         observer: "_domainServiceChanged",

src/panels/dev-state/ha-panel-dev-state.js

@@ -73,10 +73,7 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>States</div>
           </app-toolbar>
         </app-header>
@@ -183,16 +180,6 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       _entityId: {
         type: String,
         value: "",

src/panels/dev-template/ha-panel-dev-template.js

@@ -70,10 +70,7 @@ class HaPanelDevTemplate extends PolymerElement {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>Templates</div>
           </app-toolbar>
         </app-header>
@@ -125,16 +122,6 @@ class HaPanelDevTemplate extends PolymerElement {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       error: {
         type: Boolean,
         value: false,

src/panels/history/ha-panel-history.js

@@ -65,10 +65,7 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>[[localize('panel.history')]]</div>
           </app-toolbar>
         </app-header>
@@ -123,15 +120,6 @@ class HaPanelHistory extends LocalizeMixin(PolymerElement) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       stateHistory: {
         type: Object,
         value: null,

src/panels/iframe/ha-panel-iframe.js

@@ -16,10 +16,7 @@ class HaPanelIframe extends PolymerElement {
         }
       </style>
       <app-toolbar>
-        <ha-menu-button
+        <ha-menu-button></ha-menu-button>
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></ha-menu-button>
         <div main-title>[[panel.title]]</div>
       </app-toolbar>
 
@@ -38,14 +35,6 @@ class HaPanelIframe extends PolymerElement {
       panel: {
         type: Object,
       },
-
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-      },
     };
   }
 }

src/panels/logbook/ha-panel-logbook.js

@@ -89,10 +89,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>[[localize('panel.logbook')]]</div>
             <paper-icon-button
               icon="hass:refresh"
@@ -164,16 +161,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       // ISO8601 formatted date string
       _currentDate: {
         type: String,

src/panels/lovelace/ha-panel-lovelace.ts

@@ -26,7 +26,6 @@ class LovelacePanel extends LitElement {
   public panel?: PanelInfo<LovelacePanelConfig>;
   public hass?: HomeAssistant;
   public narrow?: boolean;
-  public showMenu?: boolean;
   public route?: Route;
   private _columns?: number;
   private _state?: "loading" | "loaded" | "error" | "yaml-editor";
@@ -38,8 +37,6 @@ class LovelacePanel extends LitElement {
     return {
       hass: {},
       lovelace: {},
-      narrow: {},
-      showMenu: {},
       route: {},
       _columns: {},
       _state: {},
@@ -60,8 +57,6 @@ class LovelacePanel extends LitElement {
     if (state === "loaded") {
       return html`
         <hui-root
-          .narrow="${this.narrow}"
-          .showMenu="${this.showMenu}"
           .hass="${this.hass}"
           .lovelace="${this.lovelace}"
           .route="${this.route}"
@@ -73,12 +68,7 @@ class LovelacePanel extends LitElement {
 
     if (state === "error") {
       return html`
-        <hass-error-screen
+        <hass-error-screen title="Lovelace" .error="${this._errorMsg}">
-          title="Lovelace"
-          .error="${this._errorMsg}"
-          .narrow="${this.narrow}"
-          .showMenu="${this.showMenu}"
-        >
           <mwc-button on-click="_forceFetchConfig">Reload Lovelace</mwc-button>
         </hass-error-screen>
       `;
@@ -95,16 +85,25 @@ class LovelacePanel extends LitElement {
     }
 
     return html`
-      <hass-loading-screen
+      <hass-loading-screen></hass-loading-screen>
-        .narrow="${this.narrow}"
-        .showMenu="${this.showMenu}"
-      ></hass-loading-screen>
     `;
   }
 
   public updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
-    if (changedProps.has("narrow") || changedProps.has("showMenu")) {
+
+    if (changedProps.has("narrow")) {
+      this._updateColumns();
+      return;
+    }
+
+    if (!changedProps.has("hass")) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as this["hass"];
+
+    if (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) {
       this._updateColumns();
     }
   }
@@ -144,7 +143,7 @@ class LovelacePanel extends LitElement {
     // Do -1 column if the menu is docked and open
     this._columns = Math.max(
       1,
-      matchColumns - Number(!this.narrow && this.showMenu)
+      matchColumns - Number(!this.narrow && this.hass!.dockedSidebar)
     );
   }
 

src/panels/lovelace/hui-root.ts

@@ -6,6 +6,7 @@ import {
   TemplateResult,
   CSSResult,
   css,
+  property,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import "@polymer/app-layout/app-header-layout/app-header-layout";
@@ -60,39 +61,21 @@ const JS_CACHE = {};
 let loadedUnusedEntities = false;
 
 class HUIRoot extends LitElement {
-  public narrow?: boolean;
+  @property() public hass?: HomeAssistant;
-  public showMenu?: boolean;
+  @property() public lovelace?: Lovelace;
-  public hass?: HomeAssistant;
+  @property() public columns?: number;
-  public lovelace?: Lovelace;
+  @property() public route?: { path: string; prefix: string };
-  public columns?: number;
+  @property() private _routeData?: { view: string };
-  public route?: { path: string; prefix: string };
+  @property() private _curView?: number | "hass-unused-entities";
-  private _routeData?: { view: string };
+  @property() private _notificationsOpen = false;
-  private _curView?: number | "hass-unused-entities";
+  @property() private _persistentNotifications?: Notification[];
-  private _notificationsOpen: boolean;
-  private _persistentNotifications?: Notification[];
   private _viewCache?: { [viewId: string]: HUIView };
 
   private _debouncedConfigChanged: () => void;
   private _unsubNotifications?: () => void;
 
-  static get properties(): PropertyDeclarations {
-    return {
-      narrow: {},
-      showMenu: {},
-      hass: {},
-      lovelace: {},
-      columns: {},
-      route: {},
-      _routeData: {},
-      _curView: {},
-      _notificationsOpen: {},
-      _persistentNotifications: {},
-    };
-  }
-
   constructor() {
     super();
-    this._notificationsOpen = false;
     // The view can trigger a re-render when it knows that certain
     // web components have been loaded.
     this._debouncedConfigChanged = debounce(
@@ -181,10 +164,7 @@ class HUIRoot extends LitElement {
               `
             : html`
                 <app-toolbar>
-                  <ha-menu-button
+                  <ha-menu-button></ha-menu-button>
-                    .narrow="${this.narrow}"
-                    .showMenu="${this.showMenu}"
-                  ></ha-menu-button>
                   <div main-title>${this.config.title || "Home Assistant"}</div>
                   <hui-notifications-button
                     .hass="${this.hass}"

src/panels/mailbox/ha-panel-mailbox.js

@@ -80,10 +80,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>[[localize('panel.mailbox')]]</div>
           </app-toolbar>
           <div sticky hidden$="[[areTabsHidden(platforms)]]">
@@ -135,16 +132,6 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) {
         type: Object,
       },
 
-      narrow: {
-        type: Boolean,
-        value: false,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
       platforms: {
         type: Array,
       },

src/panels/map/ha-panel-map.js

@@ -27,10 +27,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
       </style>
 
       <app-toolbar>
-        <ha-menu-button
+        <ha-menu-button></ha-menu-button>
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></ha-menu-button>
         <div main-title>[[localize('panel.map')]]</div>
       </app-toolbar>
 
@@ -44,15 +41,6 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
         type: Object,
         observer: "drawEntities",
       },
-
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
     };
   }
 

src/panels/profile/ha-panel-profile.js

@@ -52,10 +52,7 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>[[localize('panel.profile')]]</div>
           </app-toolbar>
         </app-header>
@@ -121,7 +118,6 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
     return {
       hass: Object,
       narrow: Boolean,
-      showMenu: Boolean,
       _refreshTokens: Array,
     };
   }

src/panels/shopping-list/ha-panel-shopping-list.js

@@ -70,10 +70,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
       <app-header-layout has-scrolling-region>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title>[[localize('panel.shopping_list')]]</div>
             <ha-start-voice-button
               hass="[[hass]]"
@@ -145,8 +142,6 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
   static get properties() {
     return {
       hass: Object,
-      narrow: Boolean,
-      showMenu: Boolean,
       canListen: Boolean,
       items: {
         type: Array,

src/panels/states/ha-panel-states.js

@@ -65,10 +65,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
       <ha-app-layout id="layout">
         <app-header effects="waterfall" condenses="" fixed="" slot="header">
           <app-toolbar>
-            <ha-menu-button
+            <ha-menu-button></ha-menu-button>
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
             <div main-title="">
               [[computeTitle(views, defaultView, locationName)]]
             </div>
@@ -160,10 +157,6 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
         value: false,
       },
 
-      showMenu: {
-        type: Boolean,
-      },
-
       panelVisible: {
         type: Boolean,
         value: false,
@@ -215,7 +208,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
   }
 
   static get observers() {
-    return ["_updateColumns(narrow, showMenu)"];
+    return ["_updateColumns(narrow, hass.dockedSidebar)"];
   }
 
   ready() {
@@ -239,7 +232,10 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
   _updateColumns() {
     const matchColumns = this.mqls.reduce((cols, mql) => cols + mql.matches, 0);
     // Do -1 column if the menu is docked and open
-    this._columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
+    this._columns = Math.max(
+      1,
+      matchColumns - (!this.narrow && this.hass.dockedSidebar)
+    );
   }
 
   areTabsHidden(views, showTabs) {

src/types.ts

@@ -225,7 +225,6 @@ export interface Route {
 export interface PanelElement extends HTMLElement {
   hass?: HomeAssistant;
   narrow?: boolean;
-  showMenu?: boolean;
   route?: Route | null;
   panel?: Panel;
 }