[DURACOM-195] fix spacing in collapsible menu

Author: davide-negretti

src/styles/_custom_variables.scss

@@ -39,6 +39,7 @@
   --ds-expandable-navbar-link-color: #{$body-color};
   --ds-expandable-navbar-link-color-hover: #{$body-color};
   --ds-expandable-navbar-link-background-hover: #{$ds-navbar-link-color-hover};
+  --ds-expandable-navbar-item-vertical-padding: 0.25rem;
 
   --ds-user-menu-item-vertical-padding: 0.25rem;
   --ds-user-menu-dropdown-padding: 1rem;

src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -32,43 +32,50 @@
       text-decoration: none;
     }
 
-    nav#desktop-navbar ::ng-deep {
+    nav#desktop-navbar { // in header component
+      #main-site-navigation {
+        /* Desktop menu */
 
-      /* Desktop menu */
-
-      .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
-        // fill navbar height (required by dropdown menus) and center content
-        display: flex;
-        align-items: center;
-        height: 100%;
-      }
-      .ds-menu-item {
-        // define here the style for top-level navbar menu items
-        padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
-      }
-      .ds-menu-item, .ds-menu-toggler-wrapper {
-        color: var(--ds-navbar-link-color) !important;
-        &:hover, &:focus {
-          color: var(--ds-navbar-link-color-hover) !important;
+        .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
+          // fill navbar height (required by dropdown menus) and center content
+          display: flex;
+          align-items: center;
+          height: 100%;
+        }
+        .ds-menu-item {
+          // define here the style for top-level navbar menu items
+          padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
+        }
+        .ds-menu-item, .ds-menu-toggler-wrapper {
+          color: var(--ds-navbar-link-color) !important;
+          &:hover, &:focus {
+            color: var(--ds-navbar-link-color-hover) !important;
+          }
         }
-      }
 
-      /* desktop submenu */
+        /* desktop submenu */
 
-      .dropdown-menu {
-        .ds-menu-item {
-          // define here the style for second-level navbar menu items
-          padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
+        .dropdown-menu {
+          .ds-menu-item {
+            // define here the style for second-level navbar menu items
+            padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
+          }
         }
-      }
 
+      }
     }
 
-    nav#collapsible-mobile-navbar {
+    nav#collapsible-mobile-navbar { // in header-navbar-wrapper component
 
       border-top: var(--ds-expandable-navbar-border-top-style);
       padding-top: var(--ds-expandable-navbar-padding-top);
 
+      #main-site-navigation {
+        .ds-menu-item {
+          padding: var(--ds-expandable-navbar-item-vertical-padding) 0;
+        }
+      }
+
     }
   }
 }

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

@@ -1,7 +1,7 @@
 <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
   <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
 </ng-container>
-<div class="navbar-nav h-100 align-items-md-stretch gapx-3" role="menubar">
+<div class="navbar-nav h-100 align-items-md-stretch gapx-3" role="menubar" id="main-site-navigation" [ngClass]="(isMobile$ | async) ? 'navbar-nav-mobile' : 'navbar-nav-desktop'">
   <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>