Merge pull request DSpace#2220 from alexandrevryghem/fix-mobile-navbar-and-header-icon-css-variables

Fixed mobile navbar not expanding & use same css variable for all header icons

Author: tdonohue

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

@@ -1,7 +1,4 @@
-@media screen and (max-width: map-get($grid-breakpoints, md)) {
-    :host.open {
-        background-color: var(--bs-white);
-        top: 0;
-        position: sticky;
-    }
+:host {
+  position: relative;
+  z-index: var(--ds-nav-z-index);
 }

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

@@ -11,13 +11,12 @@
   line-height: 1.5;
 }
 
-.navbar ::ng-deep {
-  a {
-    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);
   }
 }
 

src/app/header/header.component.scss

@@ -1,6 +1,7 @@
 input[type="text"] {
   margin-top: calc(-0.5 * var(--bs-font-size-base));
   background-color: #fff !important;
+  border-color: var(--ds-header-icon-color);
 
   &.collapsed {
     opacity: 0;

src/app/search-navbar/search-navbar.component.scss

@@ -19,15 +19,15 @@
   </li>
   <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
+      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (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>
       <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
         <ds-user-menu></ds-user-menu>
       </div>
     </div>
   </li>
   <li *ngIf="(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a id="logoutLink" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="px-1">
+    <a 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>

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -12,7 +12,7 @@
   background-color: transparent !important;
 }
 
-.dropdown-toggle {
+.loginLink, .dropdownLogin, .logoutLink, .dropdownLogout {
   color: var(--ds-header-icon-color);
 
   &:hover, &:focus {

src/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -358,7 +358,7 @@ describe('AuthNavMenuComponent', () => {
       });
 
       it('should render logout link', inject([Store], (store: Store<AppState>) => {
-        const logoutDropdownMenu = deNavMenuItem.query(By.css('a[id=logoutLink]'));
+        const logoutDropdownMenu = deNavMenuItem.query(By.css('a.logoutLink'));
         expect(logoutDropdownMenu.nativeElement).toBeDefined();
       }));
     });

src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts

@@ -6,7 +6,7 @@ import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/h
  */
 @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',
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {

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

@@ -6,7 +6,7 @@
       </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-themed-search-navbar></ds-themed-search-navbar>
       <ds-lang-switch></ds-lang-switch>
       <ds-context-help-toggle></ds-context-help-toggle>
       <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>

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

@@ -15,5 +15,12 @@
 .navbar-toggler .navbar-toggler-icon {
   background-image: none !important;
   line-height: 1.5;
-  color: var(--bs-link-color);
+}
+
+.navbar-toggler {
+  color: var(--ds-header-icon-color);
+
+  &:hover, &:focus {
+    color: var(--ds-header-icon-color-hover);
+  }
 }