add of style for the searchBar

src/components/SearchBar/SearchBar.jsx

@@ -1,21 +1,17 @@
 import styles from "./SearchBar.module.css"
 
-function SearchBar({isSearchVisible, setIsSearchVisible}) {
+function SearchBar() {
 
 
     return (
-        <div>
-            <form action="" method="POST">
-                <div>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
-                        <path
-                            d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
-                    </svg>
-                    <input type="text"/>
-                </div>
-
-            <button onClick={() => setIsSearchVisible(false)}>ok</button>
-                </form>
+        <div className={`${styles.searchBarContainer} glassCard`}>
+            <form className={styles.searchBarForm} action="" method="POST">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
+                    <path
+                        d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
+                </svg>
+                <input type="text" placeholder="Rechercher un événement"/>
+            </form>
         </div>
     );
 }

src/components/SearchBar/SearchBar.module.css

@@ -0,0 +1,21 @@
+.searchBarContainer{
+    position: fixed;
+    top: 10rem;
+    z-index: 100;
+    width: 60%;
+    background: #fff;
+}
+
+.searchBarForm{
+    display: flex;
+}
+
+.searchBarForm input{
+    background: none;
+    box-shadow: none;
+    height: 2em;
+}
+
+.searchBarForm input:focus{
+    outline: none;
+}

src/pages/Events/EventsPage.jsx

@@ -1,4 +1,4 @@
-import {useState} from "react";
+import {useState, useEffect} from "react";
 import Event from "../../components/Event/Event.jsx";
 import {Link} from "react-router";
 import styles from "./EventsPage.module.css";
@@ -18,6 +18,18 @@ function EventsPage(){
         yearOrder: "asc",
     });
 
+    useEffect(() => {
+        if (isSearchVisible) {
+            document.getElementById("root").style.overflow = 'hidden';
+        } else {
+            document.getElementById("root").style.overflow = '';
+        }
+
+        return () => {
+            document.getElementById("root").style.overflow = '';
+        };
+    }, [isSearchVisible]);
+
     const [events] = useState([
         {
             id: 1,
@@ -225,7 +237,10 @@ function EventsPage(){
         <div className={styles.eventsContainer}>
 
             {isSearchVisible ? (
-                <SearchBar className={styles.searchBar} setIsSearchVisible={setIsSearchVisible} isSearchVisible={isSearchVisible} />
+                <div className={styles.searchBarContainer}>
+                    <div className={styles.searchBarOverlay} onClick={() => setIsSearchVisible(false)}></div>
+                    <SearchBar/>
+                </div>
             ) : null}
 
             <div className={styles.eventsButtons}>

src/pages/Events/EventsPage.module.css

@@ -34,6 +34,22 @@
     padding: 5px 5px 5px 5px;
 }
 
+.searchBarOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+}
+
+
+.searchBarContainer{
+    display: flex;
+    justify-content: center;
+}
 
 .createButton, .searchButton, .sortButton {
     display: flex;
@@ -67,15 +83,6 @@
 }
 
 
-
-.searchBar {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-}
-
-
 @media screen and (max-width: 768px) {
     .eventsButtons {
         flex-direction: row;