From 9f2a1d048bd3a9a413cc15492ce6bbf6c4dd65b2 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 26 Sep 2023 11:50:29 +0200
Subject: [PATCH 1/4] Use gap instead of individual paddings for header icons

---
 .../context-help-toggle.component.ts          | 19 ++++++++---
 src/app/header/header.component.html          |  4 +--
 src/app/header/header.component.scss          |  4 +++
 src/app/header/header.component.spec.ts       |  5 ++-
 src/app/header/header.component.ts            | 14 +++++---
 .../search-navbar.component.html              |  4 +--
 .../search-navbar.component.scss              |  1 +
 src/app/shared/animations/slide.ts            |  2 +-
 .../auth-nav-menu.component.html              |  4 +--
 .../impersonate-navbar.component.html         |  2 +-
 .../impersonate-navbar.component.spec.ts      |  3 +-
 .../impersonate-navbar.component.ts           | 33 ++++++++++++-------
 .../lang-switch/lang-switch.component.html    |  2 +-
 .../lang-switch/lang-switch.component.ts      |  8 +++--
 src/styles/_global-styles.scss                | 26 +++++++++++++++
 15 files changed, 97 insertions(+), 34 deletions(-)

diff --git a/src/app/header/context-help-toggle/context-help-toggle.component.ts b/src/app/header/context-help-toggle/context-help-toggle.component.ts
index 6685df71063..de7c994faa5 100644
--- a/src/app/header/context-help-toggle/context-help-toggle.component.ts
+++ b/src/app/header/context-help-toggle/context-help-toggle.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef } from '@angular/core';
 import { ContextHelpService } from '../../shared/context-help.service';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 /**
@@ -15,12 +15,23 @@ import { map } from 'rxjs/operators';
 export class ContextHelpToggleComponent implements OnInit {
   buttonVisible$: Observable<boolean>;
 
+  subscriptions: Subscription[] = [];
+
   constructor(
-    private contextHelpService: ContextHelpService,
-  ) { }
+    protected elRef: ElementRef,
+    protected contextHelpService: ContextHelpService,
+  ) {
+  }
 
   ngOnInit(): void {
     this.buttonVisible$ = this.contextHelpService.tooltipCount$().pipe(map(x => x > 0));
+    this.subscriptions.push(this.buttonVisible$.subscribe((showContextHelpToggle: boolean) => {
+      if (showContextHelpToggle) {
+        this.elRef.nativeElement.classList.remove('d-none');
+      } else {
+        this.elRef.nativeElement.classList.add('d-none');
+      }
+    }));
   }
 
   onClick() {
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 4d879835235..425f52c6017 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -11,8 +11,8 @@
         <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()"
+        <div *ngIf="isXsOrSm$ | async" class="pl-2">
+          <button class="navbar-toggler px-0" 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>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index cca3ed2abb0..8a11a651956 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -20,3 +20,7 @@
   }
 }
 
+.navbar {
+  display: flex;
+  gap: 0.25rem;
+}
diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts
index 9bc952cee35..ccf8b196219 100644
--- a/src/app/header/header.component.spec.ts
+++ b/src/app/header/header.component.spec.ts
@@ -10,6 +10,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuServiceStub } from '../shared/testing/menu-service.stub';
+import { HostWindowService } from '../shared/host-window.service';
+import { HostWindowServiceStub } from '../shared/testing/host-window-service.stub';
 
 let comp: HeaderComponent;
 let fixture: ComponentFixture<HeaderComponent>;
@@ -26,6 +28,7 @@ describe('HeaderComponent', () => {
         ReactiveFormsModule],
       declarations: [HeaderComponent],
       providers: [
+        { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
         { provide: MenuService, useValue: menuService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
@@ -40,7 +43,7 @@ describe('HeaderComponent', () => {
     fixture = TestBed.createComponent(HeaderComponent);
 
     comp = fixture.componentInstance;
-
+    fixture.detectChanges();
   });
 
   describe('when the toggle button is clicked', () => {
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 366b4f5e7a1..5153a19be47 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
+import { HostWindowService } from '../shared/host-window.service';
 
 /**
  * Represents the header with the logo and simple navigation
@@ -11,20 +12,25 @@ import { MenuID } from '../shared/menu/menu-id.model';
   styleUrls: ['header.component.scss'],
   templateUrl: 'header.component.html',
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit {
   /**
    * Whether user is authenticated.
    * @type {Observable<string>}
    */
   public isAuthenticated: Observable<boolean>;
