add of style for the searchBar

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}>