From b86ae8dd143d9970e126c2a6f5154a9c9c5ec74e Mon Sep 17 00:00:00 2001
From: Tim Donohue <tim.donohue@lyrasis.org>
Date: Tue, 14 Sep 2021 14:16:04 -0500
Subject: [PATCH] Allow enter key to expand or contract menu based on current
 active status

---
 .../expandable-navbar-section.component.html  | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index cb96435b77..45edc12b12 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -1,18 +1,20 @@
-<div class="nav-item dropdown expandable-navbar-section"
-    (keyup.enter)="activateSection($event)"
-    (mouseenter)="activateSection($event)"
-    (mouseleave)="deactivateSection($event)">
-    <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"
-       id="browseDropdown" (click)="toggleSection($event)"
-       data-toggle="dropdown">
-        <ng-container
-                *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-    </a>
-    <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
-        class="m-0 shadow-none border-top-0 dropdown-menu show">
-        <ng-container *ngFor="let subSection of (subSections$ | async)">
+<ng-container *ngVar="(active | async) as isActive">
+    <div class="nav-item dropdown expandable-navbar-section"
+        (keyup.enter)="isActive ? deactivateSection($event) : activateSection($event)"
+        (mouseenter)="activateSection($event)"
+        (mouseleave)="deactivateSection($event)">
+        <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"
+        id="browseDropdown" (click)="toggleSection($event)"
+        data-toggle="dropdown">
             <ng-container
-                    *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </ng-container>
-    </ul>
-</div>
+                    *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+        </a>
+        <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
+            class="m-0 shadow-none border-top-0 dropdown-menu show">
+            <ng-container *ngFor="let subSection of (subSections$ | async)">
+                <ng-container
+                        *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
+            </ng-container>
+        </ul>
+    </div>
+</ng-container>