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