trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web: sidebar third tier

Browse source 
The third tier works!  The only problem is that route isn't responsive, and I'm not sure why.
If you leave the `Providers` and go somewhere else, then click on a third-tier, the filter
works fine.  But if you click on one third-tier and then another, the filter doesn't
change.  Must investigate.
This commit is contained in:
Ken Sternberg 2023-11-16 11:03:16 -08:00
parent d539884204
commit 3c277f14c8
1 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
web/src/elements/sidebar/SidebarItems.ts
View file

@ -149,7 +149,6 @@ export class SidebarItems extends AKElement {
}
toggleExpand(entry: SidebarEntry) {
console.log(this, entry, this.expanded.has(entry));
if (this.expanded.has(entry)) {
this.expanded.delete(entry);
} else {
@ -164,6 +163,7 @@ 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.
@ -172,11 +172,14 @@ export class SidebarItems extends AKElement {
delete attr.expanded;
}
const content = path
? this.renderLink(label, path, attr)
: hasChildren
? this.renderLabelAndChildren(entry)
: this.renderLabel(label, attr);
const content =
path && hasChildren
? this.renderLinkAndChildren(entry)
: hasChildren
? this.renderLabelAndChildren(entry)
: path
? this.renderLink(label, path, attr)
: this.renderLabel(label, attr);
const expanded = {
"highlighted": !!attr?.highlight,
@ -237,19 +240,21 @@ export class SidebarItems extends AKElement {
${this.expanded.has(entry) ? this.renderChildren(entry.children ?? []) : nothing}`;
}
renderLinkAndChildren(
label: string,
children: SidebarEntry[],
attr: SidebarAttributes = {}
): TemplateResult {
renderLinkAndChildren(entry: SidebarEntry): TemplateResult {
const handler = () => this.toggleExpand(entry);
return html` <div class="pf-c-nav__link">
<div class="ak-nav__link">${label}</div>
<span class="pf-c-nav__toggle">
<a
href="${entry.attributes?.isAbsoluteLink ? "" : "#"}${entry.path}"
class="ak-nav__link"
>
${entry.label}
</a>
<span class="pf-c-nav__toggle" @click=${handler}>
<span class="pf-c-nav__toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</div>
${attr.expanded ? this.renderChildren(children) : nothing}`;
${this.expanded.has(entry) ? this.renderChildren(entry.children ?? []) : nothing}`;
}
}