Add edit sidebar button to profile (#6943)

src/components/ha-settings-row.ts

@@ -1,3 +1,4 @@
+import "@polymer/paper-item/paper-item-body";
 import {
   css,
   CSSResult,
@@ -7,7 +8,6 @@ import {
   property,
   SVGTemplateResult,
 } from "lit-element";
-import "@polymer/paper-item/paper-item-body";
 
 @customElement("ha-settings-row")
 export class HaSettingsRow extends LitElement {
@@ -49,6 +49,9 @@ export class HaSettingsRow extends LitElement {
         border-top: 1px solid var(--divider-color);
         padding-bottom: 8px;
       }
+      ::slotted(ha-switch) {
+        padding: 16px 0;
+      }
     `;
   }
 }

src/components/ha-sidebar.ts

@@ -165,7 +165,7 @@ let sortStyles: CSSResult;
 class HaSidebar extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
   @property({ type: Boolean }) public alwaysExpand = false;
 
@@ -259,7 +259,7 @@ class HaSidebar extends LitElement {
         <div class="title">
           ${this._editMode
             ? html`<mwc-button outlined @click=${this._closeEditMode}>
-                DONE
+                ${hass.localize("ui.sidebar.done")}
               </mwc-button>`
             : "Home Assistant"}
         </div>
@@ -447,6 +447,9 @@ class HaSidebar extends LitElement {
     subscribeNotifications(this.hass.connection, (notifications) => {
       this._notifications = notifications;
     });
+    window.addEventListener("hass-edit-sidebar", () =>
+      this._activateEditMode()
+    );
   }
 
   protected updated(changedProps) {
@@ -479,11 +482,15 @@ class HaSidebar extends LitElement {
     return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
   }
 
-  private async _handleAction(ev: CustomEvent<ActionHandlerDetail>) {
+  private _handleAction(ev: CustomEvent<ActionHandlerDetail>) {
     if (ev.detail.action !== "hold") {
       return;
     }
 
+    this._activateEditMode();
+  }
+
+  private async _activateEditMode() {
     if (!Sortable) {
       const [sortableImport, sortStylesImport] = await Promise.all([
         import("sortablejs/modular/sortable.core.esm"),
@@ -498,9 +505,7 @@ class HaSidebar extends LitElement {
     }
     this._editMode = true;
 
-    if (!this.expanded) {
-      fireEvent(this, "hass-toggle-menu");
-    }
+    fireEvent(this, "hass-open-menu");
 
     await this.updateComplete;
 
@@ -761,6 +766,9 @@ class HaSidebar extends LitElement {
           width: 100%;
           display: none;
         }
+        :host([narrow]) .title {
+          padding: 0 16px;
+        }
         :host([expanded]) .title {
           display: initial;
         }

src/layouts/home-assistant-main.ts

@@ -24,6 +24,7 @@ const NON_SWIPABLE_PANELS = ["map"];
 declare global {
   // for fire event
   interface HASSDomEvents {
+    "hass-open-menu": undefined;
     "hass-toggle-menu": undefined;
     "hass-show-notifications": undefined;
   }
@@ -92,6 +93,17 @@ class HomeAssistantMain extends LitElement {
   protected firstUpdated() {
     import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
 
+    this.addEventListener("hass-open-menu", () => {
+      if (this._sidebarNarrow) {
+        this.drawer.open();
+      } else {
+        fireEvent(this, "hass-dock-sidebar", {
+          dock: "docked",
+        });
+        setTimeout(() => this.appLayout.resetLayout());
+      }
+    });
+
     this.addEventListener("hass-toggle-menu", () => {
       if (this._sidebarNarrow) {
         if (this.drawer.opened) {

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

@@ -107,6 +107,23 @@ class HaPanelProfile extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-dashboard-row>
+            <ha-settings-row .narrow=${this.narrow}>
+              <span slot="heading">
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.header"
+                )}
+              </span>
+              <span slot="description">
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.description"
+                )}
+              </span>
+              <mwc-button @click=${this._customizeSidebar}>
+                ${this.hass.localize(
+                  "ui.panel.profile.customize_sidebar.button"
+                )}
+              </mwc-button>
+            </ha-settings-row>
             ${this.hass.dockedSidebar !== "auto" || !this.narrow
               ? html`
                   <ha-force-narrow-row
@@ -183,6 +200,10 @@ class HaPanelProfile extends LitElement {
     `;
   }
 
+  private _customizeSidebar() {
+    fireEvent(this, "hass-edit-sidebar");
+  }
+
   private async _refreshRefreshTokens() {
     this._refreshTokens = await this.hass.callWS({
       type: "auth/refresh_tokens",

src/state/sidebar-mixin.ts

@@ -15,16 +15,14 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "hass-dock-sidebar": DockSidebarParams;
-  }
-  interface HASSDomEvents {
     "hass-default-panel": DefaultPanelParams;
+    "hass-edit-sidebar": undefined;
   }
   // for add event listener
   interface HTMLElementEventMap {
     "hass-dock-sidebar": HASSDomEvent<DockSidebarParams>;
-  }
-  interface HTMLElementEventMap {
     "hass-default-panel": HASSDomEvent<DefaultPanelParams>;
+    "hass-edit-sidebar": undefined;
   }
 }
 

src/translations/en.json

@@ -585,7 +585,8 @@
     },
     "sidebar": {
       "external_app_configuration": "App Configuration",
-      "sidebar_toggle": "Sidebar Toggle"
+      "sidebar_toggle": "Sidebar Toggle",
+      "done": "Done"
     },
     "panel": {
       "calendar": {
@@ -2431,6 +2432,11 @@
           "header": "Always hide the sidebar",
           "description": "This will hide the sidebar by default, similar to the mobile experience."
         },
+        "customize_sidebar": {
+          "header": "Change the order and hide items from the sidebar",
+          "description": "You can also press and hold the header of the sidebar to activate edit mode.",
+          "button": "Edit"
+        },
         "vibrate": {
           "header": "Vibrate",
           "description": "Enable or disable vibration on this device when controlling devices."