Create component for searchBar + btn

2026-02-11 15:35:05 +01:00
parent c85490e1c6
commit ed90671693
4 changed files with 161 additions and 101 deletions
@@ -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>
+
+    </>
+}