From 2c740cedb8466b12f9734caef46a5d27028ea74a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 30 Jan 2020 16:38:42 +0100
Subject: [PATCH 1/2] Fix tooltip sidemenu

---
 src/components/ha-sidebar.ts | 77 +++++++++++++++++++-----------------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index bad87cdb23..8a5fbf0c48 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -187,11 +187,10 @@ class HaSidebar extends LitElement {
                 href="#external-app-configuration"
                 tabindex="-1"
                 @click=${this._handleExternalAppConfiguration}
+                @mouseenter=${this._itemMouseEnter}
+                @mouseleave=${this._itemMouseLeave}
               >
-                <paper-icon-item
-                  @mouseenter=${this._itemMouseEnter}
-                  @mouseleave=${this._itemMouseLeave}
-                >
+                <paper-icon-item>
                   <ha-icon
                     slot="item-icon"
                     icon="hass:cellphone-settings-variant"
@@ -207,30 +206,34 @@ class HaSidebar extends LitElement {
 
       <div class="divider"></div>
 
-      <paper-icon-item
-        class="notifications"
-        aria-role="option"
-        @click=${this._handleShowNotificationDrawer}
+      <div
+        class="notifications-container"
         @mouseenter=${this._itemMouseEnter}
         @mouseleave=${this._itemMouseLeave}
       >
-        <ha-icon slot="item-icon" icon="hass:bell"></ha-icon>
-        ${!this.expanded && notificationCount > 0
-          ? html`
-              <span class="notification-badge" slot="item-icon">
-                ${notificationCount}
-              </span>
-            `
-          : ""}
-        <span class="item-text">
-          ${hass.localize("ui.notification_drawer.title")}
-        </span>
-        ${this.expanded && notificationCount > 0
-          ? html`
-              <span class="notification-badge">${notificationCount}</span>
-            `
-          : ""}
-      </paper-icon-item>
+        <paper-icon-item
+          class="notifications"
+          aria-role="option"
+          @click=${this._handleShowNotificationDrawer}
+        >
+          <ha-icon slot="item-icon" icon="hass:bell"></ha-icon>
+          ${!this.expanded && notificationCount > 0
+            ? html`
+                <span class="notification-badge" slot="item-icon">
+                  ${notificationCount}
+                </span>
+              `
+            : ""}
+          <span class="item-text">
+            ${hass.localize("ui.notification_drawer.title")}
+          </span>
+          ${this.expanded && notificationCount > 0
+            ? html`
+                <span class="notification-badge">${notificationCount}</span>
+              `
+            : ""}
+        </paper-icon-item>
+      </div>
 
       <a
         class=${classMap({
@@ -243,11 +246,10 @@ class HaSidebar extends LitElement {
         tabindex="-1"
         aria-role="option"
         aria-label=${hass.localize("panel.profile")}
+        @mouseenter=${this._itemMouseEnter}
+        @mouseleave=${this._itemMouseLeave}
       >
-        <paper-icon-item
-          @mouseenter=${this._itemMouseEnter}
-          @mouseleave=${this._itemMouseLeave}
-        >
+        <paper-icon-item>
           <ha-user-badge slot="item-icon" .user=${hass.user}></ha-user-badge>
 
           <span class="item-text">
@@ -389,14 +391,14 @@ class HaSidebar extends LitElement {
     }
     const tooltip = this._tooltip;
     const listbox = this.shadowRoot!.querySelector("paper-listbox")!;
-    let top = item.offsetTop + 7;
+    let top = item.offsetTop + 11;
     if (listbox.contains(item)) {
       top -= listbox.scrollTop;
     }
     tooltip.innerHTML = item.querySelector(".item-text")!.innerHTML;
     tooltip.style.display = "block";
     tooltip.style.top = `${top}px`;
-    tooltip.style.left = `${item.offsetLeft + item.clientWidth + 12}px`;
+    tooltip.style.left = `${item.offsetLeft + item.clientWidth + 4}px`;
   }
 
   private _hideTooltip() {
@@ -404,7 +406,7 @@ class HaSidebar extends LitElement {
     if (!this._tooltipHideTimeout) {
       this._tooltipHideTimeout = window.setTimeout(() => {
         this._tooltipHideTimeout = undefined;
-        this._tooltip.style.display = "none";
+        // this._tooltip.style.display = "none";
       }, 10);
     }
   }
@@ -431,11 +433,10 @@ class HaSidebar extends LitElement {
         href="${`/${urlPath}`}"
         data-panel="${urlPath}"
         tabindex="-1"
+        @mouseenter=${this._itemMouseEnter}
+        @mouseleave=${this._itemMouseLeave}
       >
-        <paper-icon-item
-          @mouseenter=${this._itemMouseEnter}
-          @mouseleave=${this._itemMouseLeave}
-        >
+        <paper-icon-item>
           <ha-icon slot="item-icon" .icon="${icon}"></ha-icon>
           <span class="item-text">${title}</span>
         </paper-icon-item>
@@ -611,7 +612,9 @@ class HaSidebar extends LitElement {
         height: 1px;
         background-color: var(--divider-color);
       }
-
+      .notifications-container {
+        display: flex;
+      }
       .notifications {
         cursor: pointer;
       }

From ec08b2ef6561ac1bc21168f1805bc57586da13f2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 30 Jan 2020 16:39:09 +0100
Subject: [PATCH 2/2] Update ha-sidebar.ts

---
 src/components/ha-sidebar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 8a5fbf0c48..339724056d 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -406,7 +406,7 @@ class HaSidebar extends LitElement {
     if (!this._tooltipHideTimeout) {
       this._tooltipHideTimeout = window.setTimeout(() => {
         this._tooltipHideTimeout = undefined;
-        // this._tooltip.style.display = "none";
+        this._tooltip.style.display = "none";
       }, 10);
     }
   }