fix(primeng/documentation): change flow for sidebar for first child

Fixes primefaces#13184.
nbrown-ScottLogic · Jun 13, 2023 · 7128ff9 · 7128ff9
1 parent 5b5b95d
commit 7128ff9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/app/showcase/layout/doc/app.doc.component.html b/src/app/showcase/layout/doc/app.doc.component.html
@@ -19,7 +19,7 @@ <h1>{{header}}</h1>
             <app-docsection-nav [docs]="docs"></app-docsection-nav>
         </div>
         <div [ngClass]="{'hidden': activeTab === 0}">
-            <app-docapisection [docs]="apiDocs" [header]="header" ngClass="doc-tabpanel"></app-docapisection>
+            <app-docapisection [docs]="apiDocs" [header]="header" class="doc-tabpanel"></app-docapisection>
         </div>
     </div>
 </div>
diff --git a/src/app/showcase/layout/doc/docsectionnav/app.docsection-nav.component.html b/src/app/showcase/layout/doc/docsectionnav/app.docsection-nav.component.html
@@ -6,9 +6,9 @@
             </div>
             <ng-container>
                 <ul *ngIf="doc.children">
-                    <li *ngFor="let child of doc.children" class="navbar-item" [ngClass]="{'active-navbar-item': getActiveChildId(activeId, child.id) }">
+                    <li *ngFor="let child of doc.children; let isFirst = first" class="navbar-item" [ngClass]="{'active-navbar-item': isActiveChildId(isFirst, activeId, child.id, doc.id) }">
                         <div class="navbar-item-content">
-                            <button class="p-link" (click)="onButtonClick(child)">
+                            <button class="p-link" (click)="onChildButtonClick(doc, isFirst, child)">
                                 {{ child.label }}
                             </button>
                         </div>

diff --git a/src/app/showcase/layout/doc/docsectionnav/app.docsection-nav.component.ts b/src/app/showcase/layout/doc/docsectionnav/app.docsection-nav.component.ts
@@ -79,6 +79,10 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
         }
     }
 
+    onChildButtonClick(parent: Doc, isFirst: boolean, child: Doc): void {
+        this.onButtonClick(isFirst ? parent : child);
+    }
+
     onButtonClick(doc) {
         this.activeId = doc.id;
         setTimeout(() => {
@@ -106,9 +110,17 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
             label && label.parentElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
         }
     }
+
+    isActiveChildId(isFirst: boolean, activeId: string, childId: string, parentId: string): boolean {
+        if (isFirst) {
+            return this.getActiveChildId(activeId, parentId);
+        }
+
+        return this.getActiveChildId(activeId, childId);
+    }
 
     getActiveChildId(activeId, childId) {
-        return activeId.toLowerCase().includes(childId.toLowerCase());
+        return activeId.toLowerCase() === childId.toLowerCase();
     }
 
     ngOnDestroy() {