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] 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;
+}