Refactor light panel to use top bar component

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

@@ -1,7 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -15,6 +14,7 @@ import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
 import "../lovelace/views/hui-view-background";
+import "../../components/ha-top-app-bar-fixed";
 
 const LIGHT_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -97,38 +97,36 @@ class PanelLight extends LitElement {
 
   protected render() {
     return html`
-      <div class="header ${classMap({ narrow: this.narrow })}">
-        <div class="toolbar">
-          ${this._searchParms.has("historyBack")
-            ? html`
-                <ha-icon-button-arrow-prev
-                  @click=${this._back}
-                  slot="navigationIcon"
-                ></ha-icon-button-arrow-prev>
-              `
-            : html`
-                <ha-menu-button
-                  slot="navigationIcon"
-                  .hass=${this.hass}
-                  .narrow=${this.narrow}
-                ></ha-menu-button>
-              `}
-          <div class="main-title">${this.hass.localize("panel.light")}</div>
-        </div>
-      </div>
-      ${this._lovelace
-        ? html`
-            <hui-view-container .hass=${this.hass}>
-              <hui-view-background .hass=${this.hass}> </hui-view-background>
-              <hui-view
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
+        ${this._searchParms.has("historyBack")
+          ? html`
+              <ha-icon-button-arrow-prev
+                @click=${this._back}
+                slot="navigationIcon"
+              ></ha-icon-button-arrow-prev>
+            `
+          : html`
+              <ha-menu-button
+                slot="navigationIcon"
                 .hass=${this.hass}
                 .narrow=${this.narrow}
-                .lovelace=${this._lovelace}
-                .index=${this._viewIndex}
-              ></hui-view
-            ></hui-view-container>
-          `
-        : nothing}
+              ></ha-menu-button>
+            `}
+        <div slot="title">${this.hass.localize("panel.light")}</div>
+        ${this._lovelace
+          ? html`
+              <hui-view-container .hass=${this.hass}>
+                <hui-view-background .hass=${this.hass}> </hui-view-background>
+                <hui-view
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                  .lovelace=${this._lovelace}
+                  .index=${this._viewIndex}
+                ></hui-view
+              ></hui-view-container>
+            `
+          : nothing}
+      </ha-top-app-bar-fixed>
     `;
   }
 
@@ -169,78 +167,11 @@ class PanelLight extends LitElement {
           -webkit-user-select: none;
           -moz-user-select: none;
         }
-        .header {
-          background-color: var(--app-header-background-color);
-          color: var(--app-header-text-color, white);
-          position: fixed;
-          top: 0;
-          width: calc(
-            var(--ha-top-app-bar-width, 100%) - var(
-                --safe-area-inset-right,
-                0px
-              )
-          );
-          padding-top: var(--safe-area-inset-top);
-          z-index: 4;
-          display: flex;
-          flex-direction: row;
-          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
-          backdrop-filter: var(--app-header-backdrop-filter, none);
-          padding-top: var(--safe-area-inset-top);
-          padding-right: var(--safe-area-inset-right);
-        }
-        :host([narrow]) .header {
-          width: calc(
-            var(--ha-top-app-bar-width, 100%) - var(
-                --safe-area-inset-left,
-                0px
-              ) - var(--safe-area-inset-right, 0px)
-          );
-          padding-left: var(--safe-area-inset-left);
-        }
-        :host([scrolled]) .header {
-          box-shadow: var(
-            --bar-box-shadow,
-            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-          );
-        }
-        .toolbar {
-          height: var(--header-height);
-          display: flex;
-          flex: 1;
-          align-items: center;
-          font-size: var(--ha-font-size-xl);
-          padding: 0px 12px;
-          font-weight: var(--ha-font-weight-normal);
-          box-sizing: border-box;
-          border-bottom: var(--app-header-border-bottom, none);
-        }
-        :host([narrow]) .toolbar {
-          padding: 0 4px;
-        }
-        .main-title {
-          margin-inline-start: var(--ha-space-6);
-          line-height: var(--ha-line-height-normal);
-          flex-grow: 1;
-        }
-        .narrow .main-title {
-          margin-inline-start: var(--ha-space-2);
-        }
         hui-view-container {
           position: relative;
           display: flex;
           min-height: 100vh;
           box-sizing: border-box;
-          padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
-          padding-right: var(--safe-area-inset-right);
-          padding-inline-end: var(--safe-area-inset-right);
-          padding-bottom: var(--safe-area-inset-bottom);
-        }
-        :host([narrow]) hui-view-container {
-          padding-left: var(--safe-area-inset-left);
-          padding-inline-start: var(--safe-area-inset-left);
         }
         hui-view {
           flex: 1 1 100%;