diff --git a/web/src/elements/sidebar/SidebarItems.ts b/web/src/elements/sidebar/SidebarItems.ts index 0a558d25f..28fc2f7fc 100644 --- a/web/src/elements/sidebar/SidebarItems.ts +++ b/web/src/elements/sidebar/SidebarItems.ts @@ -33,6 +33,8 @@ export type SidebarEntry = { // Typescript requires the type here to correctly type the recursive path export type SidebarRenderer = (_: SidebarEntry) => TemplateResult; +const entryKey = (entry: SidebarEntry) => `${entry.path || "no-path"}:${entry.label}`; + @customElement("ak-sidebar-items") export class SidebarItems extends AKElement { static get styles(): CSSResult[] { @@ -124,14 +126,12 @@ export class SidebarItems extends AKElement { entries: SidebarEntry[] = []; @state() - expanded: WeakSet = new WeakSet(); + expanded: Set = new Set(); + + current = ""; constructor() { super(); - // this.onToggle = this.onToggle.bind(this); - - this.onHashChange = this.onHashChange.bind(this); - this.isActive = this.isActive.bind(this); this.renderItem = this.renderItem.bind(this); this.toggleExpand = this.toggleExpand.bind(this); } @@ -146,18 +146,6 @@ export class SidebarItems extends AKElement { super.disconnectedCallback(); } - firstUpdated(): void { - this.onHashChange(); - } - - onHashChange(): void { - /* no op */ - } - - isActive(path: string) { - return true; - } - render(): TemplateResult { const lightThemed = { "pf-m-light": this.activeTheme === UiThemeEnum.Light }; @@ -169,10 +157,11 @@ export class SidebarItems extends AKElement { } toggleExpand(entry: SidebarEntry) { - if (this.expanded.has(entry)) { - this.expanded.delete(entry); + const key = entryKey(entry); + if (this.expanded.has(key)) { + this.expanded.delete(key); } else { - this.expanded.add(entry); + this.expanded.add(key); } this.requestUpdate(); } @@ -183,12 +172,11 @@ export class SidebarItems extends AKElement { // not when being forwarded to the correct renderer. const attr = attributes ?? undefined; const hasChildren = !!(children && children.length > 0); - console.log(entry.label, hasChildren); // This is grossly imperative, in that it HAS to come before the content is rendered // to make sure the content gets the right settings with respect to expansion. if (attr?.expanded) { - this.expanded.add(entry); + this.expanded.add(entryKey(entry)); delete attr.expanded; } @@ -203,7 +191,7 @@ export class SidebarItems extends AKElement { const expanded = { "highlighted": !!attr?.highlight, - "pf-m-expanded": this.expanded.has(entry), + "pf-m-expanded": this.expanded.has(entryKey(entry)), "pf-m-expandable": hasChildren, }; @@ -257,7 +245,9 @@ export class SidebarItems extends AKElement { - ${this.expanded.has(entry) ? this.renderChildren(entry.children ?? []) : nothing}`; + ${this.expanded.has(entryKey(entry)) + ? this.renderChildren(entry.children ?? []) + : nothing}`; } renderLinkAndChildren(entry: SidebarEntry): TemplateResult { @@ -275,6 +265,8 @@ export class SidebarItems extends AKElement { - ${this.expanded.has(entry) ? this.renderChildren(entry.children ?? []) : nothing}`; + ${this.expanded.has(entryKey(entry)) + ? this.renderChildren(entry.children ?? []) + : nothing}`; } }