diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index ffdb27f351..502c0e7fe7 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -1,11 +1,21 @@
import "@material/mwc-button/mwc-button";
import {
mdiBell,
+ mdiCalendar,
+ mdiCart,
mdiCellphoneCog,
+ mdiChartBox,
mdiClose,
+ mdiCog,
+ mdiFormatListBulletedType,
+ mdiHammer,
+ mdiHomeAssistant,
+ mdiLightningBolt,
mdiMenu,
mdiMenuOpen,
+ mdiPlayBoxMultiple,
mdiPlus,
+ mdiTooltipAccount,
mdiViewDashboard,
} from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
@@ -62,6 +72,20 @@ const SORT_VALUE_URL_PATHS = {
config: 11,
};
+const PANEL_ICONS = {
+ calendar: mdiCalendar,
+ config: mdiCog,
+ "developer-tools": mdiHammer,
+ energy: mdiLightningBolt,
+ hassio: mdiHomeAssistant,
+ history: mdiChartBox,
+ logbook: mdiFormatListBulletedType,
+ lovelace: mdiViewDashboard,
+ map: mdiTooltipAccount,
+ "media-browser": mdiPlayBoxMultiple,
+ "shopping-list": mdiCart,
+};
+
const panelSorter = (
reverseSort: string[],
defaultPanel: string,
@@ -348,6 +372,60 @@ class HaSidebar extends LitElement {
`;
}
+ private _renderPanels(panels: PanelInfo[]) {
+ return panels.map((panel) =>
+ this._renderPanel(
+ panel.url_path,
+ panel.url_path === this.hass.defaultPanel
+ ? panel.title || this.hass.localize("panel.states")
+ : this.hass.localize(`panel.${panel.title}`) || panel.title,
+ panel.icon,
+ panel.url_path === this.hass.defaultPanel && !panel.icon
+ ? PANEL_ICONS.lovelace
+ : panel.url_path in PANEL_ICONS
+ ? PANEL_ICONS[panel.url_path]
+ : undefined
+ )
+ );
+ }
+
+ private _renderPanel(
+ urlPath: string,
+ title: string | null,
+ icon?: string | null,
+ iconPath?: string | null
+ ) {
+ return html`
+
+