Move header changes to dspace theme

e2e/protractor.conf.js

@@ -69,7 +69,6 @@ exports.config = {
   plugins: [{
     path: '../node_modules/protractor-istanbul-plugin'
   }],
-
   framework: 'jasmine',
   jasmineNodeOpts: {
     showColors: true,
@@ -85,7 +84,7 @@ exports.config = {
   onPrepare: function () {
     jasmine.getEnv().addReporter(new SpecReporter({
       spec: {
-        displayStacktrace: true
+        displayStacktrace: 'pretty'
       }
     }));
   }

src/app/+home-page/home-page-routing.module.ts

@@ -20,6 +20,7 @@ import { ThemedHomePageComponent } from './themed-home-page.component';
               id: 'statistics_site',
               active: true,
               visible: true,
+              index: 2,
               model: {
                 type: MenuItemType.LINK,
                 text: 'menu.section.statistics',

src/app/app.module.ts

@@ -46,6 +46,7 @@ import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component
 import { ThemedHeaderComponent } from './header/themed-header.component';
 import { ThemedFooterComponent } from './footer/themed-footer.component';
 import { ThemedBreadcrumbsComponent } from './breadcrumbs/themed-breadcrumbs.component';
+import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-header-navbar-wrapper.component';
 
 export function getBase() {
   return environment.ui.nameSpace;
@@ -129,6 +130,7 @@ const DECLARATIONS = [
   HeaderComponent,
   ThemedHeaderComponent,
   HeaderNavbarWrapperComponent,
+  ThemedHeaderNavbarWrapperComponent,
   AdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,

src/app/footer/footer.component.html

@@ -1,72 +1,79 @@
-<footer class="top-footer  text-lg-start">
-  <!-- Grid container -->
-  <div *ngIf="showTopFooter" class="container p-4">
-    <!--Grid row-->
-    <div class="row">
+<footer class="text-lg-start">
+  <div *ngIf="showTopFooter" class="top-footer">
+    <!-- Grid container -->
+    <div class=" container p-4">
+      <!--Grid row-->
+      <div class="row">
 
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
 
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Lorem ipsum</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Ut facilisis</a>
-          </li>
-          <li>
-            <a routerLink="./" class="">Aenean sit</a>
-          </li>
-        </ul>
-      </div>
-      <!--Grid column-->
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Lorem ipsum</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Ut facilisis</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Aenean sit</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
 
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-        <h5 class="text-uppercase">Footer Content</h5>
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
 
-        <ul class="list-unstyled mb-0">
-          <li>
-            <a routerLink="./" class="">Suspendisse potenti</a>
-          </li>
-        </ul>
-      </div>
-      <!--Grid column-->
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Suspendisse potenti</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
 
-      <!--Grid column-->
-      <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
-        <h5 class="text-uppercase">Footer Content</h5>
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
+          <h5 class="text-uppercase">Footer Content</h5>
 
-        <p>
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
-          molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
-          voluptatem veniam, est atque cumque eum delectus sint!
-        </p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
+            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
+            voluptatem veniam, est atque cumque eum delectus sint!
+          </p>
+        </div>
+        <!--Grid column-->
       </div>
-      <!--Grid column-->
+      <!--Grid row-->
     </div>
-    <!--Grid row-->
   </div>
   <!-- Grid container -->
 
   <!-- Copyright -->
-  <div class="footer p-1 d-flex justify-content-center align-items-center text-white">
+  <div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
     <div class="content-container">
       <p class="m-0">
-        <a class="text-white" href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+        <a class="text-white"
+           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
         {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
-        <a class="text-white" href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+        <a class="text-white"
+           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
       <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
         <li>
-          <a class="text-white" href="#" (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
+          <a class="text-white" href="#"
+             (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li>
-          <a class="text-white" routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+          <a class="text-white"
+             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
       </ul>
     </div>

src/app/footer/footer.component.scss

@@ -1,11 +1,10 @@
 :host {
-
-  .top-footer {
-    background-color: var(--ds-top-footer-bg);
-    border-top: var(--ds-footer-border);
+  footer {
+    background-color: var(--ds-footer-bg);
     text-align: center;
-    padding: var(--ds-footer-padding);
     z-index: var(--ds-footer-z-index);
+    border-top: var(--ds-footer-border);
+    padding: var(--ds-footer-padding);
 
     p {
       margin: 0;
@@ -15,12 +14,18 @@
       height: var(--ds-footer-logo-height);
     }
 
-    .footer {
-      background-color: var(--ds-footer-bg);
 
+    .top-footer {
+      background-color: var(--ds-top-footer-bg);
+      padding: var(--ds-footer-padding);
+      margin: calc(var(--ds-footer-padding) * -1);
+    }
+
+    .bottom-footer {
       ul {
         li {
           display: inline-flex;
+
           a {
             padding: 0 calc(var(--bs-spacer) / 2);
             color: inherit

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

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

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

@@ -5,7 +5,3 @@
         position: sticky;
     }
 }
-
-:host {
-  z-index: var(--ds-nav-z-index);
-}

src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.scss

@@ -0,0 +1,3 @@
+:host {
+  z-index: var(--ds-nav-z-index);
+}

src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../shared/theme-support/themed.component';
+import { HeaderNavbarWrapperComponent } from './header-navbar-wrapper.component';
+
+/**
+ * Themed wrapper for BreadcrumbsComponent
+ */
+@Component({
+  selector: 'ds-themed-header-navbar-wrapper',
+  styleUrls: ['./themed-header-navbar-wrapper.component.scss'],
+  templateUrl: '../shared/theme-support/themed.component.html',
+})
+export class ThemedHeaderNavbarWrapperComponent extends ThemedComponent<HeaderNavbarWrapperComponent> {
+  protected getComponentName(): string {
+    return 'HeaderNavbarWrapperComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../themes/${themeName}/app/header-nav-wrapper/header-navbar-wrapper.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./header-navbar-wrapper.component`);
+  }
+}

src/app/header/header.component.html

@@ -1,24 +1,23 @@
-<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" alt="logo"/>
+<header>
+  <div class="container">
+    <div class="d-flex flex-row justify-content-between">
+      <a class="navbar-brand my-2" routerLink="/home">
+        <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
-    </div>
-    <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
-      <ds-search-navbar class="navbar-search"></ds-search-navbar>
-      <ds-lang-switch></ds-lang-switch>
-      <ds-auth-nav-menu></ds-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" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
-        </button>
-      </div>
-    </div>
-  </nav>
-  <ds-themed-navbar></ds-themed-navbar>
 
+      <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
+        <ds-search-navbar></ds-search-navbar>
+        <ds-lang-switch></ds-lang-switch>
+        <ds-auth-nav-menu></ds-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>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </div>
 </header>

src/app/header/header.component.scss

@@ -1,19 +1,23 @@
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
-  nav.navbar {
-    display: none;
-  }
-  .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 {
-    @media screen and (max-width: map-get($grid-breakpoints, md)) {
-        height: var(--ds-header-logo-height-xs);
-    }
-}
 .navbar-toggler .navbar-toggler-icon {
-    background-image: none !important;
-    line-height: 1.5;
-    color: var(--bs-link-color);
+  background-image: none !important;
+  line-height: 1.5;
 }
+
+.navbar ::ng-deep {
+  a {
+    color: var(--ds-header-icon-color);
+
+    &:hover, &focus {
+      color: var(--ds-header-icon-color-hover);
+    }
+  }
+}
+

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

@@ -1,4 +1,4 @@
-<li class="nav-item dropdown h-100 d-flex flex-column justify-content-center"
+<li class="nav-item dropdown"
     (mouseenter)="activateSection($event)"
     (mouseleave)="deactivateSection($event)">
     <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"

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

@@ -1,4 +1,4 @@
-<li class="nav-item h-100 d-flex flex-column justify-content-center">
+<li class="nav-item">
   <ng-container
           *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
 </li>

src/app/navbar/navbar.component.html

@@ -1,24 +1,18 @@
 <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" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
-  <div class="container h-100">
-    <a class="navbar-brand my-2" routerLink="/home">
-      <img src="assets/images/dspace-logo.svg" alt="logo"/>
-    </a>
-
-    <div id="collapsingNav" class="w-100 h-100">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
-        <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>
+     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="container">
+        <div class="reset-padding-md w-100">
+            <div id="collapsingNav">
+                <ul class="navbar-nav mr-auto shadow-none">
+                    <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>
-    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
-    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
-    <ds-auth-nav-menu class="navbar-collapsed"></ds-auth-nav-menu>
-    <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
-  </div>
 </nav>