move header changes to dspace theme

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

src/app/header/header.component.scss

@@ -1,19 +1,23 @@
-@media screen and (min-width: map-get($grid-breakpoints, md)) {
+.navbar-brand img {
-  nav.navbar {
+  max-height: var(--ds-header-logo-height);
-    display: none;
+  max-width: 100%;
-  }
+  @media screen and (max-width: map-get($grid-breakpoints, sm)) {
-  .header {
+    max-height: var(--ds-header-logo-height-xs);
-    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);
-    }
-}
 .navbar-toggler .navbar-toggler-icon {
   background-image: none !important;
   line-height: 1.5;
-    color: var(--bs-link-color);
 }
+
+.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,17 @@
 <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"
+     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
-     role="navigation" role="navigation" [attr.aria-label]="'nav.main.description' |translate">
+    <div class="container">
-  <div class="container h-100">
+        <div class="reset-padding-md w-100">
-    <a class="navbar-brand my-2" routerLink="/home">
+            <div id="collapsingNav">
-      <img src="assets/images/dspace-logo.svg" alt="logo"/>
+                <ul class="navbar-nav mr-auto shadow-none">
-    </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>
             </div>
-    <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
+        </div>
-    <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>
 

src/app/navbar/navbar.component.scss

@@ -1,14 +1,12 @@
 nav.navbar {
-    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+    border-bottom: 1px var(--bs-gray-400) solid;
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
     align-items: baseline;
-    color: var(--ds-header-icon-color);
 }
 
 /** Mobile menu styling **/
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     .navbar {
-        width: 100%;
+        width: 100vw;
         background-color: var(--bs-white);
         position: absolute;
         overflow: hidden;
@@ -31,20 +29,9 @@ nav.navbar {
     @media screen and (max-width: map-get($grid-breakpoints, md)) {
         > .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 {

src/app/navbar/navbar.component.ts

@@ -46,6 +46,7 @@ export class NavbarComponent extends MenuComponent {
         id: `browse_global_communities_and_collections`,
         active: false,
         visible: true,
+        index: 0,
         model: {
           type: MenuItemType.LINK,
           text: `menu.section.browse_global_communities_and_collections`,
@@ -57,11 +58,11 @@ export class NavbarComponent extends MenuComponent {
         id: 'browse_global',
         active: false,
         visible: true,
+        index: 1,
         model: {
           type: MenuItemType.TEXT,
           text: 'menu.section.browse_global'
         } as TextMenuItemModel,
-        index: 0
       },
     ];
     // Read the different Browse-By types from config and add them to the browse menu

src/app/root/root.component.html

@@ -4,7 +4,7 @@
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}
     }">
-    <ds-header-navbar-wrapper></ds-header-navbar-wrapper>
+    <ds-themed-header-navbar-wrapper></ds-themed-header-navbar-wrapper>
 
     <ds-notifications-board
       [options]="notificationOptions">

src/styles/_custom_variables.scss

@@ -20,7 +20,7 @@
   --ds-sidebar-z-index: 20;
 
   --ds-header-bg: #{$white};
-  --ds-header-logo-height: 40px;
+  --ds-header-logo-height: 50px;
   --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$cyan};
   --ds-header-icon-color-hover: #{darken($white, 15%)};

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  // styleUrls: ['header-navbar-wrapper.component.scss'],
+  styleUrls: ['../../../../app/header-nav-wrapper/header-navbar-wrapper.component.scss'],
+  // templateUrl: 'header-navbar-wrapper.component.html',
+  templateUrl: '../../../../app/header-nav-wrapper/header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}

src/themes/custom/theme.module.ts

@@ -78,6 +78,7 @@ import { NavbarComponent } from './app/navbar/navbar.component';
 import { HeaderComponent } from './app/header/header.component';
 import { FooterComponent } from './app/footer/footer.component';
 import { BreadcrumbsComponent } from './app/breadcrumbs/breadcrumbs.component';
+import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
 
 const DECLARATIONS = [
   HomePageComponent,
@@ -117,6 +118,7 @@ const DECLARATIONS = [
   FooterComponent,
   HeaderComponent,
   NavbarComponent,
+  HeaderNavbarWrapperComponent,
   BreadcrumbsComponent
 ];
 

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

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

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  styleUrls: ['header-navbar-wrapper.component.scss'],
+  templateUrl: 'header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}

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

@@ -0,0 +1,24 @@
+<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"/>
+      </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>
+
+</header>

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

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

src/themes/dspace/app/header/header.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+
+/**
+ * Represents the header with the logo and simple navigation
+ */
+@Component({
+  selector: 'ds-header',
+  styleUrls: ['header.component.scss'],
+  templateUrl: 'header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}

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

@@ -0,0 +1,24 @@
+<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>
+    </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>
+

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

@@ -1,5 +1,57 @@
-@import 'src/app/navbar/navbar.component.scss';
-
 nav.navbar {
+  border-top: 1px var(--ds-header-navbar-border-top-color) solid;
   border-bottom: 5px var(--bs-green) solid;
+  align-items: baseline;
+  color: var(--ds-header-icon-color);
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+  .navbar {
+    width: 100%;
+    background-color: var(--bs-white);
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    &.open {
+      height: 100vh; //doesn't matter because wrapper is sticky
+    }
+  }
+}
+
+@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)) {
+    > .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 {
+    color: var(--ds-navbar-link-color);
+  }
+  ::ng-deep a.nav-link:hover {
+    color: var(--ds-navbar-link-color-hover);
+  }
 }

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

@@ -8,7 +8,7 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
 @Component({
   selector: 'ds-navbar',
   styleUrls: ['./navbar.component.scss'],
-  templateUrl: '../../../../app/navbar/navbar.component.html',
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends BaseComponent {

src/themes/dspace/styles/_global-styles.scss

@@ -21,3 +21,13 @@
     font-size: 1.1rem
   }
 }
+
+header {
+  ds-navbar-section > li,
+  ds-expandable-navbar-section > li {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }
+}

src/themes/dspace/styles/_theme_css_variable_overrides.scss

@@ -1,6 +1,7 @@
 // Override or add CSS variables for your theme here
 
 :root {
+  --ds-header-logo-height: 40px;
   --ds-banner-text-background: rgba(0, 0, 0, 0.45);
   --ds-banner-background-gradient-width: 300px;
   --ds-home-news-link-color: #{$green};

src/themes/dspace/theme.module.ts

@@ -41,9 +41,13 @@ import { CollectionPageModule } from '../../app/+collection-page/collection-page
 import { SubmissionModule } from '../../app/submission/submission.module';
 import { MyDSpacePageModule } from '../../app/+my-dspace-page/my-dspace-page.module';
 import { NavbarComponent } from './app/navbar/navbar.component';
+import { HeaderComponent } from './app/header/header.component';
+import { HeaderNavbarWrapperComponent } from './app/header-nav-wrapper/header-navbar-wrapper.component';
 
 const DECLARATIONS = [
   HomeNewsComponent,
+  HeaderComponent,
+  HeaderNavbarWrapperComponent,
   NavbarComponent
 ];