Add iconColor to ha-config-navigation entries

gallery/src/demos/demo-ha-config-navigation.ts

@@ -0,0 +1,80 @@
+import { mdiDevices, mdiHomeAssistant, mdiRobot, mdiRocket } from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../src/components/ha-card";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/panels/config/dashboard/ha-config-navigation";
+import { HomeAssistant } from "../../../src/types";
+
+const PAGES: PageNavigation[] = [
+  {
+    path: "#demo-ha-config-navigation",
+    name: "Devices & Services",
+    description: "Manage integrations, areas, tags and helpers",
+    iconPath: mdiDevices,
+    iconColor: "#004E98",
+  },
+  {
+    path: "#demo-ha-config-navigation",
+    name: "Automations",
+    description: "Manage integrations, areas, tags and helpers",
+    iconPath: mdiRobot,
+    iconColor: "#2A850E",
+  },
+  {
+    path: "#demo-ha-config-navigation",
+    name: "Add-ons & Backups",
+    description: "Create backups, check logs or reboot your system",
+    iconPath: mdiHomeAssistant,
+    iconColor: "#44739E",
+  },
+  {
+    path: "#demo-ha-config-navigation",
+    name: "Basic icon with no background",
+    description:
+      "This is just here to display that the component can handle this to",
+    iconPath: mdiRocket,
+  },
+];
+
+@customElement("demo-ha-config-navigation")
+export class DemoHaConfigNavigation extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <ha-card header="ha-config-navigation demo">
+        <ha-config-navigation
+          .hass=${this.hass}
+          .pages=${PAGES}
+        ></ha-config-navigation>
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-config-navigation": DemoHaConfigNavigation;
+  }
+}

src/layouts/hass-tabs-subpage.ts

@@ -28,6 +28,8 @@ export interface PageNavigation {
   core?: boolean;
   advancedOnly?: boolean;
   iconPath?: string;
+  description?: string;
+  iconColor?: string;
   info?: any;
 }
 

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -59,6 +59,7 @@ class HaConfigDashboard extends LitElement {
                     name: "Home Assistant Cloud",
                     info: this.cloudStatus,
                     iconPath: mdiCloudLock,
+                    iconColor: "#174B62",
                   },
                 ]}
               ></ha-config-navigation>

src/panels/config/dashboard/ha-config-navigation.ts

@@ -24,10 +24,13 @@ class HaConfigNavigation extends LitElement {
           ? html`
               <a href=${page.path} aria-role="option" tabindex="-1">
                 <paper-icon-item>
-                  <ha-svg-icon
-                    .path=${page.iconPath}
+                  <div
+                    class=${page.iconColor ? "icon-background" : ""}
                     slot="item-icon"
-                  ></ha-svg-icon>
+                    .style="background-color: ${page.iconColor || "undefined"}"
+                  >
+                    <ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
+                  </div>
                   <paper-item-body two-line>
                     ${page.name ||
                     this.hass.localize(
@@ -54,7 +57,8 @@ class HaConfigNavigation extends LitElement {
                           `
                       : html`
                           <div secondary>
-                            ${this.hass.localize(
+                            ${page.description ||
+                            this.hass.localize(
                               `ui.panel.config.${page.component}.description`
                             )}
                           </div>
@@ -82,6 +86,9 @@ class HaConfigNavigation extends LitElement {
       ha-icon-next {
         color: var(--secondary-text-color);
       }
+      ha-svg-icon {
+        margin: 8px;
+      }
       .iron-selected paper-item::before,
       a:not(.iron-selected):focus::before {
         position: absolute;
@@ -102,6 +109,14 @@ class HaConfigNavigation extends LitElement {
       .iron-selected:focus paper-item::before {
         opacity: 0.2;
       }
+      .icon-background {
+        padding: 8px;
+        border-radius: 50%;
+      }
+      .icon-background ha-svg-icon {
+        margin: 0px;
+        color: var(--card-background-color);
+      }
     `;
   }
 }

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

