Chase changes in DSpace 7.6.2 header and navbar

Changes:
  - Re-work cgspace theme based on DSpace 7.6.2 dspace theme
  - Use primary instead of brand-primary (seems to be an older Bootstrap convention)
  - Simplify sub-theme CSS code to inherit from cgspace base theme

Mobile menu is broken again and I haven't figured out how to fix it
with all the reworking yet.

src/app/shared/search/search-export-csv/search-export-csv.component.scss

@@ -2,11 +2,11 @@
 // This is from the cgspace theme's _global-styles.scss, but we have to use
 // CSS variables because the SCSS ones aren't defined by the time this runs.
 .export-button {
-    background-color: var(--brand-primary);
-    border-color: var(--brand-primary);
+    background-color: var(--primary);
+    border-color: var(--primary);
     color: var(--bs-white);
 
     &:hover {
-        background-color: var(--brand-primary-darker);
+        background-color: var(--primary-darker);
     }
 }

src/themes/alliance/styles/_theme_css_variable_overrides.scss

@@ -1,28 +1,5 @@
 // Override or add CSS variables for your theme here
 
 :root {
-  --ds-header-logo-height: 40px;
-  --ds-banner-text-background: $white;
-  --ds-banner-background-gradient-width: 300px;
-  --ds-home-news-link-color: #{$brand-primary};
-  --ds-home-news-link-hover-color: var(--brand-primary-darker);
-  --ds-thumbnail-max-width: 200px;
-  // override DSpace navbar link colors (note the special variable syntax here)
-  --ds-navbar-link-color: #{$white};
-  --ds-navbar-link-color-hover: #{$brand-secondary};
-  --ds-header-navbar-border-top-color: #{$brand-primary};
-  --ds-header-navbar-border-bottom-color: #{$brand-secondary};
-  // override DSpace search, language, and login colors
-  --ds-header-icon-color: #{$white};
-  --ds-header-icon-color-hover: #{$brand-secondary};
-  // override DSpace header background color
-  --ds-header-bg: #{$brand-primary};
-  // override DSpace footer background color
-  --ds-footer-bg: #{$brand-primary};
-  // override DSpace header trail text color
-  --ds-breadcrumb-link-color: #{$brand-primary};
-  --ds-breadcrumb-link-active-color: #{$gray-800};
-  --brand-primary: #{$brand-primary};
-  --brand-primary-darker: #{darken($brand-primary, 10%)};
 }
 

src/themes/alliance/styles/_theme_sass_variable_overrides.scss

@@ -28,10 +28,10 @@ $font-family-sans-serif:
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 
 // Alliance dark blue (Primary color)
-$brand-primary: #173F6F;
+$primary: #173F6F;
 
 // Alliance dark green (Primary color)
-$brand-secondary: #358540;
+$secondary: #358540;
 
 // Alliance black (Primary color)
 $gray-800: #231F20;

src/themes/alliance/styles/theme.scss

@@ -9,6 +9,7 @@
 @import '../../../styles/_vendor.scss';
 @import '../../../styles/_custom_variables.scss';
 @import './_theme_css_variable_overrides.scss';
+@import '../../cgspace/styles/_theme_css_variable_overrides.scss';
 @import '../../../styles/bootstrap_variables_mapping.scss';
 @import '../../../styles/_truncatable-part.component.scss';
 @import './_global-styles.scss';

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

@@ -1,3 +1,9 @@
-<div [ngClass]="{'open': !(isNavBarCollapsed | async)}">
+<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>

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

@@ -0,0 +1 @@
+@import '../../../dspace/app/header-nav-wrapper/header-navbar-wrapper.component';

src/themes/cgspace/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 {
 }

src/themes/cgspace/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/cgspace/images/CGIAR-logo-white.png" [attr.alt]="'menu.header.image.logo' | translate"/>
+<header id="main-site-header">
+  <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'"
+         [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 my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
+        <img id="header-logo" src="assets/cgspace/images/CGIAR-logo-white.png" [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 ml-auto">
       <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 toggler-icon" aria-hidden="true"></span>
         </button>
       </div>
-    </div>
-  </nav>
-  <ds-themed-navbar></ds-themed-navbar>
 
+    </div>
+  </div>
 </header>

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

@@ -1,6 +1 @@
 @import '../../../dspace/app/header/header.component';
-
-// The dspace theme only sets the header background on medium screens and up
-.header {
-  background-color: var(--ds-header-bg);
-}

src/themes/cgspace/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);
+  }
 }

src/themes/cgspace/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/cgspace/images/CGIAR-logo-white.png" [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>
+<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>
+  </ng-container>
+</div>

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

@@ -1,64 +1,3 @@
-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) {
-  .navbar {
-    width: 100vw;
-    background-color: var(--bs-white);
-    position: absolute;
-    overflow: hidden;
-    height: 0;
-    z-index: var(--ds-nav-z-index);
-
-    &.open {
-      height: auto;
-      min-height: 100vh;
-      border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
-    }
-  }
-}
-
-@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);
+:host {
 
-    &:hover, &:focus {
-      color: var(--ds-navbar-link-color-hover);
-    }
-  }
 }