Fix search not displaying on mobile

Author: garronej

src/Header/Header.tsx

@@ -150,6 +150,14 @@ export const Header = memo(
                                                 classes.navbar
                                             )}
                                         >
+                                            <button
+                                                className={fr.cx("fr-btn--search", "fr-btn")}
+                                                data-fr-opened={false}
+                                                aria-controls={searchModalId}
+                                                title={t("search")}
+                                            >
+                                                {t("search")}
+                                            </button>
                                             <button
                                                 className={fr.cx("fr-btn--menu", "fr-btn")}
                                                 data-fr-opened="false"

stories/DisplaySettingsDialog.stories.tsx

@@ -15,7 +15,7 @@ const { meta, getStory } = getStoryFactory({
 A button that opens a dialog to enable the user to select light or dark mode.  
 
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage),
-- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/DarkModeSwitch.tsx)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/DisplaySettingsDialog.tsx)
 
 Optionally, you can also use \`import { useIsDark } from "@codegouvfr/react-dsfr"\` to manually monitor and controls 
 the theme state.

stories/Header.stories.tsx

@@ -58,3 +58,119 @@ export const SimpleHeader = getStory({
         }
     ]
 });
+
+export const SimpleHeaderWithServiceTitleAndTagline = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "serviceTitle": "Nom du site / service",
+    "serviceTagline": "baseline - précisions sur l'organisation"
+});
+
+export const HeaderWithQuickAccessItems = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "serviceTitle": "Nom du site / service",
+    "serviceTagline": "baseline - précisions sur l'organisation",
+    "quickAccessItems": [
+        {
+            "iconId": "fr-icon-add-circle-line",
+            "text": "Créer un espace",
+            "linkProps": {
+                "href": "#"
+            }
+        },
+        {
+            "iconId": "fr-icon-lock-line",
+            "text": "Se connecter",
+            "linkProps": {
+                "href": "#"
+            }
+        },
+        {
+            "iconId": "fr-icon-account-line",
+            "text": "S’enregistrer",
+            "linkProps": {
+                "href": "#"
+            }
+        }
+    ]
+});
+
+export const HeaderWithSearchEngine = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "serviceTitle": "Nom du site / service",
+    "serviceTagline": "baseline - précisions sur l'organisation",
+    "renderSearchInput": ({ className, id, name, placeholder, type }) => (
+        <input className={className} id={id} name={name} placeholder={placeholder} type={type} />
+    )
+});
+
+export const HeaderWithQuickAccessItemsAndSearchEngine = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    "serviceTitle": "Nom du site / service",
+    "serviceTagline": "baseline - précisions sur l'organisation",
+    "quickAccessItems": [
+        {
+            "iconId": "fr-icon-add-circle-line",
+            "text": "Créer un espace",
+            "linkProps": {
+                "href": "#"
+            }
+        },
+        {
+            "iconId": "fr-icon-lock-line",
+            "text": "Se connecter",
+            "linkProps": {
+                "href": "#"
+            }
+        },
+        {
+            "iconId": "fr-icon-account-line",
+            "text": "S’enregistrer",
+            "linkProps": {
+                "href": "#"
+            }
+        }
+    ],
+    "renderSearchInput": ({ className, id, name, placeholder, type }) => (
+        <input className={className} id={id} name={name} placeholder={placeholder} type={type} />
+    )
+});