+
+
+ ${dialogTitle}
+
+
+
+
+
+
+
+ ${this.hass.localize("ui.common.cancel")}
+
+
+ ${this.hass.localize("ui.common.save")}
+
+
+
+ `;
+ }
+
+ private _changed(ev: CustomEvent<{ value: DisplayValue }>): void {
+ const { order = [], hidden = [] } = ev.detail.value;
+ this._order = [...order];
+ this._hidden = [...hidden];
+ }
+
+ private _save(): void {
+ this._saveCallback?.(this._order ?? [], this._hidden ?? []);
+ this.closeDialog();
+ }
+
+ static styles = css`
+ ha-md-dialog {
+ min-width: 600px;
+ max-height: 90%;
+ }
+
+ @media all and (max-width: 600px), all and (max-height: 500px) {
+ ha-md-dialog {
+ --md-dialog-container-shape: 0;
+ min-width: 100%;
+ min-height: 100%;
+ }
+ }
+ `;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "dialog-edit-sidebar": DialogEditSidebar;
+ }
+}
diff --git a/src/dialogs/sidebar/show-dialog-edit-sidebar.ts b/src/dialogs/sidebar/show-dialog-edit-sidebar.ts
new file mode 100644
index 0000000000..4a88bafd6b
--- /dev/null
+++ b/src/dialogs/sidebar/show-dialog-edit-sidebar.ts
@@ -0,0 +1,18 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface EditSidebarDialogParams {
+ saveCallback: (order: string[], hidden: string[]) => void;
+}
+
+export const loadEditSidebarDialog = () => import("./dialog-edit-sidebar");
+
+export const showEditSidebarDialog = (
+ element: HTMLElement,
+ dialogParams: EditSidebarDialogParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-edit-sidebar",
+ dialogImport: loadEditSidebarDialog,
+ dialogParams,
+ });
+};
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 831ac020c8..eeb66d9fa1 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -10,6 +10,7 @@ import { showNotificationDrawer } from "../dialogs/notifications/show-notificati
import type { HomeAssistant, Route } from "../types";
import "./partial-panel-resolver";
import { computeRTLDirection } from "../common/util/compute_rtl";
+import { storage } from "../common/decorators/storage";
declare global {
// for fire event
@@ -25,7 +26,8 @@ declare global {
}
interface EditSideBarEvent {
- editMode: boolean;
+ order: string[];
+ hidden: string[];
}
@customElement("home-assistant-main")
@@ -42,6 +44,22 @@ export class HomeAssistantMain extends LitElement {
@state() private _drawerOpen = false;
+ @state()
+ @storage({
+ key: "sidebarPanelOrder",
+ state: true,
+ subscribe: true,
+ })
+ private _panelOrder: string[] = [];
+
+ @state()
+ @storage({
+ key: "sidebarHiddenPanels",
+ state: true,
+ subscribe: true,
+ })
+ private _hiddenPanels: string[] = [];
+
constructor() {
super();
listenMediaQuery("(max-width: 870px)", (matches) => {
@@ -63,7 +81,8 @@ export class HomeAssistantMain extends LitElement {
.hass=${this.hass}
.narrow=${sidebarNarrow}
.route=${this.route}
- .editMode=${this._sidebarEditMode}
+ .panelOrder=${this._panelOrder}
+ .hiddenPanels=${this._hiddenPanels}
.alwaysExpand=${sidebarNarrow || this.hass.dockedSidebar === "docked"}
>