moving side buttons within a ToolBar component

2025-12-07 15:22:33 +01:00
parent 7adc584199
commit 22921f3da1
4 changed files with 167 additions and 160 deletions
@@ -0,0 +1,66 @@
+import styles from "./ToolBar.module.css"
+import {Link} from "react-router";
+import Filter from "../Filter/Filter.jsx";
+import {useEffect, useState} from "react";
+import SearchBar from "../SearchBar/SearchBar.jsx";
+
+
+function ToolBar({setFilters, filters}) {
+    const [isFilterVisible, setIsFilterVisible] = useState(false);
+    const [isSearchVisible, setIsSearchVisible] = useState(false);
+    const toggleFilters = () => {
+        setIsFilterVisible(prev => !prev);
+    };
+
+
+    useEffect(() => {
+        if (isSearchVisible) {
+            document.documentElement.style.overflow = 'hidden';
+        } else {
+            document.documentElement.style.overflow = '';
+        }
+
+        return () => {
+            document.documentElement.style.overflow = '';
+        };
+    }, [isSearchVisible]);
+
+
+
+    return (
+        <div>
+            {isSearchVisible ? (
+                <div className={styles.searchBarContainer}>
+                    <div className={styles.searchBarOverlay} onClick={() => setIsSearchVisible(false)}></div>
+                    <SearchBar/>
+                </div>
+            ) : null}
+            <div className={styles.eventsButtons}>
+                <Link
+                    to="/event/create"
+                    className={`${styles.createButton} glassCard`}>
+                    +
+                </Link>
+
+                <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
+                    <svg xmlns="http://www.w3.org/2000/svg" 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>
+                </button>
+
+                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
+                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+                            <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
+                        </svg>
+                    </button>
+                    <div className={styles.filterMenu}>
+                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ToolBar;