Merge branch 'dev'

src/components/ha-sidebar.ts

@@ -27,11 +27,14 @@ import {
   subscribeNotifications,
 } from "../data/persistent_notification";
 import computeDomain from "../common/entity/compute_domain";
+import { classMap } from "lit-html/directives/class-map";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
 const computeUrl = (urlPath) => `/${urlPath}`;
 
+const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
+
 const SORT_VALUE = {
   map: 1,
   logbook: 2,
@@ -149,11 +152,7 @@ class HaSidebar extends LitElement {
           : ""}
         <span class="title">Home Assistant</span>
       </div>
-      <div class="wrapper">
+      <paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
-        <paper-listbox
-          attr-for-selected="data-panel"
-          .selected=${hass.panelUrl}
-        >
         <a
           aria-role="option"
           href="${computeUrl(this._defaultPage)}"
@@ -167,7 +166,6 @@ class HaSidebar extends LitElement {
         </a>
 
         ${beforeSpacer.map((panel) => renderPanel(hass, panel))}
-
         <div class="spacer" disabled></div>
 
         ${afterSpacer.map((panel) => renderPanel(hass, panel))}
@@ -192,11 +190,12 @@ class HaSidebar extends LitElement {
               </a>
             `
           : ""}
+      </paper-listbox>
 
-          <div disabled class="divider sticky-el"></div>
+      <div class="divider"></div>
 
       <paper-icon-item
-            class="notifications sticky-el"
+        class="notifications"
         aria-role="option"
         @click=${this._handleShowNotificationDrawer}
       >
@@ -214,7 +213,11 @@ class HaSidebar extends LitElement {
       </paper-icon-item>
 
       <a
-            class="profile sticky-el"
+        class=${classMap({
+          profile: true,
+          // Mimick behavior that paper-listbox provides
+          "iron-selected": hass.panelUrl === "profile",
+        })}
         href="/profile"
         data-panel="panel"
         tabindex="-1"
@@ -222,19 +225,14 @@ class HaSidebar extends LitElement {
         aria-label=${hass.localize("panel.profile")}
       >
         <paper-icon-item>
-              <ha-user-badge
+          <ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge>
-                slot="item-icon"
-                .user=${hass.user}
-              ></ha-user-badge>
 
           <span class="item-text">
             ${hass.user ? hass.user.name : ""}
           </span>
         </paper-icon-item>
       </a>
-          <div disabled class="bottom-spacer sticky-el"></div>
+      <div disabled class="bottom-spacer"></div>
-        </paper-listbox>
-      </div>
     `;
   }
 
@@ -267,6 +265,7 @@ class HaSidebar extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+
     if (this.hass && this.hass.auth.external) {
       getExternalConfig(this.hass.auth.external).then((conf) => {
         this._externalConfig = conf;
@@ -288,6 +287,16 @@ class HaSidebar extends LitElement {
     if (changedProps.has("alwaysExpand")) {
       this.expanded = this.alwaysExpand;
     }
+    if (SUPPORT_SCROLL_IF_NEEDED && !changedProps.has("hass")) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.panelUrl !== this.hass.panelUrl) {
+      this.shadowRoot!.querySelector(
+        ".iron-selected"
+        // @ts-ignore
+      )!.scrollIntoViewIfNeeded();
+    }
   }
 
   private _contract() {
@@ -333,11 +342,6 @@ class HaSidebar extends LitElement {
         width: 256px;
       }
 
-      .wrapper {
-        overflow-y: auto;
-        height: calc(100% - 65px);
-      }
-
       .menu {
         box-sizing: border-box;
         height: 65px;
@@ -371,13 +375,15 @@ class HaSidebar extends LitElement {
       }
 
       paper-listbox {
-        padding: 4px 0 0;
+        padding: 4px 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
+        height: calc(100% - 196px);
+        overflow-y: auto;
       }
 
-      paper-listbox > a {
+      a {
         color: var(--sidebar-text-color);
         font-weight: 500;
         font-size: 14px;
@@ -452,13 +458,9 @@ class HaSidebar extends LitElement {
       }
 
       .notifications {
-        margin-top: 0;
-        margin-bottom: 0;
-        bottom: 72px;
         cursor: pointer;
       }
       .profile {
-        bottom: 24px;
       }
       .profile paper-icon-item {
         padding-left: 4px;
@@ -466,19 +468,6 @@ class HaSidebar extends LitElement {
       .profile .item-text {
         margin-left: 8px;
       }
-      .bottom-spacer {
-        bottom: 0;
-        padding: 12px 0;
-      }
-
-      .sticky-el {
-        position: -webkit-sticky;
-        position: sticky;
-        background-color: var(
-          --sidebar-background-color,
-          var(--primary-background-color)
-        );
-      }
 
       .notification-badge {
         position: absolute;