Create component for searchBar + btn

src/components/SearchBar/SearchBar.jsx

@@ -1,100 +0,0 @@
-import styles from "./SearchBar.module.css"
-import {Link} from "react-router";
-import {useEffect, useState} from "react";
-import searchEvents from "../../utils/events/searchEvents.js";
-import searchUsers from "../../utils/users/searchUsers.js";
-import { useLocation } from "react-router";
-
-
-function SearchBar() {
-    const [searchQuery, setSearchQuery] = useState('');
-    const [searchResults, setSearchResults] = useState([]);
-    const location = useLocation();
-
-    useEffect(() => {
-        const performSearch = async (query) => {
-            if (query.trim() === '') {
-                setSearchResults([]);
-                return;
-            }
-
-            let data;
-
-            if (location.pathname.includes("events")) {
-                data = await searchEvents(query);
-            } else if (location.pathname.includes("volunteers")) {
-                data = await searchUsers(query);
-            }
-
-
-            if (data) {
-                setSearchResults(data);
-            } else {
-                setSearchResults([]);
-            }
-        };
-
-
-        const handler = setTimeout(() => {
-            performSearch(searchQuery);
-        }, 300);
-
-        return () => {
-            clearTimeout(handler);
-        };
-    }, [searchQuery]);
-
-    return (
-        <div className={`${styles.searchBarContainer} glassCard`}>
-            <form className={styles.searchBarForm} onSubmit={(element) => element.preventDefault()}>
-                <img src="search.svg" alt="Rechercher"/>
-                <input
-                    type="text"
-                    placeholder="Rechercher un événement"
-                    value={searchQuery}
-                    onChange={(element) => setSearchQuery(element.target.value)}
-                />
-            </form>
-
-            <div className={styles.lineContainer}>
-                {searchResults.length > 0 ? (
-                    <div className={styles.line}></div>
-                ) : null}
-            </div>
-
-            <div className={styles.elementList}>
-                {searchResults.map((result, i) => (
-                    (location.pathname.includes("events")) ? (
-                        <Link to={`/events/` + result.id}>
-                            <div className={styles.searchedEvent} key={i}>
-                                <div className={`${styles.eventImageDiv}`}>
-                                    {result.image == null ? (
-                                        <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
-                                    ) : (
-                                        <img src={result.image + `.png`} alt="Photo de l'événement" />
-                                    )}
-                                </div>
-                                <p>{result.name}</p>
-                            </div>
-                        </Link>
-                    ) : location.pathname.includes("volunteers") ? (
-                        <Link to={`/profile/` + result.id}>
-                            <div className={styles.searchedEvent} key={i}>
-                                <div className={`${styles.eventImageDiv}`}>
-                                    {result.image == null ? (
-                                        <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
-                                    ) : (
-                                        <img src={result.image + `.png`} alt="Photo de l'événement" />
-                                    )}
-                                </div>
-                                <p>{result.name} {result.lastname}</p>
-                            </div>
-                        </Link>
-                    ) : null
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export default SearchBar;

src/components/SearchBar/SearchBar.module.css

@@ -1,6 +1,8 @@
 .searchBarContainer{
     position: fixed;
-    top: 4rem;
+    top: 20vh;
+    left: 50%;
+    transform: translateX(-50%);
     z-index: 100;
     width: 60%;
     background: #fff;

src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,120 @@
+import styles from "./SearchBar.module.css";
+import { Link } from "react-router";
+import { useEffect, useState } from "react";
+import searchEvents from "../../utils/events/searchEvents.js";
+import searchUsers from "../../utils/users/searchUsers.js";
+import { useLocation } from "react-router";
+
+function SearchBar(): any {
+    const [searchQuery, setSearchQuery] = useState<string>("");
+    const [searchResults, setSearchResults] = useState<any[]>([]);
+    const location: any = useLocation();
+
+    useEffect(() => {
+        const performSearch = async (query: string): Promise<void> => {
+            if (query.trim() === "") {
+                setSearchResults([]);
+                return;
+            }
+
+            let data: any;
+
+            if (location.pathname.includes("events")) {
+                data = await searchEvents(query);
+            } else if (location.pathname.includes("volunteers")) {
+                data = await searchUsers(query);
+            }
+
+            if (data) {
+                setSearchResults(data);
+            } else {
+                setSearchResults([]);
+            }
+        };
+
+        const handler: ReturnType<typeof setTimeout> = setTimeout(() => {
+            performSearch(searchQuery);
+        }, 300);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [searchQuery, location.pathname]);
+
+    return (
+        <div className={`${styles.searchBarContainer} glassCard`}>
+            <form
+                className={styles.searchBarForm}
+                onSubmit={(element: React.FormEvent<HTMLFormElement>) =>
+                    element.preventDefault()
+                }
+            >
+                <img src="search.svg" alt="Rechercher" />
+                <input
+                    type="text"
+                    placeholder="Rechercher un événement"
+                    value={searchQuery}
+                    onChange={(element: React.ChangeEvent<HTMLInputElement>) =>
+                        setSearchQuery(element.target.value)
+                    }
+                />
+            </form>
+
+            <div className={styles.lineContainer}>
+                {searchResults.length > 0 ? (
+                    <div className={styles.line}></div>
+                ) : null}
+            </div>
+
+            <div className={styles.elementList}>
+                {searchResults.map((result: any, i: number) =>
+                    location.pathname.includes("events") ? (
+                        <Link to={`/events/` + result.id} key={i}>
+                            <div className={styles.searchedEvent}>
+                                <div className={styles.eventImageDiv}>
+                                    {result.image == null ? (
+                                        <img
+                                            src="empty.png"
+                                            className={styles.eventImage}
+                                            alt="Pas de photo de l'événement"
+                                        />
+                                    ) : (
+                                        <img
+                                            src={result.image + `.png`}
+                                            alt="Photo de l'événement"
+                                        />
+                                    )}
+                                </div>
+                                <p>{result.name}</p>
+                            </div>
+                        </Link>
+                    ) : location.pathname.includes("volunteers") ? (
+                        <Link to={`/profile/` + result.id} key={i}>
+                            <div className={styles.searchedEvent}>
+                                <div className={styles.eventImageDiv}>
+                                    {result.image == null ? (
+                                        <img
+                                            src="empty.png"
+                                            className={styles.eventImage}
+                                            alt="Pas de photo de l'événement"
+                                        />
+                                    ) : (
+                                        <img
+                                            src={result.image + `.png`}
+                                            alt="Photo de l'événement"
+                                        />
+                                    )}
+                                </div>
+                                <p>
+                                    {result.name} {result.lastname}
+                                </p>
+                            </div>
+                        </Link>
+                    ) : null
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default SearchBar;

src/components/ToolBar/components/searchBtn/SearchBtn.tsx

@@ -0,0 +1,38 @@
+import styles from "../../ToolBar.module.css"
+import Button from "../../../ui/button/button";
+import { useEffect, useState } from "react";
+import SearchBar from "../../../SearchBar/SearchBar";
+
+export default function SearchBtn() {
+
+    const [isSearchVisible, setIsSearchVisible] = useState(false);
+
+    useEffect(() => {
+        if (isSearchVisible) {
+            document.documentElement.style.overflow = 'hidden';
+        } else {
+            document.documentElement.style.overflow = '';
+        }
+
+        return () => {
+            document.documentElement.style.overflow = '';
+        };
+    }, [isSearchVisible]);
+
+    return <>
+
+        {isSearchVisible ? (
+            <div className={styles.searchBarContainer}>
+                <div className={styles.searchBarOverlay} onClick={() => setIsSearchVisible(false)}></div>
+                <SearchBar/>
+            </div>
+        ) : null}
+
+        <div>
+            <Button className={`${styles.searchButton} glassCard`} variant={"default"} onClick={() => setIsSearchVisible(true)}>
+                <img src="search.svg" alt="Rechercher"/>
+            </Button>
+        </div>
+
+    </>
+}