From 640612033c7a296d56a3e3d7497fa99492947011 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 23 Nov 2023 00:34:05 +0100
Subject: [PATCH 01/17] [DURACOM-195] New host-window service methods

---
 src/app/shared/host-window.service.ts         | 57 +++++++++++++++----
 .../testing/host-window-service.stub.ts       |  4 ++
 2 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts
index 6d13d921e07..1c71bf5075e 100644
--- a/src/app/shared/host-window.service.ts
+++ b/src/app/shared/host-window.service.ts
@@ -10,13 +10,15 @@ import { AppState } from '../app.reducer';
 import { CSSVariableService } from './sass-helper/css-variable.service';
 
 export enum WidthCategory {
-  XS,
-  SM,
-  MD,
-  LG,
-  XL
+  XS = 0,
+  SM = 1,
+  MD = 2,
+  LG = 3,
+  XL = 4,
 }
 
+export const maxMobileWidth = WidthCategory.SM;
+
 const hostWindowStateSelector = (state: AppState) => state.hostWindow;
 const widthSelector = createSelector(hostWindowStateSelector, (hostWindow: HostWindowState) => hostWindow.width);
 
@@ -31,11 +33,11 @@ export class HostWindowService {
     /* See _exposed_variables.scss */
     variableService.getAllVariables()
       .subscribe((variables) => {
-      this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
-      this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
-      this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
-      this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
-    });
+        this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
+        this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
+        this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
+        this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
+      });
   }
 
   private getWidthObs(): Observable<number> {
@@ -99,6 +101,41 @@ export class HostWindowService {
     );
   }
 
+  is(exactWidthCat: WidthCategory): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat === exactWidthCat),
+      distinctUntilChanged()
+    );
+  }
+
+  isIn(widthCatArray: [WidthCategory]): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCatArray.includes(widthCat)),
+      distinctUntilChanged()
+    );
+  }
+
+  isUpTo(maxWidthCat: WidthCategory): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat <= maxWidthCat),
+      distinctUntilChanged()
+    );
+  }
+
+  isMobile(): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat <= maxMobileWidth),
+      distinctUntilChanged()
+    );
+  }
+
+  isDesktop(): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat > maxMobileWidth),
+      distinctUntilChanged()
+    );
+  }
+
   isXsOrSm(): Observable<boolean> {
     return observableCombineLatest(
       this.isXs(),
diff --git a/src/app/shared/testing/host-window-service.stub.ts b/src/app/shared/testing/host-window-service.stub.ts
index ecb8c26acbb..b64d6fbffcb 100644
--- a/src/app/shared/testing/host-window-service.stub.ts
+++ b/src/app/shared/testing/host-window-service.stub.ts
@@ -20,4 +20,8 @@ export class HostWindowServiceStub {
   isXsOrSm(): Observable<boolean> {
     return this.isXs();
   }
+
+  isMobile(): Observable<boolean> {
+    return this.isXs();
+  }
 }

From e84773afb25b20a9689a614f20361f7e8b086fc9 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 23 Nov 2023 10:36:53 +0100
Subject: [PATCH 02/17] [DURACOM-195] Base components

---
 .../header-navbar-wrapper.component.ts        |  8 ++-
 src/app/header/header.component.html          |  2 +-
 src/app/header/header.component.scss          | 45 +++++++------
 src/app/header/header.component.ts            |  8 ++-
 src/app/navbar/navbar.component.html          |  4 +-
 src/app/navbar/navbar.component.scss          | 64 ++++++++++---------
 src/app/navbar/navbar.component.ts            | 11 ++--
 src/styles/_custom_variables.scss             |  9 ++-
 8 files changed, 83 insertions(+), 68 deletions(-)

diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index a610b2cb026..9786f0ed1d0 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -5,6 +5,7 @@ import { hasValue } from '../shared/empty.util';
 import { Observable, Subscription } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 
 /**
  * This component represents a wrapper for the horizontal navbar and the header
@@ -18,15 +19,20 @@ export class HeaderNavbarWrapperComponent implements OnInit, OnDestroy {
   @HostBinding('class.open') isOpen = false;
   private sub: Subscription;
   public isNavBarCollapsed: Observable<boolean>;
+  public isMobile$: Observable<boolean>;
+
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
     private store: Store<AppState>,
-    private menuService: MenuService
+    private menuService: MenuService,
+    protected windowService: HostWindowService,
   ) {
   }
 
   ngOnInit(): void {
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
     this.isNavBarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
     this.sub = this.isNavBarCollapsed.subscribe((isCollapsed) => this.isOpen = !isCollapsed);
   }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 32b42dc8a7c..8ff76242cda 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -11,7 +11,7 @@
         <ds-context-help-toggle></ds-context-help-toggle>
         <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
-        <div *ngIf="isXsOrSm$ | async" class="pl-2">
+        <div *ngIf="isMobile$ | async" class="pl-2">
           <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
                   aria-controls="collapsingNav"
                   aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 8539ca8fbfc..a37acf4cedb 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,31 +1,30 @@
-header {
-  background-color: var(--ds-header-bg);
-}
+:host {
+  header {
+    background-color: var(--ds-header-bg);
+  }
 
-.navbar-brand img {
-  max-height: var(--ds-header-logo-height);
-  max-width: 100%;
-  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-    max-height: var(--ds-header-logo-height-xs);
+  .navbar-brand img {
+    max-height: var(--ds-header-logo-height);
+    max-width: 100%;
   }
-}
 
-.navbar-toggler .navbar-toggler-icon {
-  background-image: none !important;
-  line-height: 1.5;
-}
+  .navbar-toggler .navbar-toggler-icon {
+    background-image: none !important;
+    line-height: 1.5;
+  }
 
-.navbar-toggler {
-  border: none;
-  color: var(--ds-header-icon-color);
+  .navbar-toggler {
+    border: none;
+    color: var(--ds-header-icon-color);
 
-  &:hover, &:focus {
-    color: var(--ds-header-icon-color-hover);
+    &:hover, &:focus {
+      color: var(--ds-header-icon-color-hover);
+    }
   }
-}
 
-.navbar {
-  display: flex;
-  gap: calc(var(--bs-spacer) / 3);
-  align-items: center;
+  .navbar {
+    display: flex;
+    gap: calc(var(--bs-spacer) / 3);
+    align-items: center;
+  }
 }
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 5153a19be47..83694ad9b8e 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
-import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 
 /**
  * Represents the header with the logo and simple navigation
@@ -18,8 +18,10 @@ export class HeaderComponent implements OnInit {
    * @type {Observable<string>}
    */
   public isAuthenticated: Observable<boolean>;
-  public isXsOrSm$: Observable<boolean>;
+  public isMobile$: Observable<boolean>;
+
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   constructor(
     protected menuService: MenuService,
@@ -28,7 +30,7 @@ export class HeaderComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
   }
 
   public toggleNavbar(): void {
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index b691cfb3f9e..8bf1f942c79 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,11 +1,11 @@
 <nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
     <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
-    <div class="navbar-inner-container w-100" [class.container]="!(isXsOrSm$ | async)">
+    <div class="navbar-inner-container w-100" [class.container]="!(isMobile$ | async)">
         <div class="reset-padding-md w-100">
             <div id="collapsingNav">
                 <ul class="navbar-nav navbar-navigation mr-auto shadow-none">
-                    <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
+                    <li *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
                         <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
                     </li>
                     <li *ngFor="let section of (sections | async)">
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index d9a09013747..8095b7fff61 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,48 +1,50 @@
-nav.navbar {
+:host {
+  nav.navbar {
     background-color: var(--ds-navbar-bg);
     align-items: baseline;
-}
+  }
 
-/** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+  /** Mobile menu styling **/
+  @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     .navbar {
-        width: 100%;
-        background-color: var(--bs-white);
-        position: absolute;
-        overflow: hidden;
-        height: 0;
-        z-index: var(--ds-nav-z-index);
-        &.open {
-          height: auto;
-          min-height: 100vh; //doesn't matter because wrapper is sticky
-          border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
-        }
+      width: 100%;
+      background-color: var(--bs-white);
+      position: absolute;
+      overflow: hidden;
+      height: 0;
+      z-index: var(--ds-nav-z-index);
+      &.open {
+        height: auto;
+        min-height: 100vh; //doesn't matter because wrapper is sticky
+        border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
+      }
     }
-}
+  }
 
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  @media screen and (min-width: map-get($grid-breakpoints, md)) {
     .reset-padding-md {
-        margin-left: calc(var(--bs-spacer) / -2);
-        margin-right: calc(var(--bs-spacer) / -2);
+      margin-left: calc(var(--bs-spacer) / -2);
+      margin-right: calc(var(--bs-spacer) / -2);
     }
-}
+  }
 
-/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
-.navbar-expand-md.navbar-container {
+  /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
+  .navbar-expand-md.navbar-container {
     @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
-        > .navbar-inner-container {
-            padding: 0 var(--bs-spacer);
-        }
-        padding: 0;
+      > .navbar-inner-container {
+        padding: 0 var(--bs-spacer);
+      }
+      padding: 0;
     }
-}
+  }
 
-.navbar-nav ::ng-deep {
-  a.nav-link, .btn.nav-link {
+.navbar-nav {
+  ::ng-deep a.nav-link, .btn.nav-link {
     color: var(--ds-navbar-link-color);
 
-    &:hover, &:focus {
-      color: var(--ds-navbar-link-color-hover);
+      &:hover, &:focus {
+        color: var(--ds-navbar-link-color-hover);
+      }
     }
   }
 }
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 0cfad9e431b..d56200fd024 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -1,8 +1,8 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, OnInit } from '@angular/core';
 import { slideMobileNav } from '../shared/animations/slide';
 import { MenuComponent } from '../shared/menu/menu.component';
 import { MenuService } from '../shared/menu/menu.service';
-import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowService, WidthCategory } from '../shared/host-window.service';
 import { BrowseService } from '../core/browse/browse.service';
 import { ActivatedRoute } from '@angular/router';
 import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
@@ -22,12 +22,13 @@ import { isAuthenticated } from '../core/auth/selectors';
   templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
-export class NavbarComponent extends MenuComponent {
+export class NavbarComponent extends MenuComponent implements OnInit {
   /**
    * The menu ID of the Navbar is PUBLIC
    * @type {MenuID.PUBLIC}
    */
   menuID = MenuID.PUBLIC;
+  maxMobileWidth = WidthCategory.SM;
 
   /**
    * Whether user is authenticated.
@@ -35,7 +36,7 @@ export class NavbarComponent extends MenuComponent {
    */
   public isAuthenticated$: Observable<boolean>;
 
-  public isXsOrSm$: Observable<boolean>;
+  public isMobile$: Observable<boolean>;
 
   constructor(protected menuService: MenuService,
     protected injector: Injector,
@@ -51,7 +52,7 @@ export class NavbarComponent extends MenuComponent {
 
   ngOnInit(): void {
     super.ngOnInit();
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
     this.isAuthenticated$ = this.store.pipe(select(isAuthenticated));
   }
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index ad9a074e1b4..faa41e7d925 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -20,8 +20,6 @@
   --ds-sidebar-z-index: 20;
 
   --ds-header-bg: #{$white};
-  --ds-header-logo-height: 50px;
-  --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$link-color};
   --ds-header-icon-color-hover: #{$link-hover-color};
   --ds-navbar-bg: var(--ds-header-bg);
@@ -33,6 +31,13 @@
   --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
   --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);
 
+  @include media-breakpoint-up(md) {
+    --ds-header-logo-height: 50px;
+  }
+  @include media-breakpoint-down(sm) {
+    --ds-header-logo-height: 50px;
+  }
+
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
   --ds-admin-sidebar-bg: #{$admin-sidebar-bg};

From d59f33278dd5c1d76cadce614d3e125e9b5e0568 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 23 Nov 2023 14:07:23 +0100
Subject: [PATCH 03/17] [DURACOM-195] Base components (simplify
 header-navbar-wrapper)

---
 .../header-navbar-wrapper.component.html      |  2 +-
 .../header-navbar-wrapper.component.ts        | 22 +++++--------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
index 5756ad32b0b..47e31ea7330 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,4 +1,4 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}" id="header-navbar-wrapper">
+<div [ngClass]="{'open': !(isNavBarCollapsed$ | async)}" id="header-navbar-wrapper">
     <ds-themed-header></ds-themed-header>
     <ds-themed-navbar></ds-themed-navbar>
 </div>
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index 9786f0ed1d0..0a32b3a70ea 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -1,8 +1,5 @@
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '../app.reducer';
-import { hasValue } from '../shared/empty.util';
-import { Observable, Subscription } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
 import { HostWindowService, WidthCategory } from '../shared/host-window.service';
@@ -15,17 +12,14 @@ import { HostWindowService, WidthCategory } from '../shared/host-window.service'
   styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
 })
