[DURACOM-180] Prevent header from covering media viewer controls (dspace theme)

(cherry picked from commit 0208a78437)

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

@@ -1,3 +1,3 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+<div [class.open]="!(isNavBarCollapsed | async)" id="header-navbar-wrapper">
   <ds-themed-header></ds-themed-header>
 </div>

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

@@ -0,0 +1,7 @@
+: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;
+  div#header-navbar-wrapper {
+    border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
+  }
+}

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

@@ -6,7 +6,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
  */
 @Component({
   selector: 'ds-header-navbar-wrapper',
-  styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
+  styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {

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

@@ -1,7 +1,9 @@
 nav.navbar {
-  border-top: 1px var(--ds-header-navbar-border-top-color) solid;
-  border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
   align-items: baseline;
+
+  .navbar-inner-container {
+    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+  }
 }
 
 .navbar-nav {
@@ -16,8 +18,10 @@ nav.navbar {
     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
     }
   }
 }