Menu button simplify

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,

hassio/src/hassio-app.js

@@ -8,21 +8,14 @@ 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>
     `;
   }
 
   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() {

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

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,

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-close-menu", forwardEvent);
+        root.addEventListener("hass-toggle-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
-          .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>

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,17 +77,20 @@ class HomeAssistantMain extends LitElement {
   protected firstUpdated() {
     import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
 
-    this.addEventListener("hass-open-menu", () => {
-      if (this._narrow) {
-        this.drawer.open();
+    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 });
+        }
       } else {
-        fireEvent(this, "hass-dock-sidebar", { dock: true });
-      }
-    });
-    this.addEventListener("hass-close-menu", () => {
-      this.drawer.close();
-      if (this.hass!.dockedSidebar) {
-        fireEvent(this, "hass-dock-sidebar", { dock: false });
+        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
-              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,
-      },
     };
   }
 

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,
       },