moving side buttons within a ToolBar component

src/components/ToolBar/ToolBar.jsx

@@ -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;

src/components/ToolBar/ToolBar.module.css

@@ -0,0 +1,97 @@
+.eventsButtons {
+    overflow: visible;
+    position: fixed;
+    top: 10rem;
+    right: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: fit-content;
+    height: fit-content;
+    gap: 1rem;
+}
+
+
+.filterContainer{
+    padding: 0;
+    border-radius: 30px;
+    overflow: visible;
+}
+
+.filterMenu{
+    padding: 5px 5px 5px 5px;
+}
+
+.createButton, .searchButton, .sortButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50%;
+    width: 55px;
+    height: 55px;
+    transition: all 0.5s ease;
+}
+
+.createButton {
+    font-size: 2rem;
+    color: #019AFF;
+}
+
+.createButton:hover, .searchButton:hover, .mobileFilter:hover {
+    transform: translateY(-5px);
+    cursor: pointer;
+}
+
+
+.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;
+}
+
+.sortButton svg, .searchButton svg {
+    transform: scale(0.8);
+    fill: #019AFF;
+}
+
+
+.sortButton:focus, .searchButton:focus {
+    outline: none;
+}
+
+
+
+@media screen and (max-width: 768px) {
+    .eventsButtons {
+        flex-direction: row;
+        position: relative;
+        top: 0;
+        right: 0;
+        align-items: flex-start;
+        width: 100%;
+        margin-top: 16px;
+    }
+
+    .filterContainer{
+        display: flex;
+        width: fit-content;
+    }
+
+    .filterMenu{
+        width: fit-content;
+    }
+
+    .createButton:hover, .searchButton:hover, .mobileFilter:hover {
+        transform: none !important;
+    }
+}

src/pages/Events/EventsPage.jsx

@@ -1,39 +1,15 @@
-import {useState, useEffect} from "react";
+import {useState} from "react";
 import Event from "../../components/Event/Event.jsx";
-import {Link} from "react-router";
 import styles from "./EventsPage.module.css";
-import Filter from "../../components/Filter/Filter.jsx";
+import ToolBar from "../../components/ToolBar/ToolBar.jsx";
-import SearchBar from "../../components/SearchBar/SearchBar.jsx";
 
 
 function EventsPage(){
-    const [isFilterVisible, setIsFilterVisible] = useState(false);
-    const [isSearchVisible, setIsSearchVisible] = useState(false);
-
-    const toggleFilters = () => {
-        setIsFilterVisible(prev => !prev);
-    };
-
     const [filters, setFilters] = useState({
         alphabetical: "asc",
         yearOrder: "asc",
     });
 
-    useEffect(() => {
-        if (isSearchVisible) {
-            document.documentElement.style.overflow = 'hidden';
-        } else {
-            document.documentElement.style.overflow = '';
-        }
-
-        return () => {
-            document.documentElement.style.overflow = '';
-        };
-    }, [isSearchVisible]);
-
-
-
-
     const [events] = useState([
         {
             id: 1,
@@ -235,48 +211,14 @@ function EventsPage(){
     });
 
 
-
-
     return (
         <div className={styles.eventsContainer}>
-
+            <ToolBar setFilters={setFilters} filters={filters}/>
-            {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 className={styles.eventsList}>
                 {sortedEvents.map((event, index) => (
                     <Event key={index} event={event} />
                 ))}
             </div>
-
         </div>
     )
 }

src/pages/Events/EventsPage.module.css

@@ -8,102 +8,4 @@
     display: flex;
     align-items: center;
     flex-direction: column;
-}
+}
-
-.eventsButtons {
-    overflow: visible;
-    position: fixed;
-    top: 10rem;
-    right: 2rem;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    width: fit-content;
-    height: fit-content;
-    gap: 1rem;
-}
-
-
-.filterContainer{
-    padding: 0;
-    border-radius: 30px;
-    overflow: visible;
-}
-
-.filterMenu{
-    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;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: 50%;
-    width: 55px;
-    height: 55px;
-    transition: all 0.5s ease;
-}
-
-.createButton {
-    font-size: 2rem;
-    color: #019AFF;
-}
-
-.sortButton svg, .searchButton svg {
-    transform: scale(0.8);
-    fill: #019AFF;
-}
-
-.createButton:hover, .searchButton:hover, .mobileFilter:hover {
-    transform: translateY(-5px);
-    cursor: pointer;
-}
-
-
-.sortButton:focus, .searchButton:focus {
-    outline: none;
-}
-
-
-@media screen and (max-width: 768px) {
-    .eventsButtons {
-        flex-direction: row;
-        position: relative;
-        top: 0;
-        right: 0;
-        align-items: flex-start;
-        width: 100%;
-        margin-top: 16px;
-    }
-
-    .filterContainer{
-        display: flex;
-        width: fit-content;
-    }
-
-    .filterMenu{
-        width: fit-content;
-    }
-
-    .createButton:hover, .searchButton:hover, .mobileFilter:hover {
-        transform: none !important;
-    }
-}
-