fixed toggle nav menu item display

Author: jr-rk

src/app/navbar/navbar-section/navbar-section.component.html

@@ -1,4 +1,4 @@
-<div class="ds-menu-item-wrapper text-md-center"
+<div class="navbar-section ds-menu-item-wrapper text-md-center"
      [id]="'navbar-section-' + section.id">
   <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
 </div>

src/app/navbar/navbar-section/navbar-section.component.scss

@@ -0,0 +1,7 @@
+.navbar-section,
+.expandable-navbar-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }

src/themes/custom/app/navbar/navbar.component.html

@@ -8,16 +8,17 @@
       <img src="assets/images/vsb-cs-logo-w.svg" [attr.alt]="'menu.header.image.logo' | translate" />
     </a>
 
-    <div class="w-100">
-      <div id="collapsingNav">
+    <div class="w-100 h-100">
+      <div id="collapsingNav" class="h-100">
         <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
           <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
         </ng-container>
-        <div class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3" role="menubar">
-          <ng-container *ngFor="let section of (sections | async)">
-            <ng-container
-              *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
-          </ng-container>
+        <div class="h-100 navbar-nav align-items-md-center mr-auto shadow-none gapx-3" role="menubar">
+          <div class="h-100" *ngFor="let section of (sections | async)">
+            <div class="h-100"
+              *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;">
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/themes/custom/app/navbar/navbar.component.scss

@@ -56,6 +56,7 @@ a.navbar-brand img {
 .navbar-nav {
   ::ng-deep a.ds-menu-item {
     width: 100%;
+    padding: .5rem 1rem;
     color: white;
 
     &:hover, &:focus {

src/themes/custom/styles/_theme_sass_variable_overrides.scss

@@ -7,7 +7,6 @@
 
 $font-family-sans-serif: "Drive", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 
-
 $navbar-dark-color: #FFFFFF;
 
 /* Reassign color vars to semantic color scheme */