Menu button simplify (#2930)

* Simplify the hass-menu button * Purge showMenu boolean
2025-07-21 08:16:36 +00:00 · 2019-03-14 13:54:46 -07:00 · 2019-03-14 13:54:46 -07:00 · 8785b03fd8
commit 8785b03fd8
parent 92e6c5adfd
34 changed files with 74 additions and 331 deletions
--- a/hassio/src/addon-view/hassio-addon-view.js
+++ b/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
-              hassio
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button hassio></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,
--- a/hassio/src/hassio-app.js
+++ b/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
-          hass="[[hass]]"
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-          route="[[route]]"
-        ></hassio-main>
+        <hassio-main hass="[[hass]]" 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-close-menu", () => this._menuEvent(false));
-  }
-
-  _menuEvent(shouldOpen) {
-    this.hassioPanel.fire(shouldOpen ? "hass-open-menu" : "hass-close-menu");
+    this.addEventListener("hass-toggle-menu", (ev) =>
+      this.hassioPanel.fire("hass-toggle-menu", ev.detail)
+    );
  }

  _locationChanged() {
--- a/hassio/src/hassio-main.js
+++ b/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
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></hass-loading-screen>
+        <hass-loading-screen></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
--- a/hassio/src/hassio-pages-with-tabs.js
+++ b/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
-              hassio
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button hassio></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,
--- a/src/components/ha-menu-button.ts
+++ b/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");
  }
 }

--- a/src/entrypoints/custom-panel.js
+++ b/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-close-menu", forwardEvent);
+        root.addEventListener("hass-toggle-menu", forwardEvent);
        root.addEventListener("location-changed", () =>
          window.parent.customPanel.navigate(window.location.pathname)
        );
--- a/src/layouts/hass-loading-screen.ts
+++ b/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
-          .narrow=${this.narrow}
-          .showMenu=${this.showMenu}
-        ></ha-menu-button>
+        <ha-menu-button></ha-menu-button>
      </app-toolbar>
      <div class="content">
        <paper-spinner-lite active></paper-spinner-lite>
--- a/src/layouts/home-assistant-main.ts
+++ b/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-close-menu": undefined;
+    "hass-toggle-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,18 +77,21 @@ class HomeAssistantMain extends LitElement {
  protected firstUpdated() {
    import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");

-    this.addEventListener("hass-open-menu", () => {
+    this.addEventListener("hass-toggle-menu", () => {
+      const shouldOpen = !this.drawer.opened;
+
+      if (shouldOpen) {
        if (this._narrow) {
          this.drawer.open();
        } else {
          fireEvent(this, "hass-dock-sidebar", { dock: true });
        }
-    });
-    this.addEventListener("hass-close-menu", () => {
+      } else {
        this.drawer.close();
        if (this.hass!.dockedSidebar) {
          fireEvent(this, "hass-dock-sidebar", { dock: false });
        }
+      }
    });
  }

--- a/src/panels/calendar/ha-panel-calendar.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
-      },
    };
  }

--- a/src/panels/config/automation/ha-automation-picker.js
+++ b/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,
      },
--- a/src/panels/config/automation/ha-config-automation.js
+++ b/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,
--- a/src/panels/config/dashboard/ha-config-dashboard.js
+++ b/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,
    };
  }

--- a/src/panels/config/ha-config-section.js
+++ b/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,
--- a/src/panels/config/script/ha-config-script.js
+++ b/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,
--- a/src/panels/config/script/ha-script-editor.js
+++ b/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,
--- a/src/panels/config/script/ha-script-picker.js
+++ b/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,
      },
--- a/src/panels/custom/ha-panel-custom.js
+++ b/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;
--- a/src/panels/dev-event/ha-panel-dev-event.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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: "",
--- a/src/panels/dev-info/ha-panel-dev-info.ts
+++ b/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
-              .narrow="${this.narrow}"
-              .showMenu="${this.showMenu}"
-            ></ha-menu-button>
+            <ha-menu-button></ha-menu-button>
            <div main-title>About</div>
          </app-toolbar>
        </app-header>
--- a/src/panels/dev-mqtt/ha-panel-dev-mqtt.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
    };
--- a/src/panels/dev-service/ha-panel-dev-service.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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",
--- a/src/panels/dev-state/ha-panel-dev-state.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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: "",
--- a/src/panels/dev-template/ha-panel-dev-template.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
--- a/src/panels/history/ha-panel-history.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
--- a/src/panels/iframe/ha-panel-iframe.js
+++ b/src/panels/iframe/ha-panel-iframe.js
@ -16,10 +16,7 @@ class HaPanelIframe extends PolymerElement {
        }
      </style>
      <app-toolbar>
-        <ha-menu-button
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></ha-menu-button>
+        <ha-menu-button></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,
-      },
    };
  }
 }
--- a/src/panels/logbook/ha-panel-logbook.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/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
-          title="Lovelace"
-          .error="${this._errorMsg}"
-          .narrow="${this.narrow}"
-          .showMenu="${this.showMenu}"
-        >
+        <hass-error-screen title="Lovelace" .error="${this._errorMsg}">
          <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
-        .narrow="${this.narrow}"
-        .showMenu="${this.showMenu}"
-      ></hass-loading-screen>
+      <hass-loading-screen></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)
    );
  }

--- a/src/panels/lovelace/hui-root.ts
+++ b/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;
-  public showMenu?: boolean;
-  public hass?: HomeAssistant;
-  public lovelace?: Lovelace;
-  public columns?: number;
-  public route?: { path: string; prefix: string };
-  private _routeData?: { view: string };
-  private _curView?: number | "hass-unused-entities";
-  private _notificationsOpen: boolean;
-  private _persistentNotifications?: Notification[];
+  @property() public hass?: HomeAssistant;
+  @property() public lovelace?: Lovelace;
+  @property() public columns?: number;
+  @property() public route?: { path: string; prefix: string };
+  @property() private _routeData?: { view: string };
+  @property() private _curView?: number | "hass-unused-entities";
+  @property() private _notificationsOpen = false;
+  @property() 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
-                    .narrow="${this.narrow}"
-                    .showMenu="${this.showMenu}"
-                  ></ha-menu-button>
+                  <ha-menu-button></ha-menu-button>
                  <div main-title>${this.config.title || "Home Assistant"}</div>
                  <hui-notifications-button
                    .hass="${this.hass}"
--- a/src/panels/mailbox/ha-panel-mailbox.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
      },
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@ -27,10 +27,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
      </style>

      <app-toolbar>
-        <ha-menu-button
-          narrow="[[narrow]]"
-          show-menu="[[showMenu]]"
-        ></ha-menu-button>
+        <ha-menu-button></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,
-      },
    };
  }

--- a/src/panels/profile/ha-panel-profile.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
    };
  }
--- a/src/panels/shopping-list/ha-panel-shopping-list.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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,
--- a/src/panels/states/ha-panel-states.js
+++ b/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
-              narrow="[[narrow]]"
-              show-menu="[[showMenu]]"
-            ></ha-menu-button>
+            <ha-menu-button></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) {
--- a/src/types.ts
+++ b/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;
 }