Update sidebar

src/components/ha-sidebar-edit-panels.ts

@@ -96,6 +96,7 @@ const styles = css`
     }
   }
 `;
+
 @customElement("ha-sidebar-edit-panels")
 class HaSidebarEditPanels extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -104,8 +105,6 @@ class HaSidebarEditPanels extends LitElement {
 
   @property() public hiddenPanels: any[] = [];
 
-  static styles = styles;
-
   private _sortable?: SortableInstance;
 
   protected render() {
@@ -172,6 +171,8 @@ class HaSidebarEditPanels extends LitElement {
     if (!panel) return;
     fireEvent(this, "panel-show", panel);
   }
+
+  static styles = styles;
 }
 
 declare global {

src/components/ha-sidebar-panel-config.ts

@@ -9,13 +9,14 @@ import { updateCanInstall, UpdateEntity } from "../data/update";
 import { haStyleSidebarItem } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
-import { keydown, keyup } from "../resources/button-handlers";
+import { createKeydown, createKeyup } from "../resources/button-handlers";
 
 const styles = css`
   .item.expanded {
     width: 100%;
   }
 `;
+
 @customElement("ha-sidebar-panel-config")
 class HaSidebarPanelConfig extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -30,17 +31,19 @@ class HaSidebarPanelConfig extends LitElement {
 
   @state() private _issuesCount = 0;
 
-  static styles = [haStyleSidebarItem, styles];
-
   protected render() {
     const notices = this._updatesCount + this._issuesCount;
+    const keydown = createKeydown((e) =>
+      (e.currentTarget as HTMLElement).click()
+    );
+    const keyup = createKeyup((e) => (e.currentTarget as HTMLElement).click());
     return html`<a
       href="/config"
       aria-label=${this.name}
       aria-current=${this.selected ? "page" : "false"}
       class="item ${this.expanded ? "expanded" : ""}"
-      @keydown=${keydown((e) => (e.currentTarget as HTMLElement).click())}
-      @keyup=${keyup((e) => (e.currentTarget as HTMLElement).click())}
+      @keydown=${keydown}
+      @keyup=${keyup}
     >
       <div class="target"></div>
       <span class="icon">
@@ -80,6 +83,8 @@ class HaSidebarPanelConfig extends LitElement {
         ]
       : [];
   }
+
+  static styles = [haStyleSidebarItem, styles];
 }
 
 declare global {

src/components/ha-sidebar-panel-ext-config.ts

@@ -12,6 +12,7 @@ const styles = css`
     width: 100%;
   }
 `;
+
 @customElement("ha-sidebar-panel-ext-config")
 class HaSidebarPanelExtConfig extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -20,8 +21,6 @@ class HaSidebarPanelExtConfig extends LitElement {
 
   @property({ type: Boolean }) public expanded = false;
 
-  static styles = [haStyleSidebarItem, styles];
-
   protected render() {
     return html`<button
       class="item ${this.expanded ? "expanded" : ""}"
@@ -41,6 +40,8 @@ class HaSidebarPanelExtConfig extends LitElement {
       type: "config_screen/show",
     });
   }
+
+  static styles = [haStyleSidebarItem, styles];
 }
 
 declare global {

src/components/ha-sidebar-panel-notifications.ts

@@ -16,6 +16,7 @@ const styles = css`
     width: 100%;
   }
 `;
+
 @customElement("ha-sidebar-panel-notifications")
 class HaSidebarPanelNotifications extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -24,8 +25,6 @@ class HaSidebarPanelNotifications extends LitElement {
 
   @state() private _notifications?: PersistentNotification[];
 
-  static styles = [haStyleSidebarItem, styles];
-
   protected render() {
     const notificationCount = this._notifications
       ? this._notifications.length
@@ -60,6 +59,8 @@ class HaSidebarPanelNotifications extends LitElement {
   private _showNotifications() {
     fireEvent(this, "hass-show-notifications");
   }
+
+  static styles = [haStyleSidebarItem, styles];
 }
 
 declare global {

src/components/ha-sidebar-panel-user.ts

@@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators";
 import { haStyleSidebarItem } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import "./user/ha-user-badge";
-import { keydown, keyup } from "../resources/button-handlers";
+import { createKeydown, createKeyup } from "../resources/button-handlers";
 
 const styles = css`
   .icon {
@@ -18,6 +18,7 @@ const styles = css`
     transform: translate(-50%, -50%) scale(0.8);
   }
 `;
+
 @customElement("ha-sidebar-panel-user")
 class HaSidebarPanelUser extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -26,15 +27,17 @@ class HaSidebarPanelUser extends LitElement {
 
   @property({ type: Boolean }) public selected = false;
 
-  static styles = [haStyleSidebarItem, styles];
-
   protected render() {
+    const keydown = createKeydown((e) =>
+      (e.currentTarget as HTMLElement).click()
+    );
+    const keyup = createKeyup((e) => (e.currentTarget as HTMLElement).click());
     return html`<a
       href="/profile"
       aria-current=${this.selected ? "page" : "false"}
       class="item ${this.expanded ? "expanded" : ""}"
-      @keydown=${keydown((e) => (e.currentTarget as HTMLElement).click())}
-      @keyup=${keyup((e) => (e.currentTarget as HTMLElement).click())}
+      @keydown=${keydown}
+      @keyup=${keyup}
     >
       <div class="target"></div>
       <span class="icon">
@@ -48,6 +51,8 @@ class HaSidebarPanelUser extends LitElement {
       <span class="name">${this.hass.user ? this.hass.user.name : ""}</span>
     </a>`;
   }
+
+  static styles = [haStyleSidebarItem, styles];
 }
 
 declare global {

src/components/ha-sidebar-panel.ts

@@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators";
 import { haStyleSidebarItem } from "../resources/styles";
 import "./ha-svg-icon";
 import "./ha-icon";
-import { keydown, keyup } from "../resources/button-handlers";
+import { createKeydown, createKeyup } from "../resources/button-handlers";
 
 const styles = css`
   .item.expanded {
@@ -14,6 +14,7 @@ const styles = css`
     margin-left: auto;
   }
 `;
+
 @customElement("ha-sidebar-panel")
 class HaSidebarPanel extends LitElement {
   @property() public path = "";
@@ -28,16 +29,18 @@ class HaSidebarPanel extends LitElement {
 
   @property({ type: Boolean }) public selected = false;
 
-  static styles = [haStyleSidebarItem, styles];
-
   protected render() {
+    const keydown = createKeydown((e) =>
+      (e.currentTarget as HTMLElement).click()
+    );
+    const keyup = createKeyup((e) => (e.currentTarget as HTMLElement).click());
     return html`<a
       href="/${this.path}"
       aria-current=${this.selected ? "page" : "false"}
       aria-label=${this.name}
       class="item ${this.expanded ? "expanded" : ""}"
-      @keydown=${keydown((e) => (e.currentTarget as HTMLElement).click())}
-      @keyup=${keyup((e) => (e.currentTarget as HTMLElement).click())}
+      @keydown=${keydown}
+      @keyup=${keyup}
     >
       <div class="target"></div>
       <span class="icon">
@@ -48,6 +51,8 @@ class HaSidebarPanel extends LitElement {
       <span class="name">${this.name}</span>
     </a>`;
   }
+
+  static styles = [haStyleSidebarItem, styles];
 }
 
 declare global {

src/components/ha-sidebar-panels.ts

@@ -164,8 +164,6 @@ class HaSidebarPanels extends LitElement {
 
   private searchKeysUpdated = 0;
 
-  static styles = styles;
-
   constructor() {
     super();
     const getCurrentFocus = () => {
@@ -329,6 +327,8 @@ class HaSidebarPanels extends LitElement {
       []
     );
   }
+
+  static styles = styles;
 }
 
 declare global {

src/components/ha-sidebar-title.ts

@@ -43,6 +43,7 @@ const styles = css`
     margin-inline-end: 0;
   }
 `;
+
 @customElement("ha-sidebar-title")
 class HaSidebarTitle extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -53,8 +54,6 @@ class HaSidebarTitle extends LitElement {
 
   @property({ type: Boolean }) public editMode = false;
 
-  static styles = styles;
-
   protected render() {
     const classes = classMap({
       menu: true,
@@ -100,6 +99,8 @@ class HaSidebarTitle extends LitElement {
   private _editModeOff() {
     fireEvent(this, "hass-edit-sidebar", { editMode: false });
   }
+
+  static styles = styles;
 }
 
 declare global {

src/components/ha-sidebar-tooltip.ts

@@ -14,13 +14,14 @@ const styles = css`
     display: none;
   }
 `;
+
 @customElement("ha-sidebar-tooltip")
 class HaSidebarTooltip extends LitElement {
-  static styles = styles;
-
   protected render() {
     return html`<div></div>`;
   }
+
+  static styles = styles;
 }
 
 export interface TooltipPosition {

src/resources/button-handlers.ts

@@ -1,12 +1,12 @@
-export const keydown =
+export const createKeydown =
   (activate: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => {
     if (e.key === " ") e.preventDefault();
     if (e.key === "Enter") {
       e.preventDefault();
       activate(e);
     }
   };
-export const keyup =
+export const createKeyup =
   (activate: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => {
     if (e.key === " ") activate(e);
   };