[DURACOM-195] fix spacing in collapsible menu

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,8 +32,8 @@
       text-decoration: none;
     }
 
-    nav#desktop-navbar ::ng-deep {
-
+    nav#desktop-navbar { // in header component
+      #main-site-navigation {
         /* Desktop menu */
 
         .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
@@ -63,12 +63,19 @@
         }
 
       }
+    }
 
-    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>