From 3c277f14c8db349a4b687d9ff7a1dd707d0470cb Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Thu, 16 Nov 2023 11:03:16 -0800
Subject: [PATCH] web: sidebar third tier

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.
---
 web/src/elements/sidebar/SidebarItems.ts | 35 ++++++++++++++----------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/web/src/elements/sidebar/SidebarItems.ts b/web/src/elements/sidebar/SidebarItems.ts
index 8eb3f80d7..e5dec02ea 100644
--- a/web/src/elements/sidebar/SidebarItems.ts
+++ b/web/src/elements/sidebar/SidebarItems.ts
@@ -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,19 +163,23 @@ 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.  
+        // to make sure the content gets the right settings with respect to expansion.
         if (attr?.expanded) {
             this.expanded.add(entry);
             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}`;
     }
 }