-  public showAuth = false;
+  public isXsOrSm$: Observable<boolean>;
   menuID = MenuID.PUBLIC;
 
   constructor(
-    private menuService: MenuService
+    protected menuService: MenuService,
+    protected windowService: HostWindowService,
   ) {
   }
 
+  ngOnInit(): void {
+    this.isXsOrSm$ = this.windowService.isXsOrSm();
+  }
+
   public toggleNavbar(): void {
     this.menuService.toggleMenu(this.menuID);
   }
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index 2b30507f3ec..8a98d4c44c4 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -1,9 +1,9 @@
 <div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
-    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
+             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right pl-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
       <button class="submit-icon btn btn-link btn-link-inline" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </button>
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss
index cf46c25d914..a276482b535 100644
--- a/src/app/search-navbar/search-navbar.component.scss
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -12,6 +12,7 @@ input[type="text"] {
   cursor: pointer;
   position: sticky;
   top: 0;
+  border: 0 !important;
 
   color: var(--ds-header-icon-color);
   &:hover, &:focus {
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index 310ddbbfde9..9d18817ee39 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -55,7 +55,7 @@ export const slideSidebarPadding = trigger('slideSidebarPadding', [
 
 export const expandSearchInput = trigger('toggleAnimation', [
   state('collapsed', style({
-    width: '30px',
+    width: '0',
     opacity: '0'
   })),
   state('expanded', style({
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 05f502afa1b..bbc4fa3ca70 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -2,7 +2,7 @@
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
     <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" class="dropdownLogin px-1" [attr.aria-label]="'nav.login' |translate"
+      <a href="javascript:void(0);" class="dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
          (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
          ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
       <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
@@ -13,7 +13,7 @@
     </div>
   </li>
   <li *ngIf="!(isAuthenticated | async) && (isXsOrSm$ | async)" class="nav-item">
-    <a routerLink="/login" routerLinkActive="active" class="loginLink px-1">
+    <a routerLink="/login" routerLinkActive="active" class="loginLink px-0.5">
       {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
     </a>
   </li>
diff --git a/src/app/shared/impersonate-navbar/impersonate-navbar.component.html b/src/app/shared/impersonate-navbar/impersonate-navbar.component.html
index 9f2b66694b7..9581ba8ea87 100644
--- a/src/app/shared/impersonate-navbar/impersonate-navbar.component.html
+++ b/src/app/shared/impersonate-navbar/impersonate-navbar.component.html
@@ -1,4 +1,4 @@
-<ul class="navbar-nav" *ngIf="(isAuthenticated$ | async) && isImpersonating">
+<ul class="navbar-nav" *ngIf="isImpersonating$ | async">
   <li class="nav-item">
     <button class="btn btn-sm btn-dark" ngbTooltip="{{'nav.stop-impersonating' | translate}}" (click)="stopImpersonating()">
       <i class="fa fa-user-secret"></i>
diff --git a/src/app/shared/impersonate-navbar/impersonate-navbar.component.spec.ts b/src/app/shared/impersonate-navbar/impersonate-navbar.component.spec.ts
index af03afc05f9..0e78a5d68a2 100644
--- a/src/app/shared/impersonate-navbar/impersonate-navbar.component.spec.ts
+++ b/src/app/shared/impersonate-navbar/impersonate-navbar.component.spec.ts
@@ -14,6 +14,7 @@ import { authReducer } from '../../core/auth/auth.reducer';
 import { AuthTokenInfo } from '../../core/auth/models/auth-token-info.model';
 import { EPersonMock } from '../testing/eperson.mock';
 import { AppState, storeModuleConfig } from '../../app.reducer';
+import { of as observableOf } from 'rxjs';
 
 describe('ImpersonateNavbarComponent', () => {
   let component: ImpersonateNavbarComponent;
@@ -65,7 +66,7 @@ describe('ImpersonateNavbarComponent', () => {
 
   describe('when the user is impersonating another user', () => {
     beforeEach(() => {
-      component.isImpersonating = true;
+      component.isImpersonating$ = observableOf(true);
       fixture.detectChanges();
     });
 
diff --git a/src/app/shared/impersonate-navbar/impersonate-navbar.component.ts b/src/app/shared/impersonate-navbar/impersonate-navbar.component.ts
index 6166ee950dc..485492b1a77 100644
--- a/src/app/shared/impersonate-navbar/impersonate-navbar.component.ts
+++ b/src/app/shared/impersonate-navbar/impersonate-navbar.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '../../app.reducer';
 import { AuthService } from '../../core/auth/auth.service';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { isAuthenticated } from '../../core/auth/selectors';
 
 @Component({
@@ -13,24 +14,32 @@ import { isAuthenticated } from '../../core/auth/selectors';
  * Navbar component for actions to take concerning impersonating users
  */
 export class ImpersonateNavbarComponent implements OnInit {
-  /**
-   * Whether or not the user is authenticated.
-   * @type {Observable<string>}
-   */
-  isAuthenticated$: Observable<boolean>;
 
   /**
    * Is the user currently impersonating another user?
    */
-  isImpersonating: boolean;
+  isImpersonating$: Observable<boolean>;
+
+  subscriptions: Subscription[] = [];
 
-  constructor(private store: Store<AppState>,
-              private authService: AuthService) {
+  constructor(
+    protected elRef: ElementRef,
+    protected store: Store<AppState>,
+    protected authService: AuthService,
+  ) {
   }
 
   ngOnInit(): void {
-    this.isAuthenticated$ = this.store.pipe(select(isAuthenticated));
-    this.isImpersonating = this.authService.isImpersonating();
+    this.isImpersonating$ = this.store.pipe(select(isAuthenticated)).pipe(
+      map((isUserAuthenticated: boolean) => isUserAuthenticated && this.authService.isImpersonating()),
+    );
+    this.subscriptions.push(this.isImpersonating$.subscribe((isImpersonating: boolean) => {
+      if (isImpersonating) {
+        this.elRef.nativeElement.classList.remove('d-none');
+      } else {
+        this.elRef.nativeElement.classList.add('d-none');
+      }
+    }));
   }
 
   /**
diff --git a/src/app/shared/lang-switch/lang-switch.component.html b/src/app/shared/lang-switch/lang-switch.component.html
index d9a5efaa814..73a5041f7b2 100644
--- a/src/app/shared/lang-switch/lang-switch.component.html
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -1,7 +1,7 @@
 <div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right">
   <a href="javascript:void(0);" role="button"
      [attr.aria-label]="'nav.language' |translate"
-     [title]="'nav.language' | translate" class="px-1"
+     [title]="'nav.language' | translate"
      (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
      tabindex="0">
     <i class="fas fa-globe-asia fa-lg fa-fw"></i>
diff --git a/src/app/shared/lang-switch/lang-switch.component.ts b/src/app/shared/lang-switch/lang-switch.component.ts
index 41d707a0568..d2c70839c0e 100644
--- a/src/app/shared/lang-switch/lang-switch.component.ts
+++ b/src/app/shared/lang-switch/lang-switch.component.ts
@@ -1,7 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit, ElementRef } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-
 import { LangConfig } from '../../../config/lang-config.interface';
 import { environment } from '../../../environments/environment';
 import { LocaleService } from '../../core/locale/locale.service';
@@ -25,6 +23,7 @@ export class LangSwitchComponent implements OnInit {
   moreThanOneLanguage: boolean;
 
   constructor(
+    public el: ElementRef,
     public translate: TranslateService,
     private localeService: LocaleService
   ) {
@@ -33,6 +32,9 @@ export class LangSwitchComponent implements OnInit {
   ngOnInit(): void {
     this.activeLangs = environment.languages.filter((MyLangConfig) => MyLangConfig.active === true);
     this.moreThanOneLanguage = (this.activeLangs.length > 1);
+    if (!this.moreThanOneLanguage) {
+      this.el.nativeElement.style.display = 'none';
+    }
   }
 
   /**
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index b714d399a08..00fcb0f86f1 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -267,3 +267,29 @@ ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
 .table td {
   vertical-align: middle;
 }
+
+.pt-0\.5 {
+  padding-top: 0.125rem !important;
+}
+
+.pr-0\.5 {
+  padding-right: 0.125rem !important;
+}
+
+.pb-0\.5 {
+  padding-bottom: 0.125rem !important;
+}
+
+.pl-0\.5 {
+  padding-left: 0.125rem !important;
+}
+
+.px-0\.5 {
+  padding-left: 0.125rem !important;
+  padding-right: 0.125rem !important;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem !important;
+  padding-bottom: 0.125rem !important;
+}

From f9b4460e70d21de0e82ee272492d0bd5c1d653a3 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 26 Sep 2023 12:02:55 +0200
Subject: [PATCH 2/4] Themed LangSwitchComponent

---
 src/app/header/header.component.html          |  2 +-
 .../lang-switch/lang-switch.component.ts      |  2 +-
 .../themed-lang-switch.component.ts           | 27 +++++++++++++++++++
 src/app/shared/shared.module.ts               |  2 ++
 .../lang-switch/lang-switch.component.html    |  0
 .../lang-switch/lang-switch.component.scss    |  0
 .../lang-switch/lang-switch.component.ts      | 12 +++++++++
 src/themes/custom/eager-theme.module.ts       |  2 ++
 .../dspace/app/header/header.component.html   |  2 +-
 .../dspace/app/navbar/navbar.component.html   |  2 +-
 10 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/app/shared/lang-switch/themed-lang-switch.component.ts
 create mode 100644 src/themes/custom/app/shared/lang-switch/lang-switch.component.html
 create mode 100644 src/themes/custom/app/shared/lang-switch/lang-switch.component.scss
 create mode 100644 src/themes/custom/app/shared/lang-switch/lang-switch.component.ts

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 425f52c6017..32b42dc8a7c 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -7,7 +7,7 @@
 
       <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
         <ds-themed-search-navbar></ds-themed-search-navbar>
-        <ds-lang-switch></ds-lang-switch>
+        <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>
diff --git a/src/app/shared/lang-switch/lang-switch.component.ts b/src/app/shared/lang-switch/lang-switch.component.ts
index d2c70839c0e..e3c5e919caa 100644
--- a/src/app/shared/lang-switch/lang-switch.component.ts
+++ b/src/app/shared/lang-switch/lang-switch.component.ts
@@ -33,7 +33,7 @@ export class LangSwitchComponent implements OnInit {
     this.activeLangs = environment.languages.filter((MyLangConfig) => MyLangConfig.active === true);
     this.moreThanOneLanguage = (this.activeLangs.length > 1);
     if (!this.moreThanOneLanguage) {
-      this.el.nativeElement.style.display = 'none';
+      this.el.nativeElement.parentElement.classList.add('d-none');
     }
   }
 
diff --git a/src/app/shared/lang-switch/themed-lang-switch.component.ts b/src/app/shared/lang-switch/themed-lang-switch.component.ts
new file mode 100644
index 00000000000..8be34474267
--- /dev/null
+++ b/src/app/shared/lang-switch/themed-lang-switch.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { LangSwitchComponent } from './lang-switch.component';
+
+/**
+ * Themed wrapper for {@link LangSwitchComponent}
+ */
+@Component({
+  selector: 'ds-themed-lang-switch',
+  styleUrls: [],
+  templateUrl: '../theme-support/themed.component.html',
+})
+export class ThemedLangSwitchComponent extends ThemedComponent<LangSwitchComponent> {
+
+  protected getComponentName(): string {
+    return 'LangSwitchComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/lang-switch/lang-switch.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./lang-switch.component`);
+  }
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 0f7871f7f9b..b21712f4824 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -284,6 +284,7 @@ import {
 } from '../item-page/simple/field-components/specific-field/title/themed-item-page-field.component';
 import { BitstreamListItemComponent } from './object-list/bitstream-list-item/bitstream-list-item.component';
 import { NgxPaginationModule } from 'ngx-pagination';
+import { ThemedLangSwitchComponent } from './lang-switch/themed-lang-switch.component';
 
 const MODULES = [
   CommonModule,
@@ -335,6 +336,7 @@ const COMPONENTS = [
   DsSelectComponent,
   ErrorComponent,
   LangSwitchComponent,
+  ThemedLangSwitchComponent,
   LoadingComponent,
   ThemedLoadingComponent,
   LogInComponent,
diff --git a/src/themes/custom/app/shared/lang-switch/lang-switch.component.html b/src/themes/custom/app/shared/lang-switch/lang-switch.component.html
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/themes/custom/app/shared/lang-switch/lang-switch.component.scss b/src/themes/custom/app/shared/lang-switch/lang-switch.component.scss
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/themes/custom/app/shared/lang-switch/lang-switch.component.ts b/src/themes/custom/app/shared/lang-switch/lang-switch.component.ts
new file mode 100644
index 00000000000..fe803949dbc
--- /dev/null
+++ b/src/themes/custom/app/shared/lang-switch/lang-switch.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { LangSwitchComponent as BaseComponent } from '../../../../../app/shared/lang-switch/lang-switch.component';
+
+@Component({
+  selector: 'ds-lang-switch',
+  // styleUrls: ['./lang-switch.component.scss'],
+  styleUrls: ['../../../../../app/shared/lang-switch/lang-switch.component.scss'],
+  // templateUrl: './lang-switch.component.html',
+  templateUrl: '../../../../../app/shared/lang-switch/lang-switch.component.html',
+})
+export class LangSwitchComponent extends BaseComponent {
+}
diff --git a/src/themes/custom/eager-theme.module.ts b/src/themes/custom/eager-theme.module.ts
index 7d7f5b3d8b4..a181487ea7a 100644
--- a/src/themes/custom/eager-theme.module.ts
+++ b/src/themes/custom/eager-theme.module.ts
@@ -54,6 +54,7 @@ import {
   ItemSearchResultListElementComponent
 } from './app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TopLevelCommunityListComponent } from './app/home-page/top-level-community-list/top-level-community-list.component';
+import { LangSwitchComponent } from './app/shared/lang-switch/lang-switch.component';
 
 
 /**
@@ -91,6 +92,7 @@ const DECLARATIONS = [
   EditCollectionSelectorComponent,
   EditCommunitySelectorComponent,
   EditItemSelectorComponent,
+  LangSwitchComponent,
 ];
 
 @NgModule({
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index dbc98098ae5..87a26ca326a 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -7,7 +7,7 @@
     </div>
     <div class="d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
       <ds-themed-search-navbar></ds-themed-search-navbar>
-      <ds-lang-switch></ds-lang-switch>
+      <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>
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index 05afac7d7e9..c2e3286ed07 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -16,7 +16,7 @@
       </ul>
     </div>
     <ds-search-navbar class="navbar-collapsed"></ds-search-navbar>
-    <ds-lang-switch class="navbar-collapsed"></ds-lang-switch>
+    <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>

From 58d31dd73f9762a341e774df261d909d97c4b3e2 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 26 Sep 2023 22:16:25 +0200
Subject: [PATCH 3/4] Applied same gap between header icons in the dspace theme
 and made the search field non-focusable when collapsed

---
 src/app/header/header.component.scss               |  3 ++-
 src/app/search-navbar/search-navbar.component.html |  5 ++++-
 src/themes/dspace/app/header/header.component.html |  2 +-
 src/themes/dspace/app/header/header.component.scss |  6 ++++++
 src/themes/dspace/app/navbar/navbar.component.html | 12 +++++++-----
 src/themes/dspace/app/navbar/navbar.component.scss |  6 ++++++
 6 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 8a11a651956..871adf289c6 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -22,5 +22,6 @@
 
 .navbar {
   display: flex;
-  gap: 0.25rem;
+  gap: calc(var(--bs-spacer) / 3);
+  align-items: center;
 }
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index 8a98d4c44c4..02a98905021 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -3,7 +3,10 @@
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right pl-1" [attr.data-test]="'header-search-box' | dsBrowserOnly">
+             class="bg-transparent position-absolute form-control dropdown-menu-right pl-1 pr-4"
+             [class.display]="searchExpanded ? 'inline-block' : 'none'"
+             [tabIndex]="searchExpanded ? 0 : -1"
+             [attr.data-test]="'header-search-box' | dsBrowserOnly">
       <button class="submit-icon btn btn-link btn-link-inline" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </button>
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 87a26ca326a..4b0046bc834 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -5,7 +5,7 @@
         <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">
+    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center">
       <ds-themed-search-navbar></ds-themed-search-navbar>
       <ds-themed-lang-switch></ds-themed-lang-switch>
       <ds-context-help-toggle></ds-context-help-toggle>
diff --git a/src/themes/dspace/app/header/header.component.scss b/src/themes/dspace/app/header/header.component.scss
index 2fc857826f9..14c46a2316a 100644
--- a/src/themes/dspace/app/header/header.component.scss
+++ b/src/themes/dspace/app/header/header.component.scss
@@ -24,3 +24,9 @@
     color: var(--ds-header-icon-color-hover);
   }
 }
+
+.navbar-buttons {
+  display: flex;
+  gap: calc(var(--bs-spacer) / 3);
+  align-items: center;
+}
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index c2e3286ed07..d9631aad182 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -15,10 +15,12 @@
         </ng-container>
       </ul>
     </div>
-    <ds-search-navbar class="navbar-collapsed"></ds-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 class="navbar-buttons">
+      <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>
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index d3aea9f0780..2e1b4a04f92 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -54,3 +54,9 @@ a.navbar-brand img {
     color: var(--ds-navbar-link-color-hover);
   }
 }
+
+.navbar-buttons {
+  display: flex;
+  gap: calc(var(--bs-spacer) / 3);
+  align-items: center;
+}

From fa56d5dfb719c14d99080ef8fe208b5ee129c72f Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Thu, 28 Sep 2023 11:50:24 +0200
Subject: [PATCH 4/4] Fixed invalid html structure the
 ExpandableNavbarSectionComponent had an ul tag containing non-li tags

---
 .../admin-sidebar-section/admin-sidebar-section.component.ts  | 3 +--
 src/app/admin/admin-sidebar/admin-sidebar.component.html      | 4 ++--
 .../expandable-admin-sidebar-section.component.ts             | 3 +--
 .../expandable-navbar-section.component.html                  | 4 ++--
 .../expandable-navbar-section.component.ts                    | 2 --
 .../themed-expandable-navbar-section.component.ts             | 3 +--
 src/app/navbar/navbar-section/navbar-section.component.ts     | 3 +--
 src/app/navbar/navbar.component.html                          | 4 ++--
 .../dso-edit-menu-expandable-section.component.ts             | 1 -
 .../dso-edit-menu-section/dso-edit-menu-section.component.ts  | 1 -
 src/themes/dspace/app/navbar/navbar.component.html            | 4 ++--
 11 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
index d6cd803622b..b195526d1c0 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -12,8 +12,7 @@ import { Router } from '@angular/router';
  * Represents a non-expandable section in the admin sidebar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-admin-sidebar-section]',
+  selector: 'ds-admin-sidebar-section',
   templateUrl: './admin-sidebar-section.component.html',
   styleUrls: ['./admin-sidebar-section.component.scss'],
 
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
index ef220b834ba..fe7e5595ab0 100644
--- a/src/app/admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -26,10 +26,10 @@ <h4 class="section-header-text mb-0">{{ 'menu.header.admin' | translate }}</h4>
               </div>
             </li>
 
-            <ng-container *ngFor="let section of (sections | async)">
+            <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>
-            </ng-container>
+            </li>
         </ul>
     </div>
     <div class="navbar-nav">
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index 4555c0fa938..8591fef97eb 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -15,8 +15,7 @@ import { Router } from '@angular/router';
  * Represents a expandable section in the sidebar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-expandable-admin-sidebar-section]',
+  selector: 'ds-expandable-admin-sidebar-section',
   templateUrl: './expandable-admin-sidebar-section.component.html',
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
   animations: [rotate, slide, bgColor]
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index b5023261647..053968834e1 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -14,9 +14,9 @@
     </a>
     <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
         class="m-0 shadow-none border-top-0 dropdown-menu show">
-        <ng-container *ngFor="let subSection of (subSections$ | async)">
+        <li *ngFor="let subSection of (subSections$ | async)">
             <ng-container
                     *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </ng-container>
+        </li>
     </ul>
 </div>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index 5bc69bcbb4e..d32fa46a327 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -4,7 +4,6 @@ import { MenuService } from '../../shared/menu/menu.service';
 import { slide } from '../../shared/animations/slide';
 import { first } from 'rxjs/operators';
 import { HostWindowService } from '../../shared/host-window.service';
-import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
 import { MenuID } from '../../shared/menu/menu-id.model';
 
 /**
@@ -16,7 +15,6 @@ import { MenuID } from '../../shared/menu/menu-id.model';
   styleUrls: ['./expandable-navbar-section.component.scss'],
   animations: [slide]
 })
-@rendersSectionForMenu(MenuID.PUBLIC, true)
 export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements OnInit {
   /**
    * This section resides in the Public Navbar
diff --git a/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
index e33dca41049..8f474e99490 100644
--- a/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
@@ -8,8 +8,7 @@ import { MenuID } from '../../shared/menu/menu-id.model';
  * Themed wrapper for ExpandableNavbarSectionComponent
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-themed-expandable-navbar-section]',
+  selector: 'ds-themed-expandable-navbar-section',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })
diff --git a/src/app/navbar/navbar-section/navbar-section.component.ts b/src/app/navbar/navbar-section/navbar-section.component.ts
index 9f75a96f6e7..9b86aa10f2b 100644
--- a/src/app/navbar/navbar-section/navbar-section.component.ts
+++ b/src/app/navbar/navbar-section/navbar-section.component.ts
@@ -8,8 +8,7 @@ import { MenuID } from '../../shared/menu/menu-id.model';
  * Represents a non-expandable section in the navbar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-navbar-section]',
+  selector: 'ds-navbar-section',
   templateUrl: './navbar-section.component.html',
   styleUrls: ['./navbar-section.component.scss']
 })
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index bc1e04f5130..edfc4bb8ee0 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -8,9 +8,9 @@
                     <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
                         <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
                     </li>
-                    <ng-container *ngFor="let section of (sections | async)">
+                    <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>
-                    </ng-container>
+                    </li>
                 </ul>
             </div>
         </div>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
index 8e4a7008afe..1925099418a 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
@@ -13,7 +13,6 @@ import { hasValue } from '../../../empty.util';
  * Represents an expandable section in the dso edit menus
  */
 @Component({
-  /* tslint:disable:component-selector */
   selector: 'ds-dso-edit-menu-expandable-section',
   templateUrl: './dso-edit-menu-expandable-section.component.html',
   styleUrls: ['./dso-edit-menu-expandable-section.component.scss'],
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts
index af3381ef716..060049ef5fc 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts
@@ -10,7 +10,6 @@ import { MenuSection } from '../../../menu/menu-section.model';
  * Represents a non-expandable section in the dso edit menus
  */
 @Component({
-  /* tslint:disable:component-selector */
   selector: 'ds-dso-edit-menu-section',
   templateUrl: './dso-edit-menu-section.component.html',
   styleUrls: ['./dso-edit-menu-section.component.scss']
diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
index d9631aad182..c14671cf683 100644
--- a/src/themes/dspace/app/navbar/navbar.component.html
+++ b/src/themes/dspace/app/navbar/navbar.component.html
@@ -10,9 +10,9 @@
         <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
             <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
         </li>
-        <ng-container *ngFor="let section of (sections | async)">
+        <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>
-        </ng-container>
+        </li>
       </ul>
     </div>
     <div class="navbar-buttons">