fix(searchbar): update searchbar display

dataesr · Feb 21, 2024 · 150abe8 · 150abe8
1 parent a97b646
commit 150abe8
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 40 deletions.
diff --git a/client/src/components/search-bar/styles.module.scss b/client/src/components/search-bar/styles.module.scss
@@ -2,7 +2,6 @@
   width: 100%;
 }
 .searchbar {
-  flex-flow: row 1;
   width: 100%;
 }
 .label {
@@ -37,7 +36,7 @@
     border-radius: 0 0 .5rem .5rem;
     background-color: var(--background-default-grey);
     box-shadow: 0 6px 18px 0 var(--border-default-grey);
-    position: absolute;
+    // position: absolute;
     top: 0;
     right: 0;
     left: 0;

diff --git a/client/src/layout/header/index.js b/client/src/layout/header/index.js
@@ -1,22 +1,23 @@
 /* eslint-disable indent */
 import { useEffect, useState } from 'react';
-import {
-  Link as RouterLink,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
+import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom';
 import {
   Badge,
-  Header as HeaderWrapper, HeaderBody, HeaderNav,
+  Header as HeaderWrapper,
+  HeaderBody,
+  HeaderNav,
   Logo,
   NavItem,
   Service,
-  Tool, ToolItem, ToolItemGroup,
+  Tool,
+  ToolItem,
+  ToolItemGroup,
 } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 import SearchBar from '../../components/search-bar';
 import useDebounce from './hooks/useDebounce';
 import countries from '../../assets/data/countriesList.json';
+import './styles.scss';
 
 import logoCuriexplore from '../../assets/img/logo-curiexplore.svg';
 
@@ -35,10 +36,20 @@ export default function Header({ switchTheme }) {
   const navigate = useNavigate();
 
   useEffect(() => {
-    const allCountries = countries.filter((country) => country.hasData === 'TRUE').map((country) => ({ nameFr: country.Pays, iso3: country.ISO_alpha3, searchLabel: country.Pays_search }));
+    const allCountries = countries
+      .filter((country) => country.hasData === 'TRUE')
+      .map((country) => ({
+        nameFr: country.Pays,
+        iso3: country.ISO_alpha3,
+        searchLabel: country.Pays_search,
+      }));
     const getAutocompleteResult = async () => {
       setIsSearching(true);
-      setOptions(allCountries.filter((country) => country.searchLabel.indexOf(debouncedQuery.toLowerCase()) !== -1));
+      setOptions(
+        allCountries.filter(
+          (country) => country.searchLabel.indexOf(debouncedQuery.toLowerCase()) !== -1,
+        ),
+      );
       setIsSearching(false);
     };
     if (debouncedQuery) {
@@ -68,48 +79,53 @@ export default function Header({ switchTheme }) {
           </a>
         </li>
         <li>
-          <a href="#a11ySearch">
-            Aller à la recherche de pays
-          </a>
+          <a href="#a11ySearch">Aller à la recherche de pays</a>
         </li>
         <li>
-          <a href="/annuaire">
-            Aller à l'annuaire des pays
-          </a>
+          <a href="/annuaire">Aller à l'annuaire des pays</a>
         </li>
         <li>
-          <a href="#a11ycontent">
-            Aller au contenu de la page
-          </a>
+          <a href="#a11ycontent">Aller au contenu de la page</a>
         </li>
       </ul>
       <HeaderWrapper>
         <HeaderBody>
-          <Logo splitCharacter={9}>
-            Gouvernement
-          </Logo>
+          <Logo splitCharacter={9}>Gouvernement</Logo>
           <Service
             title={(
               <>
-                <img alt="Logo CurieXplore" src={logoCuriexplore} className="fr-responsive-img" style={{ width: '200px' }} />
-                {headerTag && <Badge text={headerTag} type={(!headerTagColor) ? 'info' : undefined} isSmall colorFamily={headerTagColor} />}
+                <img
+                  alt="Logo CurieXplore"
+                  src={logoCuriexplore}
+                  className="fr-responsive-img"
+                  style={{ width: '200px' }}
+                />
+                {headerTag && (
+                  <Badge
+                    text={headerTag}
+                    type={!headerTagColor ? 'info' : undefined}
+                    isSmall
+                    colorFamily={headerTagColor}
+                  />
+                )}
               </>
             )}
             description=""
           />
-          <Tool closeButtonLabel="fermer" className="extend">
-            <ToolItemGroup>
-              <ToolItem
-                type="button"
-                className="fr-btn fr-btn--icon-left fr-icon-theme-fill"
-                aria-controls="fr-theme-modal"
-                data-fr-opened={isOpen}
-                onClick={() => setIsOpen(true)}
-              >
-                Changer le thème
-              </ToolItem>
-            </ToolItemGroup>
-
+          <div className="top-right-header-corner">
+            <Tool>
+              <ToolItemGroup>
+                <ToolItem
+                  type="button"
+                  className="fr-btn fr-btn--icon-left fr-icon-theme-fill fr-in"
+                  aria-controls="fr-theme-modal"
+                  data-fr-opened={isOpen}
+                  onClick={() => setIsOpen(true)}
+                >
+                  Changer le thème
+                </ToolItem>
+              </ToolItemGroup>
+            </Tool>
             <SearchBar
               size="md"
               buttonLabel="Rechercher"
@@ -125,7 +141,7 @@ export default function Header({ switchTheme }) {
               onSelect={handleSearchRedirection}
               isSearching={isSearching}
             />
-          </Tool>
+          </div>
         </HeaderBody>
         <HeaderNav path={pathname}>
           <NavItem

diff --git a/client/src/layout/header/styles.scss b/client/src/layout/header/styles.scss
@@ -0,0 +1,9 @@
+.fr-header__body-row {
+  display: block;
+}
+.top-right-header-corner {
+ position: absolute;
+  top: 50px;
+  right: 0;
+  margin-right: 65px;
+}
diff --git a/client/src/layout/index.js b/client/src/layout/index.js
@@ -12,7 +12,9 @@ export default function Layout() {
   return (
     <>
       <Header switchTheme={{ isOpen: isSwitchThemeOpen, setIsOpen: setIsSwitchThemeOpen }} />
-      <SwitchTheme isOpen={isSwitchThemeOpen} setIsOpen={setIsSwitchThemeOpen} />
+      <div className="fr-radio-group">
+        <SwitchTheme isOpen={isSwitchThemeOpen} setIsOpen={setIsSwitchThemeOpen} />
+      </div>
       <div role="alert" id="notice-container" />
       <Container as="main" role="main" fluid id="a11yContent">
         <Outlet />