-export class HeaderNavbarWrapperComponent implements OnInit, OnDestroy {
-  @HostBinding('class.open') isOpen = false;
-  private sub: Subscription;
-  public isNavBarCollapsed: Observable<boolean>;
+export class HeaderNavbarWrapperComponent implements OnInit {
+  public isNavBarCollapsed$: Observable<boolean>;
   public isMobile$: Observable<boolean>;
 
   menuID = MenuID.PUBLIC;
   maxMobileWidth = WidthCategory.SM;
 
   constructor(
-    private store: Store<AppState>,
     private menuService: MenuService,
     protected windowService: HostWindowService,
   ) {
@@ -33,13 +27,7 @@ export class HeaderNavbarWrapperComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.isMobile$ = this.windowService.isUpTo(this.maxMobileWidth);
-    this.isNavBarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
-    this.sub = this.isNavBarCollapsed.subscribe((isCollapsed) => this.isOpen = !isCollapsed);
+    this.isNavBarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
   }
 
-  ngOnDestroy() {
-    if (hasValue(this.sub)) {
-      this.sub.unsubscribe();
-    }
-  }
 }

From 216558125bfdd12fda3a6104315b07ef2f1cd75b Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 23 Nov 2023 19:03:03 +0100
Subject: [PATCH 04/17] [DURACOM-195] Header, navbar, and sidebar refactoring

---
 cypress/e2e/collection-statistics.cy.ts       |   2 +-
 cypress/e2e/community-statistics.cy.ts        |   2 +-
 cypress/e2e/homepage-statistics.cy.ts         |   2 +-
 cypress/e2e/item-statistics.cy.ts             |   2 +-
 cypress/e2e/login-modal.cy.ts                 |  26 +-
 cypress/e2e/search-navbar.cy.ts               |   8 +-
 .../admin-sidebar-section.component.html      |  42 ++--
 .../admin-sidebar-section.component.spec.ts   |   4 +-
 .../admin-sidebar-section.component.ts        |   8 +
 .../admin-sidebar.component.html              |  98 ++++----
 .../admin-sidebar.component.scss              | 231 ++++++++++--------
 .../admin-sidebar.component.spec.ts           |   2 +-
 .../admin-sidebar/admin-sidebar.component.ts  |  20 +-
 ...dable-admin-sidebar-section.component.html |  56 +++--
 ...dable-admin-sidebar-section.component.scss |  37 +--
 ...le-admin-sidebar-section.component.spec.ts |   4 +-
 ...andable-admin-sidebar-section.component.ts |  30 ++-
 .../themed-admin-sidebar.component.ts         |  16 +-
 .../expandable-navbar-section.component.html  |  46 ++--
 .../expandable-navbar-section.component.scss  |  55 ++---
 ...xpandable-navbar-section.component.spec.ts |  96 +++++---
 .../expandable-navbar-section.component.ts    |  79 ++++--
 .../navbar-section.component.html             |   6 +-
 .../navbar-section.component.scss             |   8 +-
 src/app/navbar/navbar.component.html          |  35 +--
 src/app/navbar/navbar.component.scss          |  24 +-
 src/app/root/root.component.html              |   8 +-
 src/app/root/root.component.ts                |  46 ++--
 src/app/shared/animations/slide.ts            |  50 ++--
 .../auth-nav-menu.component.html              |  64 +++--
 .../auth-nav-menu.component.scss              |   4 +-
 .../auth-nav-menu.component.spec.ts           |  38 ++-
 .../auth-nav-menu/auth-nav-menu.component.ts  |   4 +-
 .../user-menu/user-menu.component.html        |  37 ++-
 .../user-menu/user-menu.component.scss        |  12 +
 .../user-menu/user-menu.component.spec.ts     |   4 +-
 .../lang-switch/lang-switch.component.html    |   7 +-
 .../password/log-in-password.component.html   |   4 +-
 .../external-link-menu-item.component.html    |   3 +-
 .../external-link-menu-item.component.ts      |   3 +-
 .../menu-item/link-menu-item.component.html   |   5 +-
 .../menu-item/link-menu-item.component.ts     |   3 +-
 .../menu/menu-item/menu-item.component.scss   |   5 +
 .../onclick-menu-item.component.html          |   6 +-
 .../onclick-menu-item.component.spec.ts       |   2 +-
 .../menu-item/onclick-menu-item.component.ts  |   2 +-
 .../menu-item/text-menu-item.component.html   |   2 +-
 .../menu-item/text-menu-item.component.ts     |   1 +
 .../testing/host-window-service.stub.ts       |   5 +
 src/app/shared/testing/menu-service.stub.ts   |   3 +
 .../system-wide-alert-banner.component.html   |   2 +-
 src/assets/i18n/en.json5                      |   4 +
 src/styles/_bootstrap_variables.scss          |   3 -
 src/styles/_custom_variables.scss             |  14 +-
 src/styles/_global-styles.scss                |   5 -
 src/styles/_mixins.scss                       |   2 +-
 .../header-navbar-wrapper.component.html      |   8 +-
 .../header-navbar-wrapper.component.scss      |  90 ++++++-
 .../header-navbar-wrapper.component.ts        |   2 +
 .../dspace/app/header/header.component.html   |  45 ++--
 .../dspace/app/header/header.component.scss   |  29 +--
 .../dspace/app/header/header.component.ts     |  11 +-
 .../dspace/app/navbar/navbar.component.html   |  35 +--
 .../dspace/app/navbar/navbar.component.scss   |  64 +----
 .../styles/_theme_css_variable_overrides.scss |  20 +-
 65 files changed, 901 insertions(+), 690 deletions(-)
 create mode 100644 src/app/shared/menu/menu-item/menu-item.component.scss

diff --git a/cypress/e2e/collection-statistics.cy.ts b/cypress/e2e/collection-statistics.cy.ts
index 6df4e9a4542..2a013fe0ce2 100644
--- a/cypress/e2e/collection-statistics.cy.ts
+++ b/cypress/e2e/collection-statistics.cy.ts
@@ -6,7 +6,7 @@ describe('Collection Statistics Page', () => {
 
     it('should load if you click on "Statistics" from a Collection page', () => {
         cy.visit('/collections/'.concat(TEST_COLLECTION));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+        cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
         cy.location('pathname').should('eq', COLLECTIONSTATISTICSPAGE);
     });
 
diff --git a/cypress/e2e/community-statistics.cy.ts b/cypress/e2e/community-statistics.cy.ts
index 710450e7972..f9848f51000 100644
--- a/cypress/e2e/community-statistics.cy.ts
+++ b/cypress/e2e/community-statistics.cy.ts
@@ -6,7 +6,7 @@ describe('Community Statistics Page', () => {
 
     it('should load if you click on "Statistics" from a Community page', () => {
         cy.visit('/communities/'.concat(TEST_COMMUNITY));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+        cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
         cy.location('pathname').should('eq', COMMUNITYSTATISTICSPAGE);
     });
 
diff --git a/cypress/e2e/homepage-statistics.cy.ts b/cypress/e2e/homepage-statistics.cy.ts
index 2a1ab9785ab..46ad8f1ed20 100644
--- a/cypress/e2e/homepage-statistics.cy.ts
+++ b/cypress/e2e/homepage-statistics.cy.ts
@@ -5,7 +5,7 @@ import '../support/commands';
 describe('Site Statistics Page', () => {
     it('should load if you click on "Statistics" from homepage', () => {
         cy.visit('/');
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+        cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
         cy.location('pathname').should('eq', '/statistics');
     });
 
diff --git a/cypress/e2e/item-statistics.cy.ts b/cypress/e2e/item-statistics.cy.ts
index 9b90cb24afc..78884081f0d 100644
--- a/cypress/e2e/item-statistics.cy.ts
+++ b/cypress/e2e/item-statistics.cy.ts
@@ -6,7 +6,7 @@ describe('Item Statistics Page', () => {
 
     it('should load if you click on "Statistics" from an Item/Entity page', () => {
         cy.visit('/entities/publication/'.concat(TEST_ENTITY_PUBLICATION));
-        cy.get('ds-navbar ds-link-menu-item a[title="Statistics"]').click();
+        cy.get('ds-navbar ds-link-menu-item a[data-test="link-menu-item.menu.section.statistics"]').click();
         cy.location('pathname').should('eq', ITEMSTATISTICSPAGE);
     });
 
diff --git a/cypress/e2e/login-modal.cy.ts b/cypress/e2e/login-modal.cy.ts
index d29c13c2f96..13f7bc5c01c 100644
--- a/cypress/e2e/login-modal.cy.ts
+++ b/cypress/e2e/login-modal.cy.ts
@@ -4,31 +4,31 @@ import { testA11y } from 'cypress/support/utils';
 const page = {
     openLoginMenu() {
         // Click the "Log In" dropdown menu in header
-        cy.get('ds-themed-navbar [data-test="login-menu"]').click();
+        cy.get('ds-themed-header [data-test="login-menu"]').click();
     },
     openUserMenu() {
         // Once logged in, click the User menu in header
-        cy.get('ds-themed-navbar [data-test="user-menu"]').click();
+        cy.get('ds-themed-header [data-test="user-menu"]').click();
     },
     submitLoginAndPasswordByPressingButton(email, password) {
         // Enter email
-        cy.get('ds-themed-navbar [data-test="email"]').type(email);
+        cy.get('ds-themed-header [data-test="email"]').type(email);
         // Enter password
-        cy.get('ds-themed-navbar [data-test="password"]').type(password);
+        cy.get('ds-themed-header [data-test="password"]').type(password);
         // Click login button
-        cy.get('ds-themed-navbar [data-test="login-button"]').click();
+        cy.get('ds-themed-header [data-test="login-button"]').click();
     },
     submitLoginAndPasswordByPressingEnter(email, password) {
         // In opened Login modal, fill out email & password, then click Enter
-        cy.get('ds-themed-navbar [data-test="email"]').type(email);
-        cy.get('ds-themed-navbar [data-test="password"]').type(password);
-        cy.get('ds-themed-navbar [data-test="password"]').type('{enter}');
+        cy.get('ds-themed-header [data-test="email"]').type(email);
+        cy.get('ds-themed-header [data-test="password"]').type(password);
+        cy.get('ds-themed-header [data-test="password"]').type('{enter}');
     },
     submitLogoutByPressingButton() {
         // This is the POST command that will actually log us out
         cy.intercept('POST', '/server/api/authn/logout').as('logout');
         // Click logout button
-        cy.get('ds-themed-navbar [data-test="logout-button"]').click();
+        cy.get('ds-themed-header [data-test="logout-button"]').click();
         // Wait until above POST command responds before continuing
         // (This ensures next action waits until logout completes)
         cy.wait('@logout');
@@ -103,10 +103,10 @@ describe('Login Modal', () => {
         page.openLoginMenu();
 
         // Registration link should be visible
-        cy.get('ds-themed-navbar [data-test="register"]').should('be.visible');
+        cy.get('ds-themed-header [data-test="register"]').should('be.visible');
 
         // Click registration link & you should go to registration page
-        cy.get('ds-themed-navbar [data-test="register"]').click();
+        cy.get('ds-themed-header [data-test="register"]').click();
         cy.location('pathname').should('eq', '/register');
         cy.get('ds-register-email').should('exist');
     });
@@ -117,10 +117,10 @@ describe('Login Modal', () => {
         page.openLoginMenu();
 
         // Forgot password link should be visible
-        cy.get('ds-themed-navbar [data-test="forgot"]').should('be.visible');
+        cy.get('ds-themed-header [data-test="forgot"]').should('be.visible');
 
         // Click link & you should go to Forgot Password page
-        cy.get('ds-themed-navbar [data-test="forgot"]').click();
+        cy.get('ds-themed-header [data-test="forgot"]').click();
         cy.location('pathname').should('eq', '/forgot');
         cy.get('ds-forgot-email').should('exist');
     });
diff --git a/cypress/e2e/search-navbar.cy.ts b/cypress/e2e/search-navbar.cy.ts
index 648db17fe65..0e2983e7903 100644
--- a/cypress/e2e/search-navbar.cy.ts
+++ b/cypress/e2e/search-navbar.cy.ts
@@ -3,15 +3,15 @@ import { TEST_SEARCH_TERM } from 'cypress/support/e2e';
 const page = {
     fillOutQueryInNavBar(query) {
         // Click the magnifying glass
-        cy.get('ds-themed-navbar [data-test="header-search-icon"]').click();
+        cy.get('ds-themed-header [data-test="header-search-icon"]').click();
         // Fill out a query in input that appears
-        cy.get('ds-themed-navbar [data-test="header-search-box"]').type(query);
+        cy.get('ds-themed-header [data-test="header-search-box"]').type(query);
     },
     submitQueryByPressingEnter() {
-        cy.get('ds-themed-navbar [data-test="header-search-box"]').type('{enter}');
+        cy.get('ds-themed-header [data-test="header-search-box"]').type('{enter}');
     },
     submitQueryByPressingIcon() {
-        cy.get('ds-themed-navbar [data-test="header-search-icon"]').click();
+        cy.get('ds-themed-header [data-test="header-search-icon"]').click();
     }
 };
 
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
index 7f1e8716ba5..f0f7a49573e 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -1,23 +1,21 @@
-<div class="sidebar-section">
-    <a class="nav-item nav-link d-flex flex-row flex-nowrap"
-       [ngClass]="{ disabled: isDisabled }"
-       [attr.aria-disabled]="isDisabled"
-       [attr.aria-labelledby]="'sidebarName-' + section.id"
-       [title]="('menu.section.icon.' + section.id) | translate"
-       [routerLink]="itemModel.link"
-       (keyup.space)="navigate($event)"
-       (keyup.enter)="navigate($event)"
-       href="javascript:void(0);"
-    >
-      <div class="shortcut-icon">
-        <i class="fas fa-{{section.icon}} fa-fw"></i>
+<li role="presentation">
+  <a class="sidebar-section-wrapper"
+     [ngClass]="{ disabled: isDisabled }"
+     role="menuitem"
+     [attr.aria-disabled]="isDisabled"
+     [attr.aria-labelledby]="adminMenuSectionTitleId(section.id)"
+     [routerLink]="itemModel.link"
+     (keyup.space)="navigate($event)"
+     (keyup.enter)="navigate($event)"
+     href="javascript:void(0);"
+  >
+    <div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
+      <i class="fas fa-{{section.icon}} fa-fw"></i>
+    </div>
+    <div class="sidebar-collapsible-element-outer-wrapper">
+      <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
+        <span [id]="adminMenuSectionTitleId(section.id)">{{itemModel.text | translate}}</span>
       </div>
-      <div class="sidebar-collapsible">
-        <div class="toggle">
-          <span id="sidebarName-{{section.id}}" class="section-header-text">
-            {{itemModel.text | translate}}
-          </span>
-        </div>
-      </div>
-    </a>
-</div>
+    </div>
+  </a>
+</li>
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
index 260a364d7a8..296a70331cb 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.spec.ts
@@ -48,7 +48,7 @@ describe('AdminSidebarSectionComponent', () => {
     });
 
     it('should set the right icon', () => {
-      const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas'));
+      const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas'));
       expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
     });
     it('should not contain the disabled class', () => {
@@ -88,7 +88,7 @@ describe('AdminSidebarSectionComponent', () => {
     });
 
     it('should set the right icon', () => {
-      const icon = fixture.debugElement.query(By.css('.shortcut-icon')).query(By.css('i.fas'));
+      const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"]')).query(By.css('i.fas'));
       expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
     });
     it('should contain the disabled class', () => {
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
index b195526d1c0..51a0902f61b 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -52,4 +52,12 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement
       this.router.navigate(this.itemModel.link);
     }
   }
+
+  adminMenuSectionId(sectionId: string) {
+    return `admin-menu-section-${sectionId}`;
+  }
+
+  adminMenuSectionTitleId(sectionId: string) {
+    return `admin-menu-section-${sectionId}-title`;
+  }
 }
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index ca69501382e..26f2adfe395 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -1,54 +1,62 @@
-<nav class="navbar navbar-dark p-0"
-     [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
+<nav class="navbar navbar-dark p-0 vh-100"
+     id="admin-sidebar"
+     [attr.aria-label]="'menu.header.nav.description' | translate"
+     [ngClass]="{'expanded': sidebarOpen, 'collapsed': sidebarClosed, 'transitioning': sidebarTransitioning}"
      [@slideSidebar]="{
       value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
-      params: {sidebarWidth: (sidebarWidth | async)}
+      params: { collapsedWidth: (collapsedSidebarWidth$ | async), expandedWidth: (expandedSidebarWidth$ | async) }
      }" (@slideSidebar.done)="finishSlide($event)" (@slideSidebar.start)="startSlide($event)"
      *ngIf="menuVisible | async"
      (mouseenter)="handleMouseEnter($event)"
-     (mouseleave)="handleMouseLeave($event)"
-     role="navigation" [attr.aria-label]="'menu.header.admin.description' |translate">
-    <div class="sidebar-top-level-items">
-        <ul class="navbar-nav">
-            <li class="admin-menu-header">
-              <div class="sidebar-section">
-                <div href="javascript:void(0);" class="nav-item d-flex flex-row flex-nowrap py-0">
-                  <div class="shortcut-icon navbar-brand logo-wrapper">
-                    <img class="admin-logo" src="assets/images/dspace-logo-mini.svg"
-                         [alt]="('menu.header.image.logo') | translate">
-                  </div>
-                  <div class="sidebar-collapsible navbar-brand">
-                    <div class="mr-0">
-                      <h4 class="section-header-text mb-0">{{ 'menu.header.admin' | translate }}</h4>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </li>
+     (mouseleave)="handleMouseLeave($event)">
 
-            <li *ngFor="let section of (sections | async)">
-                <ng-container
-                        *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-            </li>
-        </ul>
-    </div>
-    <div class="navbar-nav">
-        <div class="sidebar-section" id="sidebar-collapse-toggle">
-            <button class="nav-item nav-link sidebar-section d-flex flex-row flex-nowrap border-0" type="button"
-               (click)="toggle($event)"
-               (keyup.space)="toggle($event)"
-            >
-              <span class="shortcut-icon">
-                <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
-                   [title]="'menu.section.icon.pin' | translate"></i>
-                <i *ngIf="!(menuCollapsed | async)" class="fas fa-fw fa-angle-double-left"
-                   [title]="'menu.section.icon.unpin' | translate"></i>
-              </span>
-              <span class="sidebar-collapsible text-left">
-                <span *ngIf="menuCollapsed | async" class="section-header-text">{{'menu.section.pin' | translate }}</span>
-                <span *ngIf="!(menuCollapsed | async)" class="section-header-text">{{'menu.section.unpin' | translate }}</span>
-              </span>
-            </button>
+  <!-- HEADER -->
+
+  <div class="sidebar-full-width-container" id="sidebar-header-container" aria-hidden="true">
+    <div class="sidebar-section-wrapper">
+      <div class="sidebar-fixed-element-wrapper">
+        <img id="admin-sidebar-logo" src="assets/images/dspace-logo-mini.svg" [alt]="('menu.header.image.logo') | translate" aria-hidden="true">
+      </div>
+      <div class="sidebar-collapsible-element-outer-wrapper">
+        <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
+          <h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
         </div>
+      </div>
     </div>
+  </div>
+
+  <!-- ITEMS -->
+
+  <div class="sidebar-full-width-container" id="sidebar-top-level-items-container">
+    <ul class="sidebar-full-width-container" id="sidebar-top-level-items" role="menubar"
+        [attr.aria-label]="'menu.header.admin.description' |translate">
+      <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>
+    </ul>
+  </div>
+
+  <!-- TOGGLER -->
+
+  <div class="sidebar-full-width-container" id="sidebar-collapse-toggle-container" aria-hidden="true">
+    <a class="sidebar-section-wrapper sidebar-full-width-container"
+       href="javascript:void(0);"
+       (click)="toggle($event)"
+       (keyup.space)="toggle($event)"
+    >
+      <div class="sidebar-fixed-element-wrapper">
+        <i *ngIf="(menuCollapsed | async)" class="fas fa-fw fa-angle-double-right"
+           [title]="'menu.section.icon.pin' | translate"></i>
+        <i *ngIf="!(menuCollapsed | async)" class="fas fa-fw fa-angle-double-left"
+           [title]="'menu.section.icon.unpin' | translate"></i>
+      </div>
+      <div class="sidebar-collapsible-element-outer-wrapper">
+        <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
+          {{ ((menuCollapsed | async) ? 'menu.section.pin' : 'menu.section.unpin' ) | translate }}
+        </div>
+      </div>
+    </a>
+  </div>
+
 </nav>
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
index 5ed0142c7f9..c2f3279a8ea 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
@@ -1,123 +1,140 @@
 :host {
-  --ds-icon-z-index: 10;
-
-    left: 0;
-    top: 0;
-    height: 100vh;
-    flex: 1 1 auto;
-    nav {
-        background-color: var(--ds-admin-sidebar-bg);
-        height: 100%;
-        flex-direction: column;
-        > div {
-            width: 100%;
-            &.sidebar-top-level-items {
-                flex: 1;
-                overflow: auto;
-                @include dark-scrollbar;
-            }
+
+  /* SIDEBAR SIZE AND POSITION */
+
+  /* Sidebar hierarchy:
+   § nav
+     § .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding - it can be nested)
+       § .sidebar-section-wrapper
+         § .sidebar-fixed-element-wrapper
+         § .sidebar-collapsible-element-outer-wrapper
+           § .sidebar-collapsible-element-inner-wrapper
+             § .sidebar-item
+   */
+
+  // Sidebar position
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: var(--ds-sidebar-z-index);
+
+  // Sidebar size and content position
+  nav#admin-sidebar {
+
+    max-width: var(--ds-admin-sidebar-fixed-element-width); // Sidebar collapsed width
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    div#sidebar-top-level-items-container {
+      flex: 1 1 auto; // Fill available vertical space
+      overflow-x: hidden;
+      overflow-y: auto;
+      @include dark-scrollbar;
+    }
+
+    img#admin-sidebar-logo {
+      width: 20px;
+    }
+
+    ::ng-deep {
+
+      // This class must be applied to any nested wrapper containing a sidebar section
+      .sidebar-full-width-container {
+        width: 100%;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+
+      // This class must be applied to the innermost block element containing a section or subsection link
+      // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
+      .sidebar-item {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+      }
+
+      // These classes handle the collapsing behavior
+      .sidebar-section-wrapper {
+
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+
+        // These elements have fixed width and determine the width of the collapsed sidebar
+        & > .sidebar-fixed-element-wrapper {
+          min-width: var(--ds-admin-sidebar-fixed-element-width);
+          flex: 1 1 auto; // Fill available space
+
+          // Align the icons
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
         }
 
-        &.inactive ::ng-deep .sidebar-collapsible {
-            margin-left: calc(-1 * var(--ds-sidebar-items-width));
+        & > .sidebar-collapsible-element-outer-wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: flex-end; // make inner wrapper slide on the left when collapsing
+          max-width: calc(100% - var(--ds-admin-sidebar-fixed-element-width)); // fill available space
+          padding-left: var(--ds-dark-scrollbar-width); // leave room for scrollbar
+          overflow-x: hidden; // hide inner wrapper when sidebar is collapsed
+
+          // These elements have fixed width and slide on the left when the sidebar is collapsed
+          // Their content should fill all available space
+          & > .sidebar-collapsible-element-inner-wrapper {
+            min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
+            height: 100%;
+            padding-right: 16px !important;
+          }
         }
+      }
 
-        .navbar-nav {
-            .admin-menu-header {
-                background-color: var(--ds-admin-sidebar-header-bg);
+    }
 
-                .sidebar-section {
-                  background-color: inherit;
-                }
+    // Set here any style that depends on the sidebar status
+    &.collapsed, &.transitioning, &.expanded { }
 
-                .logo-wrapper {
-                    img {
-                        height: 20px;
-                    }
-                }
-                .section-header-text {
-                    line-height: 1.5;
-                }
+  }
 
-                .navbar-brand {
-                  margin-right: 0;
-                }
+  /* SIDEBAR STYLE */
 
-            }
-        }
+  nav#admin-sidebar {
 
+    background-color: var(--ds-admin-sidebar-bg);
 
-        ::ng-deep {
-            .navbar-nav {
-                .sidebar-section {
-                    display: flex;
-                    align-content: stretch;
-                    background-color: var(--ds-admin-sidebar-bg);
-                    overflow-x: visible;
-
-                    .nav-item {
-                        padding-top: var(--bs-spacer);
-                        padding-bottom: var(--bs-spacer);
-                        background-color: inherit;
-
-                      &:focus-visible {
-                        // since links fill the whole sidebar, we _inset_ the outline
-                        outline-offset: -4px;
-
-                        // replace padding with margins so it doesn't extend over the :focus-visible outline
-                        //  → can't remove the padding altogether; the icon needs to fill out
-                        //    the collapsed width of the sidebar for the slide animation to look decent.
-                        .shortcut-icon {
-                          padding-left: 0;
-                          padding-right: 0;
-                          margin-left: var(--ds-icon-padding);
-                          margin-right: var(--ds-icon-padding);
-                        }
-                        .logo-wrapper {
-                          margin-right: var(--bs-navbar-padding-x) !important;
-                        }
-                        .navbar-brand {
-                          padding-top: 0;
-                          padding-bottom: 0;
-                          margin-top: var(--bs-navbar-brand-padding-y);
-                          margin-bottom: var(--bs-navbar-brand-padding-y);
-                        }
-                      }
-                    }
-
-                    .shortcut-icon {
-                        background-color: inherit;
-                        padding-left: var(--ds-icon-padding);
-                        padding-right: var(--ds-icon-padding);
-                        z-index: var(--ds-icon-z-index);
-                        align-self: baseline;
-                    }
-
-                    .sidebar-collapsible {
-                        padding-left: 0;
-                        padding-right: var(--bs-spacer);
-                        width: var(--ds-sidebar-items-width);
-                        position: relative;
-                        .toggle {
-                          width: 100%;
-                        }
-
-                        ul {
-                          padding-top: var(--bs-spacer);
-
-                          li a {
-                            padding-left: var(--bs-spacer);
-                          }
-                        }
-                    }
-
-                    &.active > .sidebar-collapsible > .nav-link {
-                        color: var(--bs-navbar-dark-active-color);
-                    }
-                }
-            }
+    ::ng-deep {
+
+      color: white;
+
+      // Set here the style of the *-menu-item nested components
+      .ds-menu-item {
+      }
+
+      a {
+        color: var(--ds-admin-sidebar-link-color);
+        text-decoration: none;
+
+        &:hover, &:focus {
+          color: var(--ds-admin-sidebar-link-hover-color);
         }
+      }
+    }
 
+    div#sidebar-header-container {
+      background-color: var(--ds-admin-sidebar-header-bg);
+      .sidebar-fixed-element-wrapper {
+        background-color: var(--ds-admin-sidebar-header-bg);
+      }
     }
 
+    div#sidebar-collapse-toggle-container {
+      .sidebar-collapsible-element-inner-wrapper {
+      }
+    }
+  }
 }
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
index 9522be29ce3..058b81df2f6 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.spec.ts
@@ -143,7 +143,7 @@ describe('AdminSidebarComponent', () => {
   describe('when the collapse link is clicked', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleMenu');
-      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle > button'));
+      const sidebarToggler = fixture.debugElement.query(By.css('#sidebar-collapse-toggle-container > a'));
       sidebarToggler.triggerEventHandler('click', {
         preventDefault: () => {/**/
         }
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
index 26ded965d4d..741f9b7630d 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, Injector, OnInit } from '@angular/core';
+import { Component, HostListener, Injector, Input, OnInit } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
@@ -28,9 +28,14 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
   menuID = MenuID.ADMIN;
 
   /**
-   * Observable that emits the width of the collapsible menu sections
+   * Observable that emits the width of the sidebar when expanded
    */
-  sidebarWidth: Observable<string>;
+  @Input() expandedSidebarWidth$: Observable<string>;
+
+  /**
+   * Observable that emits the width of the sidebar when collapsed
+   */
+  @Input() collapsedSidebarWidth$: Observable<string>;
 
   /**
    * Is true when the sidebar is open, is false when the sidebar is animating or closed
@@ -44,6 +49,12 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   sidebarClosed = !this.sidebarOpen; // Closed in UI, animation finished
 
+  /**
+   * Is true when the sidebar is opening or closing
+   * @type {boolean}
+   */
+  sidebarTransitioning = !this.sidebarOpen; // Animation in progress
+
   /**
    * Emits true when either the menu OR the menu's preview is expanded, else emits false
    */
@@ -69,7 +80,6 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarWidth = this.variableService.getVariable('--ds-sidebar-items-width');
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {
@@ -134,6 +144,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    * @param event The animation event
    */
   startSlide(event: any): void {
+    this.sidebarTransitioning = true;
     if (event.toState === 'expanded') {
       this.sidebarClosed = false;
     } else if (event.toState === 'collapsed') {
@@ -146,6 +157,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    * @param event The animation event
    */
   finishSlide(event: any): void {
+    this.sidebarTransitioning = false;
     if (event.fromState === 'expanded') {
       this.sidebarClosed = true;
     } else if (event.fromState === 'collapsed') {
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index 1f4666bbd08..303b1400f40 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -1,37 +1,47 @@
-<div class="sidebar-section" [ngClass]="{'expanded': (expanded | async)}"
+<li [ngClass]="{'expanded': (isExpanded$ | async)}" role="presentation"
     [@bgColor]="{
-     value: ((expanded | async) ? 'endBackground' : 'startBackground'),
-     params: {endColor: (sidebarActiveBg | async)}}">
-  <div class="nav-item nav-link d-flex flex-row flex-nowrap"
-     role="button" tabindex="0"
-     [attr.aria-labelledby]="'sidebarName-' + section.id"
-     [attr.aria-expanded]="expanded | async"
-     [title]="('menu.section.icon.' + section.id) | translate"
-       [class.disabled]="section.model?.disabled"
+     value: ((isExpanded$ | async) ? 'endBackground' : 'startBackground'),
+     params: {endColor: (sidebarActiveBg$ | async)}
+     }">
+  <a class="sidebar-section-wrapper"
+     role="menuitem" tabindex="0"
+     aria-haspopup="menu"
+     [attr.aria-controls]="adminMenuSectionId(section.id)"
+     [attr.aria-expanded]="isExpanded$ | async"
+     [attr.aria-label]="('menu.section.toggle.' + section.id) | translate"
+     [class.disabled]="section.model?.disabled"
      (click)="toggleSection($event)"
      (keyup.space)="toggleSection($event)"
      (keyup.enter)="toggleSection($event)"
+     href="javascript:void(0);"
   >
-    <div class="shortcut-icon h-100">
+    <div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
       <i class="fas fa-{{section.icon}} fa-fw"></i>
     </div>
-    <div class="sidebar-collapsible">
-      <div class="toggle">
-        <span id="sidebarName-{{section.id}}" class="section-header-text">
+    <div class="sidebar-collapsible-element-outer-wrapper">
+      <div class="sidebar-collapsible-element-inner-wrapper sidebar-item toggler-wrapper">
+        <span [id]="adminMenuSectionTitleId(section.id)">
           <ng-container
             *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
         </span>
-        <i class="fas fa-chevron-right fa-pull-right"
-           [@rotate]="(expanded | async) ? 'expanded' : 'collapsed'"
-           [title]="('menu.section.toggle.' + section.id) | translate"
+        <i class="fas fa-chevron-right fa-xs" aria-hidden="true"
+           [@rotate]="(isExpanded$ | async) ? 'expanded' : 'collapsed'"
         ></i>
       </div>
-      <ul class="sidebar-sub-level-items list-unstyled" @slide *ngIf="(expanded | async)">
-        <li *ngFor="let subSection of (subSections$ | async)">
-          <ng-container
-            *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </li>
-      </ul>
+    </div>
+  </a>
+  <div class="sidebar-section-wrapper subsection" @slide *ngIf="(isExpanded$ | async)">
+    <div class="sidebar-fixed-element-wrapper"></div>
+    <div class="sidebar-collapsible-element-outer-wrapper">
+      <div class="sidebar-collapsible-element-inner-wrapper">
+        <ul class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
+          <li class="sidebar-item" role="presentation" *ngFor="let subSection of (subSections$ | async)">
+            {{ (sectionMap$ | async).get(subSection.id).component | json}}
+            <ng-container
+              *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
-</div>
+</li>
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index 802fade8c13..937d996102f 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -1,23 +1,24 @@
-:host ::ng-deep {
-    .fa-chevron-right {
-        padding-left: calc(var(--bs-spacer) / 2);
-        font-size: 0.5rem;
-        line-height: 3;
+:host {
+  ul.sidebar-sub-level-item-list  {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    ::ng-deep .ds-menu-item {
+      margin-left: 12px;
     }
+  }
 
-    .sidebar-sub-level-items {
-        list-style: disc;
-        color: var(--bs-navbar-dark-color);
-        overflow: hidden;
-        margin-bottom: calc(-1 * var(--bs-spacer)); // the bottom-most nav-item is padded, no need for double spacing
-    }
-
-    .sidebar-collapsible {
-        display: flex;
-        flex-direction: column;
-    }
+  .toggler-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-    li.sidebar-section.expanded {
-      background-color: var(--ds-admin-sidebar-active-bg) !important;
+  .subsection {
+    .sidebar-collapsible-element-inner-wrapper {
+      overflow-y: hidden;
     }
+  }
 }
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
index dd31f757c23..bd859d295d3 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.spec.ts
@@ -49,14 +49,14 @@ describe('ExpandableAdminSidebarSectionComponent', () => {
   });
 
   it('should set the right icon', () => {
-    const icon = fixture.debugElement.query(By.css('.shortcut-icon > i.fas'));
+    const icon = fixture.debugElement.query(By.css('[data-test="sidebar-section-icon"] > i.fas'));
     expect(icon.nativeElement.getAttribute('class')).toContain('fa-' + iconString);
   });
 
   describe('when the header text is clicked', () => {
     beforeEach(() => {
       spyOn(menuService, 'toggleActiveSection');
-      const sidebarToggler = fixture.debugElement.query(By.css('.sidebar-section > div.nav-item'));
+      const sidebarToggler = fixture.debugElement.query(By.css('a.sidebar-section-wrapper'));
       sidebarToggler.triggerEventHandler('click', {
         preventDefault: () => {/**/
         }
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index 8591fef97eb..e2995598f86 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -31,23 +31,23 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
   /**
    * The background color of the section when it's active
    */
-  sidebarActiveBg;
+  sidebarActiveBg$: Observable<string>;
 
   /**
    * Emits true when the sidebar is currently collapsed, true when it's expanded
    */
-  sidebarCollapsed: Observable<boolean>;
+  isSidebarCollapsed$: Observable<boolean>;
 
   /**
    * Emits true when the sidebar's preview is currently collapsed, true when it's expanded
    */
-  sidebarPreviewCollapsed: Observable<boolean>;
+  isSidebarPreviewCollapsed$: Observable<boolean>;
 
   /**
    * Emits true when the menu section is expanded, else emits false
    * This is true when the section is active AND either the sidebar or it's preview is open
    */
-  expanded: Observable<boolean>;
+  isExpanded$: Observable<boolean>;
 
   constructor(
     @Inject('sectionDataProvider') menuSection,
@@ -64,12 +64,20 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
    */
   ngOnInit(): void {
     super.ngOnInit();
-    this.sidebarActiveBg = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
-    this.sidebarCollapsed = this.menuService.isMenuCollapsed(this.menuID);
-    this.sidebarPreviewCollapsed = this.menuService.isMenuPreviewCollapsed(this.menuID);
-    this.expanded = combineLatestObservable(this.active, this.sidebarCollapsed, this.sidebarPreviewCollapsed)
-      .pipe(
-        map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed)))
-      );
+    this.sidebarActiveBg$ = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
+    this.isSidebarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
+    this.isSidebarPreviewCollapsed$ = this.menuService.isMenuPreviewCollapsed(this.menuID);
+    this.isExpanded$ = combineLatestObservable([this.active, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
+      map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed)))
+    );
+  }
+
+  toggleSection($event: Event) {
+    this.menuService.expandMenuPreview(this.menuID); // fixes accessibility issue
+    super.toggleSection($event);
+  }
+
+  adminMenuSubsectionId(sectionId: string, subsectionId: string) {
+    return `admin-menu-section-${sectionId}-${subsectionId}`;
   }
 }
diff --git a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
index f2f35725e8a..03b783aeafb 100644
--- a/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
+++ b/src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts
@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { AdminSidebarComponent } from './admin-sidebar.component';
+import { Observable } from 'rxjs';
 
 /**
  * Themed wrapper for AdminSidebarComponent
@@ -11,6 +12,19 @@ import { AdminSidebarComponent } from './admin-sidebar.component';
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
 export class ThemedAdminSidebarComponent extends ThemedComponent<AdminSidebarComponent> {
+
+  /**
+   * Observable that emits the width of the sidebar when expanded
+   */
+  @Input() expandedSidebarWidth$: Observable<string>;
+
+  /**
+   * Observable that emits the width of the sidebar when collapsed
+   */
+  @Input() collapsedSidebarWidth$: Observable<string>;
+
+  protected inAndOutputNames: (keyof AdminSidebarComponent & keyof this)[] = ['collapsedSidebarWidth$', 'expandedSidebarWidth$'];
+
   protected getComponentName(): string {
     return 'AdminSidebarComponent';
   }
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 44ca82b61da..180ce16ba5d 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,22 +1,36 @@
-<div class="nav-item dropdown expandable-navbar-section text-md-center"
-    *ngVar="(active | async) as isActive"
-    (keyup.enter)="isActive ? deactivateSection($event) : activateSection($event)"
-    (keyup.space)="isActive ? deactivateSection($event) : activateSection($event)"
-    (keydown.space)="$event.preventDefault()"
-    (mouseenter)="activateSection($event)"
-    (mouseleave)="deactivateSection($event)">
-    <button class="btn btn-link nav-link dropdown-toggle" routerLinkActive="active" type="button"
-       [class.disabled]="section.model?.disabled"
+<li class="ds-menu-item-wrapper text-md-center" role="presentation"
+    [id]="'expandable-navbar-section-' + section.id"
+    (mouseenter)="onMouseEnter($event, isActive)"
+    (mouseleave)="onMouseLeave($event, isActive)"
+    data-test="navbar-section-wrapper"
+    *ngVar="(active | async) as isActive">
+    <a href="javascript:void(0);" routerLinkActive="active"
+       role="menuitem"
+       (keyup.enter)="toggleSection($event)"
+       (keyup.space)="toggleSection($event)"
        (click)="toggleSection($event)"
-       data-toggle="dropdown">
+       (keydown.space)="$event.preventDefault()"
+       aria-haspopup="menu"
+       data-test="navbar-section-toggler"
+       [attr.aria-expanded]="isActive"
+       [attr.aria-controls]="expandableNavbarSectionId(section.id)"
+       class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
+       [class.disabled]="section.model?.disabled"
+       id="browseDropdown">
+      <span class="flex-fill">
         <ng-container
-                *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-    </button>
-    <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
-        class="m-0 shadow-none border-top-0 dropdown-menu show">
-        <li *ngFor="let subSection of (subSections$ | async)">
+          *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+<!--        <span class="sr-only">{{'nav.expandable-navbar-section-suffix' | translate}}</span>-->
+      </span>
+      <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
+    </a>
+    <ul @slide *ngIf="isActive" (click)="deactivateSection($event)"
+        [id]="expandableNavbarSectionId(section.id)"
+        role="menu"
+        class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
+        <li *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
             <ng-container
                     *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
         </li>
     </ul>
-</div>
+</li>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index ff48341b0f7..961d4504867 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -1,47 +1,24 @@
-.expandable-navbar-section {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.btn.nav-link {
-  text-align: left;
-  border: none;
-
-  &:active, &:focus {
-    box-shadow: none !important;
+:host {
+  li.ds-menu-item-wrapper {
+    position: relative; // align dropdown menu with respect to this element
   }
-}
 
-.dropdown-menu {
-    background-color: var(--ds-expandable-navbar-bg);
+  .dropdown-menu {
     overflow: hidden;
-    min-width: 100%;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    ::ng-deep a.nav-link {
-        color: var(--ds-expandable-navbar-link-color) !important;
-        padding-right: var(--bs-spacer);
-        padding-left: var(--bs-spacer);
-        white-space: nowrap;
-
-        &:hover, &:focus {
-          color: var(--ds-expandable-navbar-link-color-hover) !important;
-        }
+    @include media-breakpoint-down(sm) {
+      border: 0;
+      background-color: var(--ds-expandable-navbar-bg);
     }
-}
-
-/** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)) {
-    .dropdown-toggle {
-        &:after {
-            float: right;
-            margin-top: calc(var(--bs-spacer) / 2);
-        }
+    @include media-breakpoint-up(md) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      background-color: var(--ds-navbar-dropdown-bg);
     }
-    .dropdown-menu {
-        border: 0;
+  }
 
+  .toggle-menu-icon {
+    &, &:hover {
+      text-decoration: none;
     }
+  }
 }
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
index f4c72e12375..986dca86eb1 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -47,120 +47,138 @@ describe('ExpandableNavbarSectionComponent', () => {
       expect(component).toBeTruthy();
     });
 
-    describe('when the mouse enters the section header', () => {
+    describe('when the mouse enters the section header (while inactive)', () => {
       beforeEach(() => {
+        spyOn(component, 'onMouseEnter').and.callThrough();
+        spyOn(component, 'activateSection').and.callThrough();
         spyOn(menuService, 'activateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
+        spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
+        component.ngOnInit();
+        fixture.detectChanges();
+
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseenter', {
           preventDefault: () => {/**/
           }
         });
       });
 
-      it('should call activateSection on the menuService', () => {
+      it('should call onMouseEnter', () => {
+        expect(component.onMouseEnter).toHaveBeenCalled();
+      });
+
+      it('should activate the section', () => {
+        expect(component.activateSection).toHaveBeenCalled();
         expect(menuService.activateSection).toHaveBeenCalled();
       });
     });
 
-    describe('when the mouse leaves the section header', () => {
+    describe('when the mouse leaves the section header (while active)', () => {
       beforeEach(() => {
+        spyOn(component, 'onMouseLeave').and.callThrough();
+        spyOn(component, 'deactivateSection').and.callThrough();
         spyOn(menuService, 'deactivateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property.
+        spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true));
+        component.ngOnInit();
+        component.mouseEntered = true;
+        fixture.detectChanges();
+
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseleave', {
           preventDefault: () => {/**/
           }
         });
       });
 
-      it('should call deactivateSection on the menuService', () => {
+      it('should call onMouseLeave', () => {
+        expect(component.onMouseLeave).toHaveBeenCalled();
+      });
+
+      it('should deactivate the section', () => {
+        expect(component.deactivateSection).toHaveBeenCalled();
         expect(menuService.deactivateSection).toHaveBeenCalled();
       });
     });
 
     describe('when Enter key is pressed on section header (while inactive)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'activateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.enter) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
       });
 
       it('should call activateSection on the menuService', () => {
-        expect(menuService.activateSection).toHaveBeenCalled();
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
 
     describe('when Enter key is pressed on section header (while active)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'deactivateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.enter) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
       });
 
-      it('should call deactivateSection on the menuService', () => {
-        expect(menuService.deactivateSection).toHaveBeenCalled();
+      it('should call toggleSection on the menuService', () => {
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
 
     describe('when spacebar is pressed on section header (while inactive)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'activateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.space) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
       });
 
-      it('should call activateSection on the menuService', () => {
-        expect(menuService.activateSection).toHaveBeenCalled();
+      it('should call toggleSection on the menuService', () => {
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
 
     describe('when spacebar is pressed on section header (while active)', () => {
       beforeEach(() => {
-        spyOn(menuService, 'deactivateSection');
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
         // Make sure section is 'active'. Requires calling ngOnInit() to update component 'active' property.
         spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(true));
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         // dispatch the (keyup.space) action used in our component HTML
         sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
       });
 
-      it('should call deactivateSection on the menuService', () => {
-        expect(menuService.deactivateSection).toHaveBeenCalled();
-      });
-    });
-
-    describe('when a click occurs on the section header', () => {
-      beforeEach(() => {
-        spyOn(menuService, 'toggleActiveSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
-        sidebarToggler.triggerEventHandler('click', {
-          preventDefault: () => {/**/
-          }
-        });
-      });
-
-      it('should not call toggleActiveSection on the menuService', () => {
-        expect(menuService.toggleActiveSection).not.toHaveBeenCalled();
+      it('should call toggleSection on the menuService', () => {
+        expect(component.toggleSection).toHaveBeenCalled();
+        expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
   });
@@ -195,7 +213,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when the mouse enters the section header', () => {
       beforeEach(() => {
         spyOn(menuService, 'activateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseenter', {
           preventDefault: () => {/**/
           }
@@ -210,7 +228,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when the mouse leaves the section header', () => {
       beforeEach(() => {
         spyOn(menuService, 'deactivateSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-wrapper"]'));
         sidebarToggler.triggerEventHandler('mouseleave', {
           preventDefault: () => {/**/
           }
@@ -225,7 +243,7 @@ describe('ExpandableNavbarSectionComponent', () => {
     describe('when a click occurs on the section header link', () => {
       beforeEach(() => {
         spyOn(menuService, 'toggleActiveSection');
-        const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown > button'));
+        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
         sidebarToggler.triggerEventHandler('click', {
           preventDefault: () => {/**/
           }
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index d32fa46a327..030b2b3da4e 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -1,10 +1,11 @@
-import { Component, Inject, Injector, OnInit } from '@angular/core';
+import { Component, HostListener, Inject, Injector, OnInit } from '@angular/core';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { slide } from '../../shared/animations/slide';
 import { first } from 'rxjs/operators';
 import { HostWindowService } from '../../shared/host-window.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
+import { Observable } from 'rxjs';
 
 /**
  * Represents an expandable section in the navbar
@@ -21,12 +22,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   menuID = MenuID.PUBLIC;
 
+  /**
+   * True if mouse has entered the menu section toggler
+   */
+  mouseEntered = false;
+
+  /**
+   * True if screen size was small before a resize event
+   */
+  wasMobile = undefined;
+
+  /**
+   * Observable that emits true if the screen is small, false otherwise
+   */
+  isMobile$: Observable<boolean>;
+
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isMobile$.pipe(
+      first()
+    ).subscribe((isMobile) => {
+      // When switching between desktop and mobile active sections should be deactivated
+      if (isMobile !== this.wasMobile) {
+        this.wasMobile = isMobile;
+        this.menuService.deactivateSection(this.menuID, this.section.id);
+        this.mouseEntered = false;
+      }
+    });
+  }
+
   constructor(@Inject('sectionDataProvider') menuSection,
               protected menuService: MenuService,
               protected injector: Injector,
               private windowService: HostWindowService
   ) {
     super(menuSection, menuService, injector);
+    this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit() {
@@ -34,48 +65,42 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
   }
 
   /**
-   * Overrides the super function that activates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be activated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse enters the section toggler activate the menu section
+   * @param $event
+   * @param isActive
    */
-  activateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
+  onMouseEnter($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
       first()
     ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.activateSection(event);
+      if (!isMobile && !isActive && !this.mouseEntered) {
+        this.activateSection($event);
       }
+      this.mouseEntered = true;
     });
   }
 
   /**
-   * Overrides the super function that deactivates this section (triggered on hover)
-   * Has an extra check to make sure the section can only be deactivated on non-mobile devices
-   * @param {Event} event The user event that triggered this function
+   * When the mouse leaves the section toggler deactivate the menu section
+   * @param $event
+   * @param isActive
    */
-  deactivateSection(event): void {
-    this.windowService.isXsOrSm().pipe(
+  onMouseLeave($event: Event, isActive: boolean) {
+    this.isMobile$.pipe(
       first()
     ).subscribe((isMobile) => {
-      if (!isMobile) {
-        super.deactivateSection(event);
+      if (!isMobile && isActive && this.mouseEntered) {
+        this.deactivateSection($event);
       }
+      this.mouseEntered = false;
     });
   }
 
   /**
-   * Overrides the super function that toggles this section (triggered on click)
-   * Has an extra check to make sure the section can only be toggled on mobile devices
-   * @param {Event} event The user event that triggered this function
+   * returns the ID of the DOM element representing the navbar section
+   * @param sectionId
    */
-  toggleSection(event): void {
-    event.preventDefault();
-    this.windowService.isXsOrSm().pipe(
-      first()
-    ).subscribe((isMobile) => {
-      if (isMobile) {
-        super.toggleSection(event);
-      }
-    });
+  expandableNavbarSectionId(sectionId: string) {
+    return `expandable-navbar-section-${sectionId}-dropdown`;
   }
 }
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
index 42754be1e69..ac51c863425 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,3 +1,5 @@
-<div class="nav-item navbar-section text-md-center">
+<li role="presentation"
+    class="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>
+</li>
diff --git a/src/app/navbar/navbar-section/navbar-section.component.scss b/src/app/navbar/navbar-section/navbar-section.component.scss
index 7af4ada8e63..1cda7dcf9e0 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.scss
+++ b/src/app/navbar/navbar-section/navbar-section.component.scss
@@ -1,5 +1,5 @@
-.navbar-section {
-  display: flex;
-  align-items: center;
-  height: 100%;
+:host {
+  li.ds-menu-item-wrapper {
+
+  }
 }
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 8bf1f942c79..5e15315a9bf 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,18 +1,21 @@
-<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-    class="navbar navbar-light navbar-expand-md p-md-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
-    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
-    <div class="navbar-inner-container w-100" [class.container]="!(isMobile$ | async)">
-        <div class="reset-padding-md w-100">
-            <div id="collapsingNav">
-                <ul class="navbar-nav navbar-navigation mr-auto shadow-none">
-                    <li *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
-                        <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
-                    </li>
-                    <li *ngFor="let section of (sections | async)">
-                        <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
-                    </li>
-                </ul>
-            </div>
-        </div>
+<nav [ngClass]="{'open': !(menuCollapsed | async)}"
+     [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+     class="navbar navbar-light navbar-expand-md px-md-0 pt-md-0 pt-3 navbar-container" role="navigation"
+     [attr.aria-label]="'nav.main.description' | translate" id="main-navbar">
+  <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
+  <div class="navbar-inner-container w-100" [class.container]="!(isMobile$ | async)">
+    <div class="w-100">
+      <div id="collapsingNav">
+        <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
+          <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
+        </ng-container>
+        <ul class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
+          <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>
+        </ul>
+      </div>
     </div>
+  </div>
 </nav>
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 8095b7fff61..23268b145f6 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,7 +1,10 @@
 :host {
+  --ds-collapsible-navbar-height: auto;
+
   nav.navbar {
     background-color: var(--ds-navbar-bg);
     align-items: baseline;
+    padding: 0;
   }
 
   /** Mobile menu styling **/
@@ -23,8 +26,8 @@
 
   @media screen and (min-width: map-get($grid-breakpoints, md)) {
     .reset-padding-md {
-      margin-left: calc(var(--bs-spacer) / -2);
-      margin-right: calc(var(--bs-spacer) / -2);
+      margin-left: calc(var(--bs-spacer) / -1);
+      margin-right: calc(var(--bs-spacer) / -1);
     }
   }
 
@@ -38,9 +41,20 @@
     }
   }
 
-.navbar-nav {
-  ::ng-deep a.nav-link, .btn.nav-link {
-    color: var(--ds-navbar-link-color);
+  #main-navbar ::ng-deep {
+    .ds-menu-item, .ds-menu-toggler-wrapper {
+      white-space: nowrap;
+      text-decoration: none;
+    }
+
+    .dropdown-menu {
+      padding: 0.5rem !important;
+    }
+
+    .ds-menu-item {
+      display: block;
+      color: var(--ds-navbar-link-color);
+      padding: 0.5rem 0;
 
       &:hover, &:focus {
         color: var(--ds-navbar-link-color-hover);
diff --git a/src/app/root/root.component.html b/src/app/root/root.component.html
index d6d05868923..8f079510979 100644
--- a/src/app/root/root.component.html
+++ b/src/app/root/root.component.html
@@ -1,12 +1,12 @@
-<button (click)="skipToMainContent()" class="btn btn-primary" id="skip-to-main-content">
+<button (click)="skipToMainContent()" class="sr-only" id="skip-to-main-content">
   {{ 'root.skip-to-content' | translate }}
 </button>
 
 <div class="outer-wrapper" [class.d-none]="shouldShowFullscreenLoader" [@slideSidebarPadding]="{
-     value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
-     params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
+     value: (!(isSidebarVisible$ | async) ? 'hidden' : (slideSidebarOver$ | async) ? 'unpinned' : 'pinned'),
+     params: { collapsedWidth: (collapsedSidebarWidth$ | async), expandedWidth: (expandedSidebarWidth$ | async) }
     }">
-  <ds-themed-admin-sidebar></ds-themed-admin-sidebar>
+  <ds-themed-admin-sidebar [expandedSidebarWidth$]="expandedSidebarWidth$" [collapsedSidebarWidth$]="collapsedSidebarWidth$"></ds-themed-admin-sidebar>
   <div class="inner-wrapper">
     <ds-system-wide-alert-banner></ds-system-wide-alert-banner>
     <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index 160504f14fa..4c4370fc62c 100644
--- a/src/app/root/root.component.ts
+++ b/src/app/root/root.component.ts
@@ -1,25 +1,17 @@
-import { map, startWith } from 'rxjs/operators';
-import { Component, Inject, Input, OnInit } from '@angular/core';
+import { first, map, skipWhile, startWith } from 'rxjs/operators';
+import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
-import { Store } from '@ngrx/store';
-import { TranslateService } from '@ngx-translate/core';
-
-import { MetadataService } from '../core/metadata/metadata.service';
-import { HostWindowState } from '../shared/search/host-window.reducer';
-import { NativeWindowRef, NativeWindowService } from '../core/services/window.service';
-import { AuthService } from '../core/auth/auth.service';
 import { CSSVariableService } from '../shared/sass-helper/css-variable.service';
 import { MenuService } from '../shared/menu/menu.service';
 import { HostWindowService } from '../shared/host-window.service';
 import { ThemeConfig } from '../../config/theme.config';
-import { Angulartics2DSpace } from '../statistics/angulartics/dspace-provider';
 import { environment } from '../../environments/environment';
 import { slideSidebarPadding } from '../shared/animations/slide';
 import { MenuID } from '../shared/menu/menu-id.model';
 import { getPageInternalServerErrorRoute } from '../app-routing-paths';
-import { hasValueOperator } from '../shared/empty.util';
+import { INotificationBoardOptions } from 'src/config/notifications-config.interfaces';
 
 @Component({
   selector: 'ds-root',
@@ -28,13 +20,13 @@ import { hasValueOperator } from '../shared/empty.util';
   animations: [slideSidebarPadding],
 })
 export class RootComponent implements OnInit {
-  sidebarVisible: Observable<boolean>;
-  slideSidebarOver: Observable<boolean>;
-  collapsedSidebarWidth: Observable<string>;
-  totalSidebarWidth: Observable<string>;
   theme: Observable<ThemeConfig> = of({} as any);
-  notificationOptions;
-  models;
+  isSidebarVisible$: Observable<boolean>;
+  slideSidebarOver$: Observable<boolean>;
+  collapsedSidebarWidth$: Observable<string>;
+  expandedSidebarWidth$: Observable<string>;
+  notificationOptions: INotificationBoardOptions;
+  models: any;
 
   /**
    * Whether or not to show a full screen loader
@@ -47,12 +39,6 @@ export class RootComponent implements OnInit {
   @Input() shouldShowRouteLoader: boolean;
 
   constructor(
-    @Inject(NativeWindowService) private _window: NativeWindowRef,
-    private translate: TranslateService,
-    private store: Store<HostWindowState>,
-    private metadata: MetadataService,
-    private angulartics2DSpace: Angulartics2DSpace,
-    private authService: AuthService,
     private router: Router,
     private cssService: CSSVariableService,
     private menuService: MenuService,
@@ -62,13 +48,19 @@ export class RootComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.sidebarVisible = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN);
+    this.isSidebarVisible$ = this.menuService.isMenuVisibleWithVisibleSections(MenuID.ADMIN);
 
-    this.collapsedSidebarWidth = this.cssService.getVariable('--ds-collapsed-sidebar-width').pipe(hasValueOperator());
-    this.totalSidebarWidth = this.cssService.getVariable('--ds-total-sidebar-width').pipe(hasValueOperator());
+    this.expandedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-total-width').pipe(
+      skipWhile((val) => !val),
+      first(),
+    );
+    this.collapsedSidebarWidth$ = this.cssService.getVariable('--ds-admin-sidebar-fixed-element-width').pipe(
+      skipWhile((val) => !val),
+      first(),
+    );
 
     const sidebarCollapsed = this.menuService.isMenuCollapsed(MenuID.ADMIN);
-    this.slideSidebarOver = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])
+    this.slideSidebarOver$ = combineLatestObservable([sidebarCollapsed, this.windowService.isXsOrSm()])
       .pipe(
         map(([collapsed, mobile]) => collapsed || mobile),
         startWith(true),
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index 9d18817ee39..a0f596a0fa1 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -1,4 +1,4 @@
-import { animate, animateChild, group, query, state, style, transition, trigger } from '@angular/animations';
+import { animate, group, state, style, transition, trigger } from '@angular/animations';
 
 export const slide = trigger('slide', [
   state('expanded', style({ height: '*' })),
@@ -12,45 +12,35 @@ export const slide = trigger('slide', [
 
 export const slideMobileNav = trigger('slideMobileNav', [
 
-  state('expanded', style({ height: 'auto', 'min-height': '100vh' })),
+  state('expanded', style({ height: '*', minHeight: '*' })),
 
-  state('collapsed', style({ height: 0 })),
+  state('collapsed', style({ height: 0, minHeight: 0 })),
 
   transition('expanded <=> collapsed', animate('300ms'))
 ]);
 
-const collapsedStyle = style({ marginLeft: '-{{ sidebarWidth }}' });
-const expandedStyle = style({ marginLeft: '0' });
-const options = { params: { sidebarWidth: '*' } };
+const collapsedSidebarStyle = style({ maxWidth: '{{collapsedWidth}}' });
+const expandedSidebarStyle = style({ maxWidth: '{{expandedWidth}}' });
+const unpinnedSidebarPageStyle = style({ paddingLeft: '{{collapsedWidth}}' });
+const pinnedSidebarPageStyle = style({ paddingLeft: '{{expandedWidth}}' });
+const hiddenSidebarPageStyle = style({ paddingLeft: '0' });
+const options = { params: { collapsedWidth: '*', expandedWidth: '*' } };
+const animation = '300ms ease-in-out';
 
 export const slideSidebar = trigger('slideSidebar', [
-
-  transition('expanded => collapsed',
-    group(
-      [
-        query('@*', animateChild()),
-        query('.sidebar-collapsible', expandedStyle, options),
-        query('.sidebar-collapsible', animate('300ms ease-in-out', collapsedStyle))
-      ],
-    )),
-
-  transition('collapsed => expanded',
-    group(
-      [
-        query('@*', animateChild()),
-        query('.sidebar-collapsible', collapsedStyle),
-        query('.sidebar-collapsible', animate('300ms ease-in-out', expandedStyle), options)
-      ]
-    ))
+  state('collapsed', collapsedSidebarStyle, options),
+  state('expanded', expandedSidebarStyle, options),
+  transition('expanded => collapsed', animate(animation, collapsedSidebarStyle)),
+  transition('collapsed => expanded', animate(animation, expandedSidebarStyle)),
 ]);
 
 export const slideSidebarPadding = trigger('slideSidebarPadding', [
-  state('hidden', style({ paddingLeft: 0 })),
-  state('shown', style({ paddingLeft: '{{ collapsedSidebarWidth }}' }), { params: { collapsedSidebarWidth: '*' } }),
-  state('expanded', style({ paddingLeft: '{{ totalSidebarWidth }}' }), { params: { totalSidebarWidth: '*' } }),
-  transition('hidden <=> shown', [animate('200ms')]),
-  transition('hidden <=> expanded', [animate('200ms')]),
-  transition('shown <=> expanded', [animate('200ms')]),
+  state('hidden', hiddenSidebarPageStyle),
+  state('unpinned', unpinnedSidebarPageStyle, options),
+  state('pinned', pinnedSidebarPageStyle, options),
+  transition('hidden <=> unpinned', animate(animation)),
+  transition('hidden <=> pinned', animate(animation)),
+  transition('unpinned <=> pinned', animate(animation)),
 ]);
 
 export const expandSearchInput = trigger('toggleAnimation', [
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index a0623bdd90d..44487be1e3d 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -1,40 +1,52 @@
-<ul class="navbar-nav" [ngClass]="{'mr-auto': (isXsOrSm$ | async)}">
-  <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
+<div class="navbar-nav mr-auto" *ngIf="!(isMobile$ | async); else mobileButtons" data-test="auth-nav">
+  <div *ngIf="!(isAuthenticated | async) && (showAuth | async)"
+      class="nav-item"
       (click)="$event.stopPropagation();">
-    <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <button class="btn btn-link dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
+    <div ngbDropdown #loginDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
+      <a href="javascript:void(0);" class="dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
          (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
-         ngbDropdownToggle>
-        {{ 'nav.login' | translate }}
-      </button>
-      <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+         role="menuitem"
+         aria-haspopup="menu"
+         aria-controls="loginDropdownMenu"
+         [attr.aria-expanded]="loginDrop.isOpen()"
+         ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
+      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+           role="menu"
            [attr.aria-label]="'nav.login' | translate">
         <ds-themed-log-in
           [isStandalonePage]="false"></ds-themed-log-in>
       </div>
     </div>
-  </li>
-  <li *ngIf="!(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a routerLink="/login" routerLinkActive="active" class="loginLink px-0.5">
-      {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
-    </a>
-  </li>
-  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
+  </div>
+  <div *ngIf="(isAuthenticated | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <button role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="btn btn-link dropdownLogout px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
-        <i class="fas fa-user-circle fa-lg fa-fw"></i>
-      </button>
-      <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
+      <a href="javascript:void(0);"
+         role="menuitem"
+         [attr.aria-label]="'nav.user-profile-menu-and-logout' | translate"
+         aria-controls="user-menu-dropdown"
+         (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate"
+         class="dropdownLogout px-1"
+         [attr.data-test]="'user-menu' | dsBrowserOnly"
+         ngbDropdownToggle>
+        <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
+      <ul id="logoutDropdownMenu" class="p-3" ngbDropdownMenu role="presentation">
         <ds-themed-user-menu></ds-themed-user-menu>
-      </div>
+      </ul>
     </div>
-  </li>
-  <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
+  </div>
+</div>
+
+
+<ng-template #mobileButtons>
+  <div data-test="auth-nav">
+    <a *ngIf="!(isAuthenticated | async)" routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button">
+      {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
+    </a>
+    <a *ngIf="(isAuthenticated | async)" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
       <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
       <span class="sr-only">(current)</span>
     </a>
-  </li>
-</ul>
-
+  </div>
+</ng-template>
 
+<!-- Do not use ul/li in this menu as it breaks e2e accessibility tests -->
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
index ea64f7e74b9..41bd9bbabb4 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -1,9 +1,9 @@
-.loginDropdownMenu, .logoutDropdownMenu {
+#loginDropdownMenu, #logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }
 
-.loginDropdownMenu {
+#loginDropdownMenu {
   min-height: 260px;
 }
 
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
index 0b9ea6ef4b4..e3d3ef7fc5d 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
@@ -16,6 +16,7 @@ import { AuthTokenInfo } from '../../core/auth/models/auth-token-info.model';
 import { AuthService } from '../../core/auth/auth.service';
 import { of } from 'rxjs';
 import { BrowserOnlyMockPipe } from '../testing/browser-only-mock.pipe';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 describe('AuthNavMenuComponent', () => {
 
@@ -75,7 +76,8 @@ describe('AuthNavMenuComponent', () => {
               strictActionImmutability: false
             }
           }),
-          TranslateModule.forRoot()
+          TranslateModule.forRoot(),
+          NgbDropdownModule
         ],
         declarations: [
           AuthNavMenuComponent,
@@ -83,7 +85,7 @@ describe('AuthNavMenuComponent', () => {
         ],
         providers: [
           { provide: HostWindowService, useValue: window },
-          { provide: AuthService, useValue: authService }
+          { provide: AuthService, useValue: authService },
         ],
         schemas: [
           CUSTOM_ELEMENTS_SCHEMA
@@ -117,10 +119,10 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-        const navMenuItemSelector = 'li';
+        const navMenuItemSelector = '.nav-item';
         deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
       afterEach(() => {
@@ -155,10 +157,10 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-        const navMenuItemSelector = 'li';
+        const navMenuItemSelector = '.nav-item';
         deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
 
@@ -197,10 +199,10 @@ describe('AuthNavMenuComponent', () => {
 
           fixture.detectChanges();
 
-          const navMenuSelector = '.navbar-nav';
+          const navMenuSelector = '[data-test="auth-nav"]';
           deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-          const navMenuItemSelector = 'li';
+          const navMenuItemSelector = '.nav-item';
           deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
         }));
 
@@ -210,7 +212,7 @@ describe('AuthNavMenuComponent', () => {
         });
 
         it('should render login dropdown menu', () => {
-          const loginDropdownMenu = deNavMenuItem.query(By.css('div.loginDropdownMenu'));
+          const loginDropdownMenu = deNavMenuItem.query(By.css('div#loginDropdownMenu'));
           expect(loginDropdownMenu.nativeElement).toBeDefined();
         });
       });
@@ -236,10 +238,10 @@ describe('AuthNavMenuComponent', () => {
 
           fixture.detectChanges();
 
-          const navMenuSelector = '.navbar-nav';
+          const navMenuSelector = '[data-test="auth-nav"]';
           deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-          const navMenuItemSelector = 'li';
+          const navMenuItemSelector = '.nav-item';
           deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
         }));
 
@@ -309,11 +311,8 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
-
-        const navMenuItemSelector = 'li';
-        deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
 
       afterEach(() => {
@@ -322,7 +321,7 @@ describe('AuthNavMenuComponent', () => {
       });
 
       it('should render login link', () => {
-        const loginDropdownMenu = deNavMenuItem.query(By.css('.loginLink'));
+        const loginDropdownMenu = deNavMenu.query(By.css('.loginLink'));
         expect(loginDropdownMenu.nativeElement).toBeDefined();
       });
     });
@@ -345,11 +344,8 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
-
-        const navMenuItemSelector = 'li';
-        deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
 
       afterEach(() => {
@@ -358,7 +354,7 @@ describe('AuthNavMenuComponent', () => {
       });
 
       it('should render logout link', inject([Store], (store: Store<AppState>) => {
-        const logoutDropdownMenu = deNavMenuItem.query(By.css('a.logoutLink'));
+        const logoutDropdownMenu = deNavMenu.query(By.css('a.logoutLink'));
         expect(logoutDropdownMenu.nativeElement).toBeDefined();
       }));
     });
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts b/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
index 37a45e1b202..3174462fc3d 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
@@ -32,7 +32,7 @@ export class AuthNavMenuComponent implements OnInit {
    */
   public loading: Observable<boolean>;
 
-  public isXsOrSm$: Observable<boolean>;
+  public isMobile$: Observable<boolean>;
 
   public showAuth = observableOf(false);
 
@@ -44,7 +44,7 @@ export class AuthNavMenuComponent implements OnInit {
               private windowService: HostWindowService,
               private authService: AuthService
   ) {
-    this.isXsOrSm$ = this.windowService.isXsOrSm();
+    this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit(): void {
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index 85b9d8aece2..637b483db09 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -1,15 +1,32 @@
 <ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
-<div *ngIf="!(loading$ | async)">
-  <span class="dropdown-item-text" [class.pl-0]="inExpandableNavbar">
+<ul *ngIf="!(loading$ | async)" class="user-menu" role="menu"
+    [ngClass]="{ 'pb-2 mb-2 border-bottom' : inExpandableNavbar }"
+    [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" id="user-menu-dropdown">
+  <li class="ds-menu-item-wrapper username-email-wrapper" role="presentation">
     {{dsoNameService.getName(user$ | async)}}<br>
     <span class="text-muted">{{(user$ | async)?.email}}</span>
-  </span>
-  <a [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[profileRoute]" routerLinkActive="active">{{'nav.profile' | translate}}</a>
-  <a [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[mydspaceRoute]" routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
-  <a [ngClass]="inExpandableNavbar ? 'nav-item nav-link' : 'dropdown-item'" [routerLink]="[subscriptionsRoute]" routerLinkActive="active">{{'nav.subscriptions' | translate}}</a>
-
-  <div class="dropdown-divider"></div>
-  <ds-log-out *ngIf="!inExpandableNavbar" data-test="log-out-component"></ds-log-out>
-</div>
+  </li>
+  <li class="ds-menu-item-wrapper" role="presentation">
+    <a class="ds-menu-item" role="menuitem"
+       [routerLink]="[profileRoute]"
+       routerLinkActive="active">{{'nav.profile' | translate}}</a>
+  </li>
+  <li class="ds-menu-item-wrapper" role="presentation">
+    <a class="ds-menu-item" role="menuitem"
+       [routerLink]="[mydspaceRoute]"
+       routerLinkActive="active">{{'nav.mydspace' | translate}}</a>
+  </li>
+  <li class="ds-menu-item-wrapper" role="presentation">
+    <a class="ds-menu-item" role="menuitem"
+       [routerLink]="[subscriptionsRoute]"
+       routerLinkActive="active">{{'nav.subscriptions' | translate}}</a>
+  </li>
+  <ng-container *ngIf="!inExpandableNavbar">
+    <li class="dropdown-divider" aria-hidden="true"></li>
+    <li class="ds-menu-item-wrapper" role="presentation">
+      <ds-log-out data-test="log-out-component"></ds-log-out>
+    </li>
+  </ng-container>
+</ul>
 
 
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
index e69de29bb2d..1f33a321f00 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
@@ -0,0 +1,12 @@
+:host {
+  ul.user-menu  {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ds-menu-item {
+    display: inline-block;
+    padding: 0.25rem 0;
+  }
+}
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
index 5576b942b30..04270f97cd9 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.spec.ts
@@ -140,7 +140,7 @@ describe('UserMenuComponent', () => {
 
       fixture.detectChanges();
 
-      deUserMenu = fixture.debugElement.query(By.css('div'));
+      deUserMenu = fixture.debugElement.query(By.css('ul#user-menu-dropdown'));
     }));
 
     afterEach(() => {
@@ -164,7 +164,7 @@ describe('UserMenuComponent', () => {
     it('should display user name and email', () => {
       const username = 'User Test';
       const email = 'test@test.com';
-      const span = deUserMenu.query(By.css('.dropdown-item-text'));
+      const span = deUserMenu.query(By.css('.username-email-wrapper'));
       expect(span).toBeDefined();
       expect(span.nativeElement.innerHTML).toContain(username);
       expect(span.nativeElement.innerHTML).toContain(email);
diff --git a/src/app/shared/lang-switch/lang-switch.component.html b/src/app/shared/lang-switch/lang-switch.component.html
index 73a5041f7b2..9be622099bb 100644
--- a/src/app/shared/lang-switch/lang-switch.component.html
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -1,13 +1,16 @@
 <div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right">
-  <a href="javascript:void(0);" role="button"
+  <a href="javascript:void(0);" role="menuitem"
      [attr.aria-label]="'nav.language' |translate"
+     aria-controls="language-menu-list"
+     aria-haspopup="menu"
      [title]="'nav.language' | translate"
      (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
      tabindex="0">
     <i class="fas fa-globe-asia fa-lg fa-fw"></i>
   </a>
-  <ul ngbDropdownMenu class="dropdown-menu" [attr.aria-label]="'nav.language' |translate">
+  <ul ngbDropdownMenu class="dropdown-menu" [attr.aria-label]="'nav.language' |translate" id="language-menu-list" role="menu">
     <li class="dropdown-item" tabindex="0" #langSelect *ngFor="let lang of translate.getLangs()"
+        role="menuitem"
             (keyup.enter)="useLang(lang)"
             (click)="useLang(lang)"
             [class.active]="lang === translate.currentLang">
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.html b/src/app/shared/log-in/methods/password/log-in-password.component.html
index 60477d141de..b1f238f815b 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.html
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.html
@@ -30,10 +30,10 @@
 </form>
 
 <div class="mt-2">
-  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]" [attr.data-test]="'register' | dsBrowserOnly">
+  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]" [attr.data-test]="'register' | dsBrowserOnly" role="menuitem">
     {{ 'login.form.new-user' | translate }}
   </a>
-  <a class="dropdown-item" [routerLink]="[getForgotRoute()]" [attr.data-test]="'forgot' | dsBrowserOnly">
+  <a class="dropdown-item" [routerLink]="[getForgotRoute()]" [attr.data-test]="'forgot' | dsBrowserOnly" role="menuitem">
     {{ 'login.form.forgot-password' | translate }}
   </a>
 </div>
diff --git a/src/app/shared/menu/menu-item/external-link-menu-item.component.html b/src/app/shared/menu/menu-item/external-link-menu-item.component.html
index dc602cc5721..c95c63fdf5a 100644
--- a/src/app/shared/menu/menu-item/external-link-menu-item.component.html
+++ b/src/app/shared/menu/menu-item/external-link-menu-item.component.html
@@ -1,4 +1,5 @@
-<a class="nav-item nav-link"
+<a class="ds-menu-item" role="menuitem"
+   routerLinkActive="active"
    [ngClass]="{'disabled': !hasLink }"
    [attr.aria-disabled]="!hasLink"
    [href]="href"
diff --git a/src/app/shared/menu/menu-item/external-link-menu-item.component.ts b/src/app/shared/menu/menu-item/external-link-menu-item.component.ts
index 5fbbe608dba..4567876fad2 100644
--- a/src/app/shared/menu/menu-item/external-link-menu-item.component.ts
+++ b/src/app/shared/menu/menu-item/external-link-menu-item.component.ts
@@ -9,7 +9,8 @@ import { MenuItemType } from '../menu-item-type.model';
  */
 @Component({
   selector: 'ds-external-link-menu-item',
-  templateUrl: './external-link-menu-item.component.html'
+  styleUrls: ['./menu-item.component.scss'],
+  templateUrl: './external-link-menu-item.component.html',
 })
 @rendersMenuItemForType(MenuItemType.EXTERNAL)
 export class ExternalLinkMenuItemComponent implements OnInit {
diff --git a/src/app/shared/menu/menu-item/link-menu-item.component.html b/src/app/shared/menu/menu-item/link-menu-item.component.html
index 91e23ad886a..58a3cec10c5 100644
--- a/src/app/shared/menu/menu-item/link-menu-item.component.html
+++ b/src/app/shared/menu/menu-item/link-menu-item.component.html
@@ -1,8 +1,7 @@
-
-<a class="nav-item nav-link"
+<a class="ds-menu-item" role="menuitem"
    [ngClass]="{ 'disabled': !hasLink || item.disabled }"
    [attr.aria-disabled]="!hasLink || item.disabled"
-   [title]="item.text | translate"
+   [attr.data-test]="'link-menu-item.'+item.text"
    [routerLink]="getRouterLink()"
    [queryParams]="item.queryParams"
    (click)="$event.stopPropagation()"
diff --git a/src/app/shared/menu/menu-item/link-menu-item.component.ts b/src/app/shared/menu/menu-item/link-menu-item.component.ts
index 39f90069877..2cc7e1ae859 100644
--- a/src/app/shared/menu/menu-item/link-menu-item.component.ts
+++ b/src/app/shared/menu/menu-item/link-menu-item.component.ts
@@ -10,7 +10,8 @@ import { Router } from '@angular/router';
  */
 @Component({
   selector: 'ds-link-menu-item',
-  templateUrl: './link-menu-item.component.html'
+  styleUrls: ['./menu-item.component.scss'],
+  templateUrl: './link-menu-item.component.html',
 })
 @rendersMenuItemForType(MenuItemType.LINK)
 export class LinkMenuItemComponent implements OnInit {
diff --git a/src/app/shared/menu/menu-item/menu-item.component.scss b/src/app/shared/menu/menu-item/menu-item.component.scss
new file mode 100644
index 00000000000..ca7546d79ae
--- /dev/null
+++ b/src/app/shared/menu/menu-item/menu-item.component.scss
@@ -0,0 +1,5 @@
+:host {
+  .ds-menu-item {
+    display: inline-block;
+  }
+}
diff --git a/src/app/shared/menu/menu-item/onclick-menu-item.component.html b/src/app/shared/menu/menu-item/onclick-menu-item.component.html
index 5e8aecbd441..4e68b6c5bc3 100644
--- a/src/app/shared/menu/menu-item/onclick-menu-item.component.html
+++ b/src/app/shared/menu/menu-item/onclick-menu-item.component.html
@@ -1,10 +1,10 @@
 <a *ngIf="!item.disabled"
+   class="ds-menu-item" role="menuitem"
+   routerLinkActive="active"
    href="javascript:void(0);"
-   class="nav-item nav-link"
-   role="button"
    [title]="item.text | translate"
    (click)="activate($event)"
    (keyup.space)="activate($event)"
    (keyup.enter)="activate($event)"
 >{{item.text | translate}}</a>
-<span *ngIf="item.disabled"   class="nav-item nav-link disabled">{{item.text | translate}}</span>
+<span *ngIf="item.disabled" class="nav-item nav-link disabled">{{item.text | translate}}</span>
diff --git a/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts b/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts
index 18ae66b23dc..342fb58455e 100644
--- a/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts
+++ b/src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts
@@ -45,7 +45,7 @@ describe('OnClickMenuItemComponent', () => {
   });
 
   it('should call the function on the item when clicked', () => {
-    debugElement.query(By.css('a.nav-link')).triggerEventHandler('click', new Event(('click')));
+    debugElement.query(By.css('a.ds-menu-item')).triggerEventHandler('click', new Event(('click')));
     expect(item.function).toHaveBeenCalled();
   });
 });
diff --git a/src/app/shared/menu/menu-item/onclick-menu-item.component.ts b/src/app/shared/menu/menu-item/onclick-menu-item.component.ts
index 68e477b1fbc..8bc03717d76 100644
--- a/src/app/shared/menu/menu-item/onclick-menu-item.component.ts
+++ b/src/app/shared/menu/menu-item/onclick-menu-item.component.ts
@@ -8,7 +8,7 @@ import { MenuItemType } from '../menu-item-type.model';
  */
 @Component({
   selector: 'ds-onclick-menu-item',
-  styleUrls: ['./onclick-menu-item.component.scss'],
+  styleUrls: ['./menu-item.component.scss', './onclick-menu-item.component.scss'],
   templateUrl: './onclick-menu-item.component.html'
 })
 @rendersMenuItemForType(MenuItemType.ONCLICK)
diff --git a/src/app/shared/menu/menu-item/text-menu-item.component.html b/src/app/shared/menu/menu-item/text-menu-item.component.html
index 11c44204026..ba3cf99a490 100644
--- a/src/app/shared/menu/menu-item/text-menu-item.component.html
+++ b/src/app/shared/menu/menu-item/text-menu-item.component.html
@@ -1 +1 @@
-<span [class.disabled]="item.disabled">{{item.text | translate}}</span>
+<span class="ds-menu-item" [class.disabled]="item.disabled">{{item.text | translate}}</span>
diff --git a/src/app/shared/menu/menu-item/text-menu-item.component.ts b/src/app/shared/menu/menu-item/text-menu-item.component.ts
index 25549f53a89..badaeff738d 100644
--- a/src/app/shared/menu/menu-item/text-menu-item.component.ts
+++ b/src/app/shared/menu/menu-item/text-menu-item.component.ts
@@ -8,6 +8,7 @@ import { MenuItemType } from '../menu-item-type.model';
  */
 @Component({
   selector: 'ds-text-menu-item',
+  styleUrls: ['./menu-item.component.scss'],
   templateUrl: './text-menu-item.component.html',
 })
 @rendersMenuItemForType(MenuItemType.TEXT)
diff --git a/src/app/shared/testing/host-window-service.stub.ts b/src/app/shared/testing/host-window-service.stub.ts
index b64d6fbffcb..a0b5d29e9b7 100644
--- a/src/app/shared/testing/host-window-service.stub.ts
+++ b/src/app/shared/testing/host-window-service.stub.ts
@@ -1,4 +1,5 @@
 import {of as observableOf,  Observable } from 'rxjs';
+import { WidthCategory } from '../host-window.service';
 
 // declare a stub service
 export class HostWindowServiceStub {
@@ -24,4 +25,8 @@ export class HostWindowServiceStub {
   isMobile(): Observable<boolean> {
     return this.isXs();
   }
+
+  isUpTo(maxWidthCat: WidthCategory): Observable<boolean> {
+    return this.isXs();
+  }
 }
diff --git a/src/app/shared/testing/menu-service.stub.ts b/src/app/shared/testing/menu-service.stub.ts
index 71ee7771573..50f01f928f9 100644
--- a/src/app/shared/testing/menu-service.stub.ts
+++ b/src/app/shared/testing/menu-service.stub.ts
@@ -53,6 +53,9 @@ export class MenuServiceStub {
   deactivateSection(): void { /***/
   }
 
+  toggleSection(): void { /***/
+  }
+
   addSection(menuID: MenuID, section: MenuSection): void { /***/
   }
 
diff --git a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
index 5f741091f1e..d97d3d5d702 100644
--- a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
+++ b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="(systemWideAlert$ |async)?.active">
-    <div class="rounded-0 alert alert-warning w100">
+    <div class="rounded-0 alert alert-warning w100 m-0 px-1">
         <div class="container">
             <span class="font-weight-bold">
         <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 643a3ce0d18..667ca8e88c9 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -2814,6 +2814,8 @@
 
   "logout.title": "Logout",
 
+  "menu.header.nav.description": "Admin navigation bar",
+
   "menu.header.admin": "Management",
 
   "menu.header.image.logo": "Repository logo",
@@ -3060,6 +3062,8 @@
 
   "mydspace.view-btn": "View",
 
+  "nav.expandable-navbar-section-suffix": "(submenu)",
+
   "nav.browse.header": "All of DSpace",
 
   "nav.community-browse.header": "By Community",
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 69b288905a1..64cc126044c 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -1,9 +1,6 @@
 /** Help Variables **/
 $fa-fixed-width: 1.25rem !default;
 $icon-padding: 1rem !default;
-$collapsed-sidebar-width: calculatePx($fa-fixed-width + (2 * $icon-padding)) !default;
-$sidebar-items-width: 250px !default;
-$total-sidebar-width: $collapsed-sidebar-width + $sidebar-items-width !default;
 
 /* Fonts */
 // Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index faa41e7d925..99bf3346510 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -40,13 +40,24 @@
 
   $admin-sidebar-bg: darken(#2B4E72, 17%);
   $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
+  $admin-sidebar-fixed-element-width: 55px !default;
+  $admin-sidebar-collapsible-element-width: 250px !default;
+  $admin-sidebar-total-width: $admin-sidebar-fixed-element-width + $admin-sidebar-collapsible-element-width !default;
+
   --ds-admin-sidebar-bg: #{$admin-sidebar-bg};
   --ds-admin-sidebar-active-bg: #{$admin-sidebar-active-bg};
   --ds-admin-sidebar-header-bg: #{darken($admin-sidebar-bg, 7%)};
+  --ds-admin-sidebar-fixed-element-width: #{$admin-sidebar-fixed-element-width};
+  --ds-admin-sidebar-fixed-element-z-index: 10;
+  --ds-admin-sidebar-collapsible-element-width: #{$admin-sidebar-collapsible-element-width};
+  --ds-admin-sidebar-total-width: #{$admin-sidebar-total-width};
+  --ds-admin-sidebar-link-color: #{$navbar-dark-color};
+  --ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
 
   --ds-dark-scrollbar-bg: #{$admin-sidebar-active-bg};
   --ds-dark-scrollbar-alt-bg: #{lighten($admin-sidebar-active-bg, 2%)};
   --ds-dark-scrollbar-fg: #47495d;
+  --ds-dark-scrollbar-width: 8px;
 
   --ds-submission-sections-margin-bottom: .5rem;
 
@@ -69,9 +80,6 @@
 
   --ds-fa-fixed-width: #{$fa-fixed-width};
   --ds-icon-padding: #{$icon-padding};
-  --ds-collapsed-sidebar-width: #{$collapsed-sidebar-width};
-  --ds-sidebar-items-width: #{$sidebar-items-width};
-  --ds-total-sidebar-width: #{$total-sidebar-width};
 
   --ds-top-footer-bg: #{$gray-200};
   --ds-footer-bg: #{theme-color('primary')};
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index b6b2d143d42..1aa0324cd4d 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -33,11 +33,6 @@ body {
     margin: 0;
 }
 
-ds-admin-sidebar {
-    position: fixed;
-    z-index: var(--ds-sidebar-z-index);
-}
-
 .sticky-top {
     z-index: 0;
 }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index ae9e6082f51..eb39b8c7866 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -14,7 +14,7 @@
 
 @mixin dark-scrollbar() {
     &::-webkit-scrollbar {
-        width: 8px;
+        width: var(--ds-dark-scrollbar-width);
         height: 3px;
     }
     &::-webkit-scrollbar-button {
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
index 8c10efcb42e..5f51689df8c 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.html
@@ -1,3 +1,9 @@
-<div [class.open]="!(isNavBarCollapsed | async)" id="header-navbar-wrapper">
+<div id="header-navbar-wrapper"><!-- [class.open]="!(isNavBarCollapsed$ | async)" -->
   <ds-themed-header></ds-themed-header>
+  <!-- Collapsible navbar (mobile only) -->
+  <div *ngIf="(isMobile$ | async)" id="mobile-navbar-wrapper" [@slideMobileNav]="(isNavBarCollapsed$ | async) ? 'collapsed' : 'expanded'">
+    <nav class="px-3" id="collapsible-mobile-navbar" [attr.aria-hidden]="(isNavBarCollapsed$ | async)" [attr.aria-label]="'nav.main.description' | translate">
+      <ds-themed-navbar></ds-themed-navbar>
+    </nav>
+  </div>
 </div>
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index 1daf4ebdbc3..5b3ac00077c 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,7 +1,91 @@
 :host {
-  // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
-  position: relative;
+  --ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color);
+  --ds-mobile-navbar-border-top-style: solid var(--ds-mobile-navbar-border-top-height) var(--ds-mobile-navbar-border-top-color);
+  --ds-collapsible-navbar-height: calc(100vh - var(--ds-header-height));
+
   div#header-navbar-wrapper {
-    border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
+    // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
+    position: relative; // required by the mobile collapsible navbar
+    border-bottom: var(--ds-header-navbar-border-bottom-style); // gets covered by mobile navbar wrapper, when open
+
+    div#mobile-navbar-wrapper {
+      width: 100%;
+      background-color: var(--ds-expandable-navbar-bg);
+      position: absolute;
+      z-index: var(--ds-nav-z-index);
+      overflow: hidden;
+
+      nav#collapsible-mobile-navbar {
+        // Following parameters are changed by slideMobileNav animation
+        min-height: var(--ds-collapsible-navbar-height);
+        height: auto;
+        border-bottom: var(--ds-header-navbar-border-bottom-style);
+      }
+    }
+  }
+
+  /* MENU ITEMS */
+
+  ::ng-deep {
+    .ds-menu-item, .ds-menu-toggler-wrapper {
+      white-space: nowrap;
+      text-decoration: none;
+    }
+
+    nav#desktop-navbar ::ng-deep {
+
+      // 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 {
+        padding: 0.5rem;
+      }
+      .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
+      .dropdown-menu {
+        .ds-menu-item {
+        }
+      }
+
+    }
+
+    nav#collapsible-mobile-navbar {
+
+      border-top: var(--ds-mobile-navbar-border-top-style);
+      padding-top: var(--ds-mobile-navbar-padding-top);
+
+      ::ng-deep {
+
+        // mobile menu
+        .ds-menu-item {
+          padding: 0.25rem 0;
+        }
+
+        .ds-menu-item, .ds-menu-toggler-wrapper {
+          color: var(--ds-expandable-navbar-link-color) !important;
+
+          &:hover, &:focus {
+            color: var(--ds-expandable-navbar-link-color-hover) !important;
+          }
+        }
+
+        // mobile submenu
+        .dropdown-menu {
+          .ds-menu-item {
+          }
+        }
+
+      }
+    }
   }
 }
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index 36e23e174af..ef7d38028ae 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+import { slideMobileNav } from '../../../../app/shared/animations/slide';
 
 /**
  * This component represents a wrapper for the horizontal navbar and the header
@@ -8,6 +9,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
   selector: 'ds-header-navbar-wrapper',
   styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
+  animations: [slideMobileNav],
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
 }
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 205abfd463a..656a076e37f 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -1,25 +1,34 @@
-<header class="header">
-  <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
-    <div class="d-flex flex-grow-1">
-      <a class="navbar-brand m-2" routerLink="/home">
-        <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
+<header id="main-site-header">
+  <div class="container h-100 d-flex flex-row flex-nowrap justify-content-between gapx-3">
+    <!-- Logo and navbar wrapper -->
+    <div id="header-left"
+         [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
+         [attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
+         class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
+      <a class="d-block" routerLink="/home" [attr.aria-label]="'home.title' | translate">
+        <img id="header-logo" src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
+      <nav *ngIf="!(isMobile$ | async)" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">
+        <ds-themed-navbar></ds-themed-navbar>
+      </nav>
     </div>
-    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">
+    <!-- Search bar and other menus -->
+    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1">
       <ds-themed-search-navbar></ds-themed-search-navbar>
-      <ds-themed-lang-switch></ds-themed-lang-switch>
-      <ds-context-help-toggle></ds-context-help-toggle>
-      <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
-      <ds-impersonate-navbar></ds-impersonate-navbar>
-      <div class="pl-2">
-        <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
-                aria-controls="collapsingNav"
-                aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
-          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+      <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
+        <ds-themed-lang-switch></ds-themed-lang-switch>
+        <ds-context-help-toggle></ds-context-help-toggle>
+        <ds-impersonate-navbar></ds-impersonate-navbar>
+        <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
+      </div>
+
+      <div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
+        <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
+                [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="!(isNavBarCollapsed$ | async)">
+          <span class="fas fa-bars fa-fw fa-xl" aria-hidden="true"></span>
         </button>
       </div>
-    </div>
-  </nav>
-  <ds-themed-navbar></ds-themed-navbar>
 
+    </div>
+  </div>
 </header>
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index 2fc857826f9..2e1064b75c8 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -1,26 +1,19 @@
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
-  nav.navbar {
-    display: none;
-  }
-  .header {
+:host {
+  #main-site-header {
+    height: var(--ds-header-height);
     background-color: var(--ds-header-bg);
   }
-}
 
-.navbar-brand img {
-  @media screen and (max-width: map-get($grid-breakpoints, md)) {
-    height: var(--ds-header-logo-height-xs);
+  img#header-logo {
+    height: 40px;
   }
-}
-.navbar-toggler .navbar-toggler-icon {
-  background-image: none !important;
-  line-height: 1.5;
-}
 
-.navbar-toggler {
-  color: var(--ds-header-icon-color);
+  button#navbar-toggler {
+    color: var(--ds-header-icon-color);
 
-  &:hover, &:focus {
-    color: var(--ds-header-icon-color-hover);
+    &:hover, &:focus {
+      color: var(--ds-header-icon-color-hover);
+    }
   }
+
 }
diff --git a/src/themes/dspace/app/header/header.component.ts b/src/themes/dspace/app/header/header.component.ts
index 6da89b47d57..98768d8b264 100644
--- a/src/themes/dspace/app/header/header.component.ts
+++ b/src/themes/dspace/app/header/header.component.ts
@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+import { Observable } from 'rxjs';
 
 /**
  * Represents the header with the logo and simple navigation
@@ -9,5 +10,11 @@ import { HeaderComponent as BaseComponent } from '../../../../app/header/header.
   styleUrls: ['header.component.scss'],
   templateUrl: 'header.component.html',
 })
-export class HeaderComponent extends BaseComponent {
+export class HeaderComponent extends BaseComponent implements OnInit {
+  public isNavBarCollapsed$: Observable<boolean>;
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.isNavBarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
+  }
 }
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 9f7e977961e..ac4424c6380 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -1,26 +1,9 @@
-<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-  class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
-  <div class="navbar-inner-container w-100 h-100" [class.container]="!(isXsOrSm$ | async)">
-    <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate" />
-    </a>
-
-    <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
-        <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
-            <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
-        </li>
-        <li *ngFor="let section of (sections | async)">
-          <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
-        </li>
-      </ul>
-    </div>
-    <div class="navbar-buttons d-flex align-items-center gapx-1">
-      <ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
-      <ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
-      <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
-      <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
-      <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
-    </div>
-  </div>
-</nav>
+<ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
+  <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+</ng-container>
+<ul class="navbar-nav h-100 align-items-md-stretch 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>
+</ul>
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index f1f17d9f768..32c65c8c978 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -1,65 +1,3 @@
-nav.navbar {
-  align-items: baseline;
+:host {
 
-  .navbar-inner-container {
-    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
-  }
-}
-
-.navbar-nav {
-  background-color: var(--ds-navbar-bg);
-}
-
-/** Mobile menu styling **/
-@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
-  .navbar {
-    width: 100vw;
-    background-color: var(--bs-white);
-    position: absolute;
-    overflow: hidden;
-    height: 0;
-    z-index: var(--ds-nav-z-index);
-    &.open {
-      height: 100vh; //doesn't matter because wrapper is sticky
-      border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
-    }
-  }
-}
-
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
-  .reset-padding-md {
-    margin-left: calc(var(--bs-spacer) / -2);
-    margin-right: calc(var(--bs-spacer) / -2);
-  }
-}
-
-/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
-.navbar-expand-md.navbar-container {
-  @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
-    > .navbar-inner-container {
-      padding: 0 var(--bs-spacer);
-      a.navbar-brand {
-        display: none;
-      }
-      .navbar-collapsed {
-        display: none;
-      }
-    }
-    padding: 0;
-  }
-  height: 80px;
-}
-
-a.navbar-brand img {
-  max-height: var(--ds-header-logo-height);
-}
-
-.navbar-nav ::ng-deep {
-  a.nav-link, .btn.nav-link {
-    color: var(--ds-navbar-link-color);
-
-    &:hover, &:focus {
-      color: var(--ds-navbar-link-color-hover);
-    }
-  }
 }
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index 516eff9f7e9..6315acc3fa7 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -1,11 +1,29 @@
 // Override or add CSS variables for your theme here
 
 :root {
-  --ds-header-logo-height: 40px;
+
+  @include media-breakpoint-up(md) {
+    --ds-header-logo-height: 40px;
+    --ds-header-height: 80px;
+  }
+  @include media-breakpoint-down(sm) {
+    --ds-header-logo-height: 50px;
+    --ds-header-height: 90px;
+  }
+
   --ds-banner-text-background: rgba(0, 0, 0, 0.45);
   --ds-banner-background-gradient-width: 300px;
+
   --ds-home-news-link-color: #{$green};
   --ds-home-news-link-hover-color: #{darken($green, 15%)};
+
   --ds-header-navbar-border-bottom-color: #{$green};
+  --ds-header-navbar-border-bottom-height: 5px;
+
+  /* set the next two properties as `--ds-header-navbar-border-bottom-*`
+  in order to keep the bottom border of the header when navbar is expanded */
+  --ds-mobile-navbar-border-top-color: #{$white};
+  --ds-mobile-navbar-border-top-height: 0;
+  --ds-mobile-navbar-padding-top: 0;
 }
 

From b8ec74a04624e1c351235ffa2f40bfbc8c2fe55c Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Wed, 13 Dec 2023 22:49:16 +0100
Subject: [PATCH 05/17] [DURACOM-195] [DURACOM-210] Reorder SCSS and CSS theme
 variables

---
 src/styles/_bootstrap_variables.scss          | 128 +++++++++++-------
 src/styles/_bootstrap_variables_mapping.scss  |  12 +-
 src/styles/_custom_variables.scss             |  61 ++++-----
 .../styles/_theme_css_variable_overrides.scss |   5 -
 .../_theme_sass_variable_overrides.scss       | 100 ++++++++++----
 5 files changed, 187 insertions(+), 119 deletions(-)

diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 64cc126044c..e3b8fcd6dd1 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -1,13 +1,19 @@
-/** Help Variables **/
-$fa-fixed-width: 1.25rem !default;
-$icon-padding: 1rem !default;
+// DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass
+// variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap
+// still uses Sass variables internally. So if you want to override Bootstrap (or other sass
+// variables) you can do so here. Their CSS counterparts will include the changes you make here.
 
-/* Fonts */
-// Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path
-// See https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241
-$fa-font-path: "^assets/fonts" !default;
-/* Images */
-$image-path: "../assets/images" !default;
+// When this file is going to be compiled, internal Bootstrap variables won't have been declared yet,
+// therefore if you want to use any Bootstrap variable you also need to declare it here.
+
+// If you want to change the 'dspace' or the 'custom' theme you should not edit this file, and you should edit
+// _theme_sass_variable_overrides.scss in the theme folder.
+
+// All SASS variables that are declared must have the '!default' flag, otherwise it won't be possible
+// to override them in custom themes.
+
+
+/*** FONT FAMILIES AND FONT SIZES ***/
 
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
 $h1-font-size: $font-size-base * 2.125 !default;
@@ -17,49 +23,79 @@ $h4-font-size: $font-size-base * 1.25 !default;
 $h5-font-size: $font-size-base * 1.125 !default;
 $h6-font-size: $font-size-base !default;
 
+
+/*** BOOTSTRAP OPTIONS ***/
+
 // enable-responsive-font-sizes allows text to scale more naturally across device and viewport sizes
-$enable-responsive-font-sizes: true;
-
-/** Bootstrap Variables **/
-/* Colors */
-$gray-700: #495057 !default;  // Bootstrap $gray-700
-$gray-100: #f8f9fa !default;  //           $gray-100
-
-/* Reassign color vars to semantic color scheme */
-$blue:   #2B4E72 !default;
-$green:  #94BA65 !default;
-$cyan:   #006666 !default;
-$yellow: #ec9433 !default;
-$red:    #CF4444 !default;
-$dark:   darken($blue, 17%) !default;
-
-
-
-$theme-colors: (
-        primary: $blue,
-        secondary: $gray-700,
-        success: $green,
-        info: $cyan,
-        warning: $yellow,
-        danger: $red,
-        light: $gray-100,
-        dark: $dark
-) !default;
-/* Fonts */
-$link-color: map-get($theme-colors, info) !default;
+$enable-responsive-font-sizes: true !default;
+$enable-shadows: true !default;
+
+
+/*** SEMANTIC COLOR SCHEME ***/
+
+// Override semantic colors
+$primary:   #2b4e72 !default;               // Blue gray
+$secondary: #495057 !default;               // As Bootstrap $gray-700
+$success:   #94ba65 !default;               // Lime
+$info:      #006666 !default;               // Blue green
+$warning:   #ec9433 !default;               // Orange
+$danger:    #cf4444 !default;               // Red
+$light:     #f8f9fa !default;               // As Bootstrap $gray-100
+$dark:      darken(#2b4e72, 17%) !default;  // Blue gray (darker)
+
+
+/*** OTHER BOOTSTRAP VARIABLES ***/
+
+$link-color: #006666 !default;
+$link-hover-color: darken($link-color, 15%) !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 165 !default;
 
 $navbar-dark-color: rgba(white, .5) !default;
 $navbar-light-color: rgba(black, .5) !default;
 $navbar-dark-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox='0+0+30+30'+xmlns='http://www.w3.org/2000/svg'><path+stroke='#{$navbar-dark-color}'+stroke-width='2'+stroke-linecap='round'+stroke-miterlimit='10'+d='M4+7h22M4+15h22M4+23h22'/></svg>") !default;
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox='0+0+30+30'+xmlns='http://www.w3.org/2000/svg'><path+stroke='#{$navbar-light-color}'+stroke-width='2'+stroke-linecap='round'+stroke-miterlimit='10'+d='M4+7h22M4+15h22M4+23h22'/></svg>") !default;
 
-$enable-shadows: true !default;
 
-$yiq-contrasted-threshold:  165 !default;
+/*** CUSTOM DSPACE VARIABLES ***/
+
+$ds-home-news-link-color: $link-color !default;
+$ds-home-news-link-hover-color: darken($ds-home-news-link-color, 15%) !default;
+$ds-breadcrumb-link-color: $link-color !default;
+
+$ds-header-navbar-border-top-color: #fff !default;
+$ds-header-navbar-border-bottom-color: #ced4da !default;
+
+$ds-header-bg: #fff !default;
+$ds-header-icon-color: $link-color !default;
+$ds-header-icon-color-hover: $link-hover-color !default;
+
+$ds-navbar-bg: #fff !default;
+$ds-navbar-dropdown-bg: #fff !default;
+$ds-expandable-navbar-bg: #fff !default;
+$ds-navbar-link-color: $link-color !default;
+$ds-navbar-link-color-hover: #{darken($ds-navbar-link-color, 15%)} !default;
+
+$ds-slider-color: $success !default;
 
-$primary-bg: #{lighten(map-get($theme-colors, primary), 30%)} !default;
-$secondary-bg: #{lighten(map-get($theme-colors, secondary), 30%)} !default;
-$success-bg: #{lighten(map-get($theme-colors, success), 30%)} !default;
-$info-bg: #{lighten(map-get($theme-colors, info), 30%)} !default;
-$warning-bg: #{lighten(map-get($theme-colors, warning), 30%)} !default;
-$danger-bg: #{lighten(map-get($theme-colors, danger), 30%)} !default;
+$ds-admin-sidebar-bg: darken(#2b4e72, 17%) !default;
+$ds-admin-sidebar-active-bg: darken($ds-admin-sidebar-bg, 3%) !default;
+$ds-admin-sidebar-fg: #47495d !default;
+$ds-admin-sidebar-fixed-element-width: 55px !default;
+$ds-admin-sidebar-collapsible-element-width: 250px !default;
+$ds-admin-sidebar-total-width: $ds-admin-sidebar-fixed-element-width + $ds-admin-sidebar-collapsible-element-width; // do not change/override
+
+$ds-primary-bg: #{lighten($primary, 30%)} !default;
+$ds-secondary-bg: #{lighten($secondary, 30%)} !default;
+$ds-success-bg: #{lighten($success, 30%)} !default;
+$ds-info-bg: #{lighten($info, 30%)} !default;
+$ds-warning-bg: #{lighten($warning, 30%)} !default;
+$ds-danger-bg: #{lighten($danger, 30%)} !default;
+
+
+/*** MISC ***/
+
+// Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path
+// See https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241
+$fa-font-path: "^assets/fonts" !default;
diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
index 16719f99194..04ed5a7850f 100644
--- a/src/styles/_bootstrap_variables_mapping.scss
+++ b/src/styles/_bootstrap_variables_mapping.scss
@@ -29,17 +29,17 @@
   --bs-teal: #{$teal};
   --bs-cyan: #{$cyan};
   --bs-primary: #{$primary};
-  --bs-primary-bg: #{$primary-bg};
+  --bs-primary-bg: #{$ds-primary-bg};
   --bs-secondary: #{$secondary};
-  --bs-secondary-bg: #{$secondary-bg};
+  --bs-secondary-bg: #{$ds-secondary-bg};
   --bs-success: #{$success};
-  --bs-success-bg: #{$success-bg};
+  --bs-success-bg: #{$ds-success-bg};
   --bs-info: #{$info};
-  --bs-info-bg: #{$info-bg};
+  --bs-info-bg: #{$ds-info-bg};
   --bs-warning: #{$warning};
-  --bs-warning-bg: #{$warning-bg};
+  --bs-warning-bg: #{$ds-warning-bg};
   --bs-danger: #{$danger};
-  --bs-danger-bg: #{$danger-bg};
+  --bs-danger-bg: #{$ds-danger-bg};
   --bs-light: #{$light};
   --bs-dark: #{$dark};
 
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 99bf3346510..596e582cfe9 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -19,17 +19,18 @@
   --ds-footer-z-index: 0;
   --ds-sidebar-z-index: 20;
 
-  --ds-header-bg: #{$white};
-  --ds-header-icon-color: #{$link-color};
-  --ds-header-icon-color-hover: #{$link-hover-color};
-  --ds-navbar-bg: var(--ds-header-bg);
-  --ds-header-navbar-border-top-color: #{$white};
-  --ds-header-navbar-border-bottom-color: #{$gray-400};
-  --ds-navbar-link-color: #{$cyan};
-  --ds-navbar-link-color-hover: #{darken($cyan, 15%)};
-  --ds-expandable-navbar-bg: var(--ds-navbar-bg);
-  --ds-expandable-navbar-link-color: var(--ds-navbar-link-color);
-  --ds-expandable-navbar-link-color-hover: var(--ds-navbar-link-color-hover);
+  --ds-header-bg: #{$ds-header-bg};
+  --ds-header-icon-color: #{$ds-header-icon-color};
+  --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
+  --ds-navbar-bg: #{$ds-navbar-bg};
+  --ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
+  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-navbar-link-color: #{$ds-navbar-link-color};
+  --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+  --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
+  --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
+  --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;
@@ -38,25 +39,19 @@
     --ds-header-logo-height: 50px;
   }
 
-  $admin-sidebar-bg: darken(#2B4E72, 17%);
-  $admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
-  $admin-sidebar-fixed-element-width: 55px !default;
-  $admin-sidebar-collapsible-element-width: 250px !default;
-  $admin-sidebar-total-width: $admin-sidebar-fixed-element-width + $admin-sidebar-collapsible-element-width !default;
-
-  --ds-admin-sidebar-bg: #{$admin-sidebar-bg};
-  --ds-admin-sidebar-active-bg: #{$admin-sidebar-active-bg};
-  --ds-admin-sidebar-header-bg: #{darken($admin-sidebar-bg, 7%)};
-  --ds-admin-sidebar-fixed-element-width: #{$admin-sidebar-fixed-element-width};
+  --ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg};
+  --ds-admin-sidebar-active-bg: #{$ds-admin-sidebar-active-bg};
+  --ds-admin-sidebar-header-bg: #{darken($ds-admin-sidebar-bg, 7%)};
+  --ds-admin-sidebar-fixed-element-width: #{$ds-admin-sidebar-fixed-element-width};
   --ds-admin-sidebar-fixed-element-z-index: 10;
-  --ds-admin-sidebar-collapsible-element-width: #{$admin-sidebar-collapsible-element-width};
-  --ds-admin-sidebar-total-width: #{$admin-sidebar-total-width};
+  --ds-admin-sidebar-collapsible-element-width: #{$ds-admin-sidebar-collapsible-element-width};
+  --ds-admin-sidebar-total-width: #{$ds-admin-sidebar-total-width};
   --ds-admin-sidebar-link-color: #{$navbar-dark-color};
   --ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
 
-  --ds-dark-scrollbar-bg: #{$admin-sidebar-active-bg};
-  --ds-dark-scrollbar-alt-bg: #{lighten($admin-sidebar-active-bg, 2%)};
-  --ds-dark-scrollbar-fg: #47495d;
+  --ds-dark-scrollbar-bg: #{$ds-admin-sidebar-active-bg};
+  --ds-dark-scrollbar-alt-bg: #{lighten($ds-admin-sidebar-active-bg, 2%)};
+  --ds-dark-scrollbar-fg: #{$ds-admin-sidebar-fg};
   --ds-dark-scrollbar-width: 8px;
 
   --ds-submission-sections-margin-bottom: .5rem;
@@ -78,9 +73,6 @@
   --ds-notification-bg-info: #{darken(adjust-hue($info, -10), 10%)};
   --ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)};
 
-  --ds-fa-fixed-width: #{$fa-fixed-width};
-  --ds-icon-padding: #{$icon-padding};
-
   --ds-top-footer-bg: #{$gray-200};
   --ds-footer-bg: #{theme-color('primary')};
   --ds-footer-border: 1px solid var(--bs-gray-400);
@@ -88,17 +80,16 @@
   --ds-footer-padding-bottom: 0;
   --ds-footer-logo-height: 50px;
 
-  $home-news-link-color: $cyan;
-  --ds-home-news-link-color: #{$home-news-link-color};
-  --ds-home-news-link-hover-color: #{darken($home-news-link-color, 15%)};
+  --ds-home-news-link-color: #{$ds-home-news-link-color};
+  --ds-home-news-link-hover-color: #{darken($ds-home-news-link-color, 15%)};
   --ds-home-news-background-color: #{$gray-200};
 
   --ds-breadcrumb-bg: #{$gray-200} !important;
-  --ds-breadcrumb-link-color: #{$cyan};
-  --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
+  --ds-breadcrumb-link-color: #{$ds-breadcrumb-link-color};
+  --ds-breadcrumb-link-active-color: #{darken($ds-breadcrumb-link-color, 30%)};
   --ds-breadcrumb-max-length: 200px;
 
-  --ds-slider-color: #{$green};
+  --ds-slider-color: #{$ds-slider-color};
   --ds-slider-handle-width: 18px;
 
   --ds-search-form-scope-max-width: 150px;
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index 6315acc3fa7..b8e0b3e2e94 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -14,10 +14,6 @@
   --ds-banner-text-background: rgba(0, 0, 0, 0.45);
   --ds-banner-background-gradient-width: 300px;
 
-  --ds-home-news-link-color: #{$green};
-  --ds-home-news-link-hover-color: #{darken($green, 15%)};
-
-  --ds-header-navbar-border-bottom-color: #{$green};
   --ds-header-navbar-border-bottom-height: 5px;
 
   /* set the next two properties as `--ds-header-navbar-border-bottom-*`
@@ -26,4 +22,3 @@
   --ds-mobile-navbar-border-top-height: 0;
   --ds-mobile-navbar-padding-top: 0;
 }
-
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index b5799c97496..bf714ccdced 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -1,41 +1,87 @@
 // DSpace works with CSS variables for its own components, and has a mapping of all bootstrap Sass
 // variables to CSS equivalents (see src/styles/_bootstrap_variables_mapping.scss). However Bootstrap
-// still uses Sass variables internally. So if you want to override bootstrap (or other sass
-// variables) you can do so here. Their CSS counterparts will include the changes you make here
+// still uses Sass variables internally. So if you want to override Bootstrap (or other sass
+// variables) you can do so here. Their CSS counterparts will include the changes you make here.
+
+// When this file is going to be compiled, internal Bootstrap variables won't have been declared yet,
+// therefore if you want to use any Bootstrap variable you also need to declare it here.
+
+// All SASS variables from the base theme are also included here. Do not use the '!default' flag
+// here if you want to override them.
+
+
+/*** FONT FAMILIES ***/
 
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap');
 
 $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-$navbar-dark-color: #FFFFFF;
 
-/* Reassign color vars to semantic color scheme */
-$blue: #2b4e72 !default;
-$green: #92C642 !default;
-$cyan: #207698 !default;
-$yellow: #ec9433 !default;
-$red: #CF4444 !default;
-$dark: #43515f !default;
+/*** SEMANTIC COLOR SCHEME ***/
 
-$gray-800: #343a40 !default;
-$gray-700: #495057 !default;
-$gray-400: #ced4da !default;
-$gray-100: #f8f9fa !default;
+// Gray scale (uncomment the variables that you want to override or that you need to use in this file)
+//$white:    #fff;
+//$gray-100: #f8f9fa;
+//$gray-200: #e9ecef;
+//$gray-300: #dee2e6;
+//$gray-400: #ced4da;
+//$gray-500: #adb5bd;
+//$gray-600: #6c757d;
+//$gray-700: #495057;
+//$gray-800: #343a40;
+//$gray-900: #212529;
+//$black:    #000;
 
-$body-color: $gray-800 !default;                    // Bootstrap $gray-800
+// Other colors (uncomment the variables that you want to override or that you need to use in this file)
+//$blue:    #007bff !default;
+//$indigo:  #6610f2 !default;
+//$purple:  #6f42c1 !default;
+//$pink:    #e83e8c !default;
+//$red:     #dc3545 !default;
+//$orange:  #fd7e14 !default;
+//$yellow:  #ffc107 !default;
+//$green:   #28a745 !default;
+//$teal:    #20c997 !default;
+//$cyan:    #17a2b8 !default;
 
-$table-accent-bg: $gray-100 !default;   // Bootstrap $gray-100
-$table-hover-bg: $gray-400 !default;   // Bootstrap $gray-400
+// Override semantic colors here
+$primary:   #43515f;  // Gray
+$secondary: #495057;  // As Bootstrap $gray-700
+$success:   #92c642;  // Lime
+$info:      #207698;  // Light blue
+$warning:   #ec9433;  // Orange
+$danger:    #cf4444;  // Red
+$light:     #f8f9fa;  // As Bootstrap $gray-100
+$dark:      #43515f;  // Dark blue
 
-$yiq-contrasted-threshold:  170 !default;
+// Define or override other colors here
+// ...
 
+// Add new semantic colors here (you don't need to add existing semantic colors)
 $theme-colors: (
-        primary: $dark,
-        secondary: $gray-700,
-        success: $green,
-        info: $cyan,
-        warning: $yellow,
-        danger: $red,
-        light: $gray-100,
-        dark: $dark
-) !default;
+  // ...
+);
+
+
+/*** OTHER BOOTSTRAP VARIABLES ***/
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 170;
+
+$body-color: #343a40;       // As Bootstrap $gray-800
+
+$link-color: #207698;       // Blue green, as DSpace $info
+$link-decoration: none;
+$link-hover-color: darken($link-color, 15%);
+$link-hover-decoration: underline;
+
+$table-accent-bg: #f8f9fa;  // As Bootstrap $gray-100
+$table-hover-bg: #ced4da;   // As Bootstrap $gray-400
+
+$navbar-dark-color: #fff;
+
+
+/*** CUSTOM DSPACE VARIABLES ***/
+
+$ds-home-news-link-color: #92c642;
+$ds-header-navbar-border-bottom-color: #92c642;

From 8f73b8ff9d6ec426f51cb8a5a6694b9afb265781 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Thu, 18 Jan 2024 18:38:55 +0100
Subject: [PATCH 06/17] [DURACOM-195] accessibility issue fixed on log-out
 button

---
 src/app/admin/admin-sidebar/admin-sidebar.component.html | 3 ++-
 src/app/shared/log-out/log-out.component.html            | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index 26f2adfe395..0179b274047 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -39,8 +39,9 @@ <h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
 
   <!-- TOGGLER -->
 
-  <div class="sidebar-full-width-container" id="sidebar-collapse-toggle-container" aria-hidden="true">
+  <div class="sidebar-full-width-container" id="sidebar-collapse-toggle-container">
     <a class="sidebar-section-wrapper sidebar-full-width-container"
+       id="sidebar-collapse-toggle"
        href="javascript:void(0);"
        (click)="toggle($event)"
        (keyup.space)="toggle($event)"
diff --git a/src/app/shared/log-out/log-out.component.html b/src/app/shared/log-out/log-out.component.html
index 83e58b3841b..26f03b95a4d 100644
--- a/src/app/shared/log-out/log-out.component.html
+++ b/src/app/shared/log-out/log-out.component.html
@@ -2,5 +2,5 @@
 
   <div *ngIf="(error | async)" class="alert alert-danger" role="alert" @fadeOut>{{ error | async }}</div>
 
-  <button class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()" [attr.data-test]="'logout-button' | dsBrowserOnly"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
+  <button role="menuitem" class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()" [attr.data-test]="'logout-button' | dsBrowserOnly"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
 </div>

From f25ec6210b33752dfa039a8dc1bece43f864cbea Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Tue, 23 Jan 2024 00:08:57 +0100
Subject: [PATCH 07/17] [DURACOM-195] fix issue with event handling in
 expandable admin sidebar section

---
 cypress/e2e/collection-edit.cy.ts                               | 2 +-
 .../expandable-admin-sidebar-section.component.html             | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/cypress/e2e/collection-edit.cy.ts b/cypress/e2e/collection-edit.cy.ts
index 3e7ecf61410..63d873db3ec 100644
--- a/cypress/e2e/collection-edit.cy.ts
+++ b/cypress/e2e/collection-edit.cy.ts
@@ -45,7 +45,7 @@ describe('Edit Collection > Content Source tab', () => {
         cy.get('#externalSourceCheck').check();
 
         // Wait for the source controls to appear
-        cy.get('ds-collection-source-controls').should('be.visible');
+        // cy.get('ds-collection-source-controls').should('be.visible');
 
         // Analyze entire page for accessibility issues
         testA11y('ds-collection-source');
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index 303b1400f40..cb8b87cfa23 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -12,7 +12,6 @@
      [class.disabled]="section.model?.disabled"
      (click)="toggleSection($event)"
      (keyup.space)="toggleSection($event)"
-     (keyup.enter)="toggleSection($event)"
      href="javascript:void(0);"
   >
     <div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">

From 80cc4c5d9a521e3dbe98bd508a08d395ea836537 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Wed, 24 Jan 2024 18:07:25 +0100
Subject: [PATCH 08/17] [DURACOM-195] fix comment

---
 .../dspace/styles/_theme_sass_variable_overrides.scss     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index daf639582ee..5bbcc98e042 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -44,6 +44,9 @@ $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI"
 //$teal:    #20c997 !default;
 //$cyan:    #17a2b8 !default;
 
+// Define or override other colors here
+// ...
+
 // Override semantic colors here
 $primary:   #43515f;  // Gray
 $secondary: #495057;  // As Bootstrap $gray-700
@@ -52,10 +55,7 @@ $info:      #1e6f90;  // Light blue
 $warning:   #ec9433;  // Orange
 $danger:    #cf4444;  // Red
 $light:     #f8f9fa;  // As Bootstrap $gray-100
-$dark:      #43515f;  // Dark blue
-
-// Define or override other colors here
-// ...
+$dark:      #43515f;  // Gray
 
 // Add new semantic colors here (you don't need to add existing semantic colors)
 $theme-colors: (

From 87d3383bbaff352cd976d661d56f90d94f8f76a4 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Fri, 2 Feb 2024 13:41:02 +0100
Subject: [PATCH 09/17] [DURACOM-195] misc fixes

---
 .../admin-sidebar.component.scss              | 16 ++++++++--------
 ...dable-admin-sidebar-section.component.scss |  2 +-
 src/app/header/header.component.html          |  2 +-
 src/app/header/header.component.scss          | 11 ++++++-----
 src/app/navbar/navbar.component.scss          |  2 +-
 .../user-menu/user-menu.component.scss        |  2 +-
 src/styles/_custom_variables.scss             | 19 +++++++++++++++++--
 .../header-navbar-wrapper.component.scss      | 17 ++++++++++-------
 .../dspace/app/header/header.component.html   |  2 +-
 .../dspace/app/header/header.component.scss   |  2 +-
 .../styles/_theme_css_variable_overrides.scss |  6 +++---
 11 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.scss b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
index c2f3279a8ea..d3607ca625a 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.scss
@@ -35,7 +35,7 @@
     }
 
     img#admin-sidebar-logo {
-      width: 20px;
+      height: var(--ds-admin-sidebar-logo-height);
     }
 
     ::ng-deep {
@@ -43,17 +43,17 @@
       // This class must be applied to any nested wrapper containing a sidebar section
       .sidebar-full-width-container {
         width: 100%;
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
+        padding-left: 0;
+        padding-right: 0;
+        margin-left: 0;
+        margin-right: 0;
       }
 
       // This class must be applied to the innermost block element containing a section or subsection link
       // (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
       .sidebar-item {
-        padding-top: 1rem;
-        padding-bottom: 1rem;
+        padding-top: var(--ds-admin-sidebar-item-padding);
+        padding-bottom: var(--ds-admin-sidebar-item-padding);
       }
 
       // These classes handle the collapsing behavior
@@ -89,7 +89,7 @@
           & > .sidebar-collapsible-element-inner-wrapper {
             min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
             height: 100%;
-            padding-right: 16px !important;
+            padding-right: var(--ds-admin-sidebar-item-padding);
           }
         }
       }
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index 937d996102f..5e76813abb4 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -4,7 +4,7 @@
     margin: 0;
     padding: 0;
     ::ng-deep .ds-menu-item {
-      margin-left: 12px;
+      margin-left: var(--ds-admin-sidebar-section-indent);
     }
   }
 
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 8ff76242cda..e98959d1626 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -15,7 +15,7 @@
           <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
                   aria-controls="collapsingNav"
                   aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
-            <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+            <span class="fas fa-bars fa-fw toggler-icon" aria-hidden="true"></span>
           </button>
         </div>
       </nav>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index a37acf4cedb..e002e0c3472 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -8,11 +8,6 @@
     max-width: 100%;
   }
 
-  .navbar-toggler .navbar-toggler-icon {
-    background-image: none !important;
-    line-height: 1.5;
-  }
-
   .navbar-toggler {
     border: none;
     color: var(--ds-header-icon-color);
@@ -20,6 +15,12 @@
     &:hover, &:focus {
       color: var(--ds-header-icon-color-hover);
     }
+
+    .toggler-icon {
+      width: 1.5em;
+      height: 1.5em;
+      line-height: 1.5;
+    }
   }
 
   .navbar {
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 23268b145f6..b74408f0f59 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,5 +1,5 @@
 :host {
-  --ds-collapsible-navbar-height: auto;
+  --ds-expandable-navbar-height: auto;
 
   nav.navbar {
     background-color: var(--ds-navbar-bg);
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
index 1f33a321f00..9409580cd47 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
@@ -7,6 +7,6 @@
 
   .ds-menu-item {
     display: inline-block;
-    padding: 0.25rem 0;
+    padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-item-horizontal-padding);
   }
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 0a2ed9b673c..c517c3ef6e0 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -22,15 +22,27 @@
   --ds-header-bg: #{$ds-header-bg};
   --ds-header-icon-color: #{$ds-header-icon-color};
   --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
+
   --ds-navbar-bg: #{$ds-navbar-bg};
+  --ds-navbar-item-vertical-padding: 0;
+  --ds-navbar-item-horizontal-padding: 0.25rem;
   --ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
-  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
-  --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-navbar-dropdown-item-vertical-padding: 0.5rem;
+  --ds-navbar-dropdown-item-horizontal-padding: 1rem;
   --ds-navbar-link-color: #{$ds-navbar-link-color};
   --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+
+  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
+
   --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
   --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
   --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+  --ds-expandable-navbar-dropdown-item-vertical-padding: 0.25rem;
+  --ds-expandable-navbar-dropdown-item-horizontal-padding: 0;
+
+  --ds-user-menu-item-vertical-padding: 0.25rem;
+  --ds-user-menu-item-horizontal-padding: 0;
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;
@@ -42,12 +54,15 @@
   --ds-admin-sidebar-bg: #{$ds-admin-sidebar-bg};
   --ds-admin-sidebar-active-bg: #{$ds-admin-sidebar-active-bg};
   --ds-admin-sidebar-header-bg: #{darken($ds-admin-sidebar-bg, 7%)};
+  --ds-admin-sidebar-logo-height: 20px;
   --ds-admin-sidebar-fixed-element-width: #{$ds-admin-sidebar-fixed-element-width};
   --ds-admin-sidebar-fixed-element-z-index: 10;
   --ds-admin-sidebar-collapsible-element-width: #{$ds-admin-sidebar-collapsible-element-width};
   --ds-admin-sidebar-total-width: #{$ds-admin-sidebar-total-width};
   --ds-admin-sidebar-link-color: #{$navbar-dark-color};
   --ds-admin-sidebar-link-hover-color: #{$navbar-dark-hover-color};
+  --ds-admin-sidebar-item-padding: 1rem;
+  --ds-admin-sidebar-section-indent: .75rem;
 
   --ds-dark-scrollbar-bg: #{$ds-admin-sidebar-active-bg};
   --ds-dark-scrollbar-alt-bg: #{lighten($ds-admin-sidebar-active-bg, 2%)};
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index 5b3ac00077c..379b1234d71 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,7 +1,7 @@
 :host {
   --ds-header-navbar-border-bottom-style: solid var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color);
-  --ds-mobile-navbar-border-top-style: solid var(--ds-mobile-navbar-border-top-height) var(--ds-mobile-navbar-border-top-color);
-  --ds-collapsible-navbar-height: calc(100vh - var(--ds-header-height));
+  --ds-expandable-navbar-border-top-style: solid var(--ds-expandable-navbar-border-top-height) var(--ds-expandable-navbar-border-top-color);
+  --ds-expandable-navbar-height: calc(100vh - var(--ds-header-height));
 
   div#header-navbar-wrapper {
     // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
@@ -17,7 +17,7 @@
 
       nav#collapsible-mobile-navbar {
         // Following parameters are changed by slideMobileNav animation
-        min-height: var(--ds-collapsible-navbar-height);
+        min-height: var(--ds-expandable-navbar-height);
         height: auto;
         border-bottom: var(--ds-header-navbar-border-bottom-style);
       }
@@ -42,7 +42,8 @@
         height: 100%;
       }
       .ds-menu-item {
-        padding: 0.5rem;
+        // 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;
@@ -54,6 +55,8 @@
       // 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);
         }
       }
 
@@ -61,14 +64,14 @@
 
     nav#collapsible-mobile-navbar {
 
-      border-top: var(--ds-mobile-navbar-border-top-style);
-      padding-top: var(--ds-mobile-navbar-padding-top);
+      border-top: var(--ds-expandable-navbar-border-top-style);
+      padding-top: var(--ds-expandable-navbar-padding-top);
 
       ::ng-deep {
 
         // mobile menu
         .ds-menu-item {
-          padding: 0.25rem 0;
+          padding: var(--ds-expandable-navbar-dropdown-item-vertical-padding) var(--ds-expandable-navbar-dropdown-item-horizontal-padding);
         }
 
         .ds-menu-item, .ds-menu-toggler-wrapper {
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 656a076e37f..1ea91bc4609 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -25,7 +25,7 @@
       <div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
         <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
                 [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="!(isNavBarCollapsed$ | async)">
-          <span class="fas fa-bars fa-fw fa-xl" aria-hidden="true"></span>
+          <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
         </button>
       </div>
 
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index 2e1064b75c8..f61c442ff52 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -5,7 +5,7 @@
   }
 
   img#header-logo {
-    height: 40px;
+    height: var(--ds-header-logo-height);
   }
 
   button#navbar-toggler {
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index b8e0b3e2e94..d016ff40320 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -18,7 +18,7 @@
 
   /* set the next two properties as `--ds-header-navbar-border-bottom-*`
   in order to keep the bottom border of the header when navbar is expanded */
-  --ds-mobile-navbar-border-top-color: #{$white};
-  --ds-mobile-navbar-border-top-height: 0;
-  --ds-mobile-navbar-padding-top: 0;
+  --ds-expandable-navbar-border-top-color: #{$white};
+  --ds-expandable-navbar-border-top-height: 0;
+  --ds-expandable-navbar-padding-top: 0;
 }

From 46fe7f63e316c7e14ff41e05dfcbbbf39567faf1 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Fri, 2 Feb 2024 13:45:48 +0100
Subject: [PATCH 10/17] [DURACOM-195] fix prefix of custom CSS variables

---
 .../dso-edit-metadata-shared/dso-edit-metadata-cells.scss | 6 +++---
 .../dso-edit-metadata-value.component.scss                | 2 +-
 .../dso-edit-metadata/dso-edit-metadata.component.scss    | 2 +-
 src/styles/_bootstrap_variables_mapping.scss              | 6 ------
 src/styles/_custom_variables.scss                         | 8 ++++++++
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss
index 20d479ac880..29b93f31506 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss
@@ -24,7 +24,7 @@
   }
 
   &.ds-warning {
-    background-color: var(--bs-warning-bg);
+    background-color: var(--ds-warning-bg);
 
     .ds-flex-cell {
       border: 1px solid var(--bs-warning);
@@ -32,7 +32,7 @@
   }
 
   &.ds-danger {
-    background-color: var(--bs-danger-bg);
+    background-color: var(--ds-danger-bg);
 
     .ds-flex-cell {
       border: 1px solid var(--bs-danger);
@@ -40,7 +40,7 @@
   }
 
   &.ds-success {
-    background-color: var(--bs-success-bg);
+    background-color: var(--ds-success-bg);
 
     .ds-flex-cell {
       border: 1px solid var(--bs-success);
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
index 4a207ee1a4a..e5551913005 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
@@ -1,5 +1,5 @@
 .ds-success {
-  background-color: var(--bs-success-bg);
+  background-color: var(--ds-success-bg);
   border: 1px solid var(--bs-success);
 }
 
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
index 4e5e9ff1d4e..3a181fd1308 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.scss
@@ -7,7 +7,7 @@
   border: 1px solid var(--bs-gray-200);
 
   &.ds-success {
-    background-color: var(--bs-success-bg);
+    background-color: var(--ds-success-bg);
     border: 1px solid var(--bs-success);
   }
 }
diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
index 04ed5a7850f..5a64be7e2a5 100644
--- a/src/styles/_bootstrap_variables_mapping.scss
+++ b/src/styles/_bootstrap_variables_mapping.scss
@@ -29,17 +29,11 @@
   --bs-teal: #{$teal};
   --bs-cyan: #{$cyan};
   --bs-primary: #{$primary};
-  --bs-primary-bg: #{$ds-primary-bg};
   --bs-secondary: #{$secondary};
-  --bs-secondary-bg: #{$ds-secondary-bg};
   --bs-success: #{$success};
-  --bs-success-bg: #{$ds-success-bg};
   --bs-info: #{$info};
-  --bs-info-bg: #{$ds-info-bg};
   --bs-warning: #{$warning};
-  --bs-warning-bg: #{$ds-warning-bg};
   --bs-danger: #{$danger};
-  --bs-danger-bg: #{$ds-danger-bg};
   --bs-light: #{$light};
   --bs-dark: #{$dark};
 
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index c517c3ef6e0..ae534b1315e 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -124,4 +124,12 @@
 
   --ds-comcol-logo-max-width: 500px;
   --ds-comcol-logo-max-height: 500px;
+
+  --ds-primary-bg: #{$ds-primary-bg};
+  --ds-secondary-bg: #{$ds-secondary-bg};
+  --ds-success-bg: #{$ds-success-bg};
+  --ds-info-bg: #{$ds-info-bg};
+  --ds-warning-bg: #{$ds-warning-bg};
+  --ds-danger-bg: #{$ds-danger-bg};
+
 }

From 523850bc45ed640d3331e07932d9eae8785d33c6 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Wed, 14 Feb 2024 12:05:55 +0100
Subject: [PATCH 11/17] [DURACOM-195] fixes

---
 .../navbar-section.component.scss             |  5 -----
 .../header-navbar-wrapper.component.scss      | 20 +++++++++++--------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/app/navbar/navbar-section/navbar-section.component.scss b/src/app/navbar/navbar-section/navbar-section.component.scss
index 1cda7dcf9e0..e69de29bb2d 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.scss
+++ b/src/app/navbar/navbar-section/navbar-section.component.scss
@@ -1,5 +0,0 @@
-:host {
-  li.ds-menu-item-wrapper {
-
-  }
-}
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index 379b1234d71..cabad27a5d7 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -34,7 +34,8 @@
 
     nav#desktop-navbar ::ng-deep {
 
-      // 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;
@@ -52,7 +53,8 @@
         }
       }
 
-      // desktop submenu
+      /* desktop submenu */
+
       .dropdown-menu {
         .ds-menu-item {
           // define here the style for second-level navbar menu items
@@ -69,7 +71,8 @@
 
       ::ng-deep {
 
-        // mobile menu
+        /* mobile menu */
+
         .ds-menu-item {
           padding: var(--ds-expandable-navbar-dropdown-item-vertical-padding) var(--ds-expandable-navbar-dropdown-item-horizontal-padding);
         }
@@ -82,11 +85,12 @@
           }
         }
 
-        // mobile submenu
-        .dropdown-menu {
-          .ds-menu-item {
-          }
-        }
+        /* mobile submenu */
+
+        //.dropdown-menu {
+        //  .ds-menu-item {
+        //  }
+        //}
 
       }
     }

From abba806d405af9de44fea3734c542fa8ab7fef1b Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 16:22:28 +0100
Subject: [PATCH 12/17] [DURACOM-195] replace ul/li with div in navbar

---
 .../expandable-navbar-section.component.html         | 12 ++++++------
 .../expandable-navbar-section.component.scss         |  2 +-
 .../navbar-section/navbar-section.component.html     |  7 +++----
 src/app/navbar/navbar.component.html                 |  4 ++--
 src/themes/dspace/app/navbar/navbar.component.html   |  4 ++--
 5 files changed, 14 insertions(+), 15 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 180ce16ba5d..00752e7c042 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,4 +1,4 @@
-<li class="ds-menu-item-wrapper text-md-center" role="presentation"
+<div class="ds-menu-item-wrapper text-md-center"
     [id]="'expandable-navbar-section-' + section.id"
     (mouseenter)="onMouseEnter($event, isActive)"
     (mouseleave)="onMouseLeave($event, isActive)"
@@ -24,13 +24,13 @@
       </span>
       <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
     </a>
-    <ul @slide *ngIf="isActive" (click)="deactivateSection($event)"
+    <div @slide *ngIf="isActive" (click)="deactivateSection($event)"
         [id]="expandableNavbarSectionId(section.id)"
         role="menu"
         class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
-        <li *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
+        <div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
             <ng-container
                     *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </li>
-    </ul>
-</li>
+        </div>
+    </div>
+</div>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 961d4504867..8849fbd8094 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -1,5 +1,5 @@
 :host {
-  li.ds-menu-item-wrapper {
+  .ds-menu-item-wrapper {
     position: relative; // align dropdown menu with respect to this element
   }
 
diff --git a/src/app/navbar/navbar-section/navbar-section.component.html b/src/app/navbar/navbar-section/navbar-section.component.html
index ac51c863425..1411d3b6a69 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.html
+++ b/src/app/navbar/navbar-section/navbar-section.component.html
@@ -1,5 +1,4 @@
-<li role="presentation"
-    class="ds-menu-item-wrapper text-md-center"
-    [id]="'navbar-section-' + section.id">
+<div class="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>
-</li>
+</div>
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 5e15315a9bf..bda98154813 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -9,12 +9,12 @@
         <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
           <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
         </ng-container>
-        <ul class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
+        <div class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
           <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>
-        </ul>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index ac4424c6380..518d3bbe302 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -1,9 +1,9 @@
 <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
   <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
 </ng-container>
-<ul 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">
   <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>
-</ul>
+</div>

From bff93a08471240e107704cd7c525ac747b0c93b6 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 18:23:51 +0100
Subject: [PATCH 13/17] [DURACOM-195] fix issue with logo on small screens

---
 src/themes/dspace/app/header/header.component.html |  4 ++--
 src/themes/dspace/app/header/header.component.scss | 11 ++++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 1ea91bc4609..0a0e0552535 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -1,5 +1,5 @@
 <header id="main-site-header">
-  <div class="container h-100 d-flex flex-row flex-nowrap justify-content-between gapx-3">
+  <div class="container h-100 d-flex flex-row flex-wrap align-items-center justify-content-between gapx-3 gapy-2" id="main-site-header-container">
     <!-- Logo and navbar wrapper -->
     <div id="header-left"
          [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
@@ -13,7 +13,7 @@
       </nav>
     </div>
     <!-- Search bar and other menus -->
-    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1">
+    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ml-auto">
       <ds-themed-search-navbar></ds-themed-search-navbar>
       <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
         <ds-themed-lang-switch></ds-themed-lang-switch>
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index f61c442ff52..5aae8af0171 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -1,7 +1,16 @@
 :host {
   #main-site-header {
-    height: var(--ds-header-height);
+    min-height: var(--ds-header-height);
+
+    @include media-breakpoint-up(md) {
+      height: var(--ds-header-height);
+    }
+
     background-color: var(--ds-header-bg);
+
+    &-container {
+      min-height: var(--ds-header-height);
+    }
   }
 
   img#header-logo {

From 8e35c0f713f37c76e0711ac7f862d02ed4c29d83 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 20:24:12 +0100
Subject: [PATCH 14/17] [DURACOM-195] add background on mouse over to dropdown
 user menu items

---
 .../auth-nav-menu.component.html              |  6 +--
 .../user-menu/user-menu.component.html        |  2 +-
 .../user-menu/user-menu.component.scss        | 41 +++++++++++++++++--
 src/styles/_custom_variables.scss             | 11 ++---
 .../header-navbar-wrapper.component.scss      | 24 -----------
 5 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 44487be1e3d..07b37e220dd 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -29,9 +29,9 @@
          [attr.data-test]="'user-menu' | dsBrowserOnly"
          ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
-      <ul id="logoutDropdownMenu" class="p-3" ngbDropdownMenu role="presentation">
-        <ds-themed-user-menu></ds-themed-user-menu>
-      </ul>
+      <div id="logoutDropdownMenu" ngbDropdownMenu>
+        <ds-themed-user-menu [inExpandableNavbar]="false"></ds-themed-user-menu>
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index 637b483db09..c20ad463d19 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -1,6 +1,6 @@
 <ds-themed-loading *ngIf="(loading$ | async)"></ds-themed-loading>
 <ul *ngIf="!(loading$ | async)" class="user-menu" role="menu"
-    [ngClass]="{ 'pb-2 mb-2 border-bottom' : inExpandableNavbar }"
+    [ngClass]="inExpandableNavbar ? 'user-menu-mobile pb-2 mb-2 border-bottom' : 'user-menu-dropdown'"
     [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" id="user-menu-dropdown">
   <li class="ds-menu-item-wrapper username-email-wrapper" role="presentation">
     {{dsoNameService.getName(user$ | async)}}<br>
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
index 9409580cd47..8fa0019bf15 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
@@ -3,10 +3,43 @@
     list-style: none;
     margin: 0;
     padding: 0;
-  }
 
-  .ds-menu-item {
-    display: inline-block;
-    padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-item-horizontal-padding);
+    &.user-menu-dropdown {
+      .ds-menu-item-wrapper {
+        a.ds-menu-item, &.username-email-wrapper {
+          padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
+        }
+
+        a.ds-menu-item {
+          display: block;
+          color: var(--ds-expandable-navbar-link-color);
+          &:hover {
+            color: var(--ds-expandable-navbar-link-color-hover);
+            background-color: var(--ds-user-menu-dropdown-link-background-hover);
+          }
+        }
+      }
+    }
+
+    &.user-menu-mobile {
+      .ds-menu-item-wrapper {
+        padding-top: var(--ds-user-menu-item-vertical-padding);
+        padding-bottom: var(--ds-user-menu-item-vertical-padding);
+      }
+
+      .ds-menu-item {
+        display: inline-block;
+      }
+
+      .ds-menu-item, .ds-menu-toggler-wrapper {
+        color: var(--ds-expandable-navbar-link-color) !important;
+
+        &:hover, &:focus {
+          color: var(--ds-expandable-navbar-link-background-hover) !important;
+        }
+      }
+
+    }
   }
+
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index fd8b2000b5c..98aa268022b 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -36,13 +36,14 @@
   --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
 
   --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
-  --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
-  --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
-  --ds-expandable-navbar-dropdown-item-vertical-padding: 0.25rem;
-  --ds-expandable-navbar-dropdown-item-horizontal-padding: 0;
+  --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-user-menu-item-vertical-padding: 0.25rem;
-  --ds-user-menu-item-horizontal-padding: 0;
+  --ds-user-menu-dropdown-padding: 1rem;
+  --ds-user-menu-dropdown-link-color: #{$dark};
+  --ds-user-menu-dropdown-link-background-hover: #{$gray-200};
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index cabad27a5d7..77e2d4ad519 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -69,30 +69,6 @@
       border-top: var(--ds-expandable-navbar-border-top-style);
       padding-top: var(--ds-expandable-navbar-padding-top);
 
-      ::ng-deep {
-
-        /* mobile menu */
-
-        .ds-menu-item {
-          padding: var(--ds-expandable-navbar-dropdown-item-vertical-padding) var(--ds-expandable-navbar-dropdown-item-horizontal-padding);
-        }
-
-        .ds-menu-item, .ds-menu-toggler-wrapper {
-          color: var(--ds-expandable-navbar-link-color) !important;
-
-          &:hover, &:focus {
-            color: var(--ds-expandable-navbar-link-color-hover) !important;
-          }
-        }
-
-        /* mobile submenu */
-
-        //.dropdown-menu {
-        //  .ds-menu-item {
-        //  }
-        //}
-
-      }
     }
   }
 }

From d1dc8e6038673de22946fddc8d41b22862bcb5a6 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 20:32:31 +0100
Subject: [PATCH 15/17] [DURACOM-195] replace ul/li with div in sidebar

---
 .../admin-sidebar-section.component.html             |  4 ++--
 .../admin/admin-sidebar/admin-sidebar.component.html |  4 ++--
 .../expandable-admin-sidebar-section.component.html  | 12 ++++++------
 .../expandable-admin-sidebar-section.component.scss  |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
index f0f7a49573e..24ba17fff47 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -1,4 +1,4 @@
-<li role="presentation">
+<div>
   <a class="sidebar-section-wrapper"
      [ngClass]="{ disabled: isDisabled }"
      role="menuitem"
@@ -18,4 +18,4 @@
       </div>
     </div>
   </a>
-</li>
+</div>
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index 0179b274047..fcb33eb1755 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -28,13 +28,13 @@ <h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
   <!-- ITEMS -->
 
   <div class="sidebar-full-width-container" id="sidebar-top-level-items-container">
-    <ul class="sidebar-full-width-container" id="sidebar-top-level-items" role="menubar"
+    <div class="sidebar-full-width-container" id="sidebar-top-level-items" role="menubar"
         [attr.aria-label]="'menu.header.admin.description' |translate">
       <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>
-    </ul>
+    </div>
   </div>
 
   <!-- TOGGLER -->
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
index cb8b87cfa23..636938b7b6e 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -1,4 +1,4 @@
-<li [ngClass]="{'expanded': (isExpanded$ | async)}" role="presentation"
+<div [ngClass]="{'expanded': (isExpanded$ | async)}"
     [@bgColor]="{
      value: ((isExpanded$ | async) ? 'endBackground' : 'startBackground'),
      params: {endColor: (sidebarActiveBg$ | async)}
@@ -33,14 +33,14 @@
     <div class="sidebar-fixed-element-wrapper"></div>
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper">
-        <ul class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
-          <li class="sidebar-item" role="presentation" *ngFor="let subSection of (subSections$ | async)">
+        <div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
+          <div class="sidebar-item" *ngFor="let subSection of (subSections$ | async)">
             {{ (sectionMap$ | async).get(subSection.id).component | json}}
             <ng-container
               *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-</li>
+</div>
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index 5e76813abb4..845ba734df6 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -1,5 +1,5 @@
 :host {
-  ul.sidebar-sub-level-item-list  {
+  .sidebar-sub-level-item-list  {
     list-style: none;
     margin: 0;
     padding: 0;

From fdbe7a6005e59783075395aa3ba26c2b56f7afe5 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Mon, 26 Feb 2024 20:41:44 +0100
Subject: [PATCH 16/17] [DURACOM-195] fix

---
 src/themes/dspace/app/header/header.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 0a0e0552535..02226ac0a1c 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -5,7 +5,7 @@
          [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
          [attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
          class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
-      <a class="d-block" routerLink="/home" [attr.aria-label]="'home.title' | translate">
+      <a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
         <img id="header-logo" src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
       <nav *ngIf="!(isMobile$ | async)" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">

From a88282d70b8677712d5515ca697c46276840e774 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.com>
Date: Tue, 27 Feb 2024 14:05:48 +0100
Subject: [PATCH 17/17] [DURACOM-195] fix spacing in collapsible menu

---
 src/styles/_custom_variables.scss             |  1 +
 .../header-navbar-wrapper.component.scss      | 57 +++++++++++--------
 .../dspace/app/navbar/navbar.component.html   |  2 +-
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 98aa268022b..ce776bb1ac7 100644
--- a/src/styles/_custom_variables.scss
+++ b/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;
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index 77e2d4ad519..444d3a97220 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/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;
+        }
+      }
+
     }
   }
 }
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 518d3bbe302..d828206e7ae 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/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>