update of filter menu design

src/components/Filter/Filter.jsx

@@ -0,0 +1,36 @@
+import styles from "./Filter.module.css";
+
+function Filter({isFilterVisible, filters, setFilters}){
+    const setAlphabeticalOrder = (order) => {
+        setFilters(prev => ({
+            ...prev,
+            alphabetical : prev.alphabetical === order ? null : order
+        }));
+    };
+
+    const setYearOrder = (order) => {
+        setFilters(prev => ({
+            ...prev,
+            yearOrder: prev.yearOrder === order ? null : order
+        }));
+    };
+
+    return (
+        <div className={`${styles.filterContainer} ${isFilterVisible ? styles.filterOpen : styles.filterClose}`}>
+            <button className={`${styles.filterTag} glassCard ${filters.alphabetical === "asc" ? "active" : ""}`}
+                    onClick={() => setAlphabeticalOrder("asc")}>
+                <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 -960 960 960" fill="currentColor">
+                    <path d="m80-280 150-400h86l150 400h-82l-34-96H196l-32 96H80Zm140-164h104l-48-150h-6l-50 150Zm328 164v-76l202-252H556v-72h282v76L638-352h202v72H548ZM360-760l120-120 120 120H360ZM480-80 360-200h240L480-80Z"/>
+                </svg>
+            </button>
+            <button className={`${styles.filterTag} glassCard ${filters.alphabetical === "asc" ? "active" : ""}`}
+                    onClick={() => setYearOrder("asc")}>
+                <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>
+    )
+}
+
+export default Filter;

src/components/Filter/Filter.module.css

@@ -0,0 +1,44 @@
+.filterContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.filterOpen {
+    display: flex;
+}
+
+.filterClose{
+    display: none;
+}
+
+
+.filterTag {
+    border: none;
+    background: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+}
+
+.filterTag:focus {
+    outline: none;
+}
+.filterTag:focus-visible {
+    outline: 2px solid black;
+}
+
+.filterTag:hover {
+    cursor: pointer;
+    svg{
+        fill: #019AFF;
+    }
+}
+
+
+.filterTag svg {
+    transform: scale(4);
+}

src/index.css

@@ -25,7 +25,7 @@
 .content {
   padding: 1.5rem;
   z-index: 1;
-  
+  min-height: 100vh;
 }
 
 

src/pages/Events/EventsPage.jsx

@@ -1,12 +1,23 @@
 import {useState} from "react";
 import Event from "../../components/Event/Event.jsx";
 import {Link} from "react-router";
-import styles from "./EventsPage.module.css"
+import styles from "./EventsPage.module.css";
+import Filter from "../../components/Filter/Filter.jsx";
 
 
 
 function EventsPage(){
-    const [events, setEvents] = useState([
+    const [isFilterVisible, setIsFilterVisible] = useState(false);
+    const toggleFilters = () => {
+        setIsFilterVisible(prev => !prev);
+    };
+
+    const [filters, setFilters] = useState({
+        alphabetical: "asc",
+        yearOrder: "asc",
+    });
+
+    const [events] = useState([
         {
             id: 1,
             name: "Marathon de la Ville",
@@ -184,11 +195,16 @@ function EventsPage(){
                     className={`${styles.createButton} glassCard`}>
                     +
                 </Link>
-                <button className={`${styles.sortButton} glassCard`}>
+                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
-                        <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 xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                    </svg>
+                            <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"/>
-                </button>
+                        </svg>
+                    </button>
+                    <div className={styles.filterMenu}>
+                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
+                    </div>
+                </div>
             </div>
         </div>
     )

src/pages/Events/EventsPage.module.css

@@ -23,6 +23,17 @@
 }
 
 
+.filterContainer{
+    padding: 0;
+    border-radius: 30px;
+    overflow: visible;
+}
+
+.filterMenu{
+    padding: 5px 5px 5px 5px;
+}
+
+
 .createButton, .sortButton {
     display: flex;
     align-items: center;
@@ -40,13 +51,16 @@
 }
 
 .sortButton svg {
-    transform: scale(0.8);
+    transform: scale(1.5);
     fill: #019AFF;
 }
 
-.createButton:hover, .sortButton:hover {
+.sortButton:hover {
-    transform: translateY(-5px);
+    cursor: pointer;
+}
 
+.createButton:hover, .mobileFilter:hover {
+    transform: translateY(-5px);
 }