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` + + + ${iconPath + ? html`` + : html``} + ${title} + + ${this.editMode + ? html`` + : ""} + + `; + } + private _renderPanelsEdit(beforeSpacer: PanelInfo[]) { // prettier-ignore return html`
@@ -360,7 +438,7 @@ class HaSidebar extends LitElement { } private _renderHiddenPanels() { - return html` ${this._hiddenPanels.length + return html`${this._hiddenPanels.length ? html`${this._hiddenPanels.map((url) => { const panel = this.hass.panels[url]; if (!panel) { @@ -371,12 +449,17 @@ class HaSidebar extends LitElement { class="hidden-panel" .panel=${url} > - + ${panel.url_path === this.hass.defaultPanel && !panel.icon + ? html`` + : panel.url_path in PANEL_ICONS + ? html`` + : html``} ${panel.url_path === this.hass.defaultPanel ? this.hass.localize("panel.states") @@ -412,7 +495,7 @@ class HaSidebar extends LitElement { } } - return html`
- 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 - ? mdiViewDashboard - : undefined - ) - ); - } - - private _renderPanel( - urlPath: string, - title: string | null, - icon?: string | null, - iconPath?: string | null - ) { - return html` - - - ${iconPath - ? html`` - : html``} - ${title} - - ${this.editMode - ? html`` - : ""} - - `; - } - static get styles(): CSSResultGroup { return [ haStyleScrollbar,