@@ -46,27 +46,31 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/integrations",
       translationKey: "ui.panel.config.integrations.caption",
       iconPath: mdiPuzzle,
+      iconColor: "#004E98",
       core: true,
     },
     {
       component: "devices",
       path: "/config/devices",
       translationKey: "ui.panel.config.devices.caption",
       iconPath: mdiDevices,
+      iconColor: "#004E98",
       core: true,
     },
     {
       component: "entities",
       path: "/config/entities",
       translationKey: "ui.panel.config.entities.caption",
       iconPath: mdiShape,
+      iconColor: "#004E98",
       core: true,
     },
     {
       component: "areas",
       path: "/config/areas",
       translationKey: "ui.panel.config.areas.caption",
       iconPath: mdiSofa,
+      iconColor: "#004E98",
       core: true,
     },
   ],
@@ -76,24 +80,28 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/blueprint",
       translationKey: "ui.panel.config.blueprint.caption",
       iconPath: mdiPaletteSwatch,
+      iconColor: "#2A850E",
     },
     {
       component: "automation",
       path: "/config/automation",
       translationKey: "ui.panel.config.automation.caption",
       iconPath: mdiRobot,
+      iconColor: "#2A850E",
     },
     {
       component: "scene",
       path: "/config/scene",
       translationKey: "ui.panel.config.scene.caption",
       iconPath: mdiPalette,
+      iconColor: "#2A850E",
     },
     {
       component: "script",
       path: "/config/script",
       translationKey: "ui.panel.config.script.caption",
       iconPath: mdiScriptText,
+      iconColor: "#2A850E",
     },
   ],
   helpers: [
@@ -102,6 +110,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/helpers",
       translationKey: "ui.panel.config.helpers.caption",
       iconPath: mdiTools,
+      iconColor: "#7209EB",
       core: true,
     },
   ],
@@ -111,12 +120,14 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/tags",
       translationKey: "ui.panel.config.tag.caption",
       iconPath: mdiNfcVariant,
+      iconColor: "#DF8E44",
     },
     {
       component: "energy",
       path: "/config/energy",
       translationKey: "ui.panel.config.energy.caption",
       iconPath: mdiLightningBolt,
+      iconColor: "#578681",
     },
   ],
   lovelace: [
@@ -125,6 +136,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/lovelace/dashboards",
       translationKey: "ui.panel.config.lovelace.caption",
       iconPath: mdiViewDashboard,
+      iconColor: "#D81159",
     },
   ],
   persons: [
@@ -133,18 +145,21 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/person",
       translationKey: "ui.panel.config.person.caption",
       iconPath: mdiAccount,
+      iconColor: "#0A4BF0",
     },
     {
       component: "zone",
       path: "/config/zone",
       translationKey: "ui.panel.config.zone.caption",
       iconPath: mdiMapMarkerRadius,
+      iconColor: "#0A4BF0",
     },
     {
       component: "users",
       path: "/config/users",
       translationKey: "ui.panel.config.users.caption",
       iconPath: mdiBadgeAccountHorizontal,
+      iconColor: "#0A4BF0",
       core: true,
       advancedOnly: true,
     },
@@ -155,27 +170,31 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/core",
       translationKey: "ui.panel.config.core.caption",
       iconPath: mdiHomeAssistant,
+      iconColor: "#8F2D56",
       core: true,
     },
     {
       component: "server_control",
       path: "/config/server_control",
       translationKey: "ui.panel.config.server_control.caption",
       iconPath: mdiServer,
+      iconColor: "#8F2D56",
       core: true,
     },
     {
       component: "logs",
       path: "/config/logs",
       translationKey: "ui.panel.config.logs.caption",
       iconPath: mdiMathLog,
+      iconColor: "#8F2D56",
       core: true,
     },
     {
       component: "info",
       path: "/config/info",
       translationKey: "ui.panel.config.info.caption",
       iconPath: mdiInformation,
+      iconColor: "#8F2D56",
       core: true,
     },
   ],