tidy up event filters a lil bit, add toggle function

web/src/components/events/EventContainer.tsx

@@ -16,6 +16,8 @@ import styles from "./eventContainer.module.scss";
 import { formatDate, formatYearMonth } from "@/lib/date";
 import { parse } from "date-fns";
 import { unique } from "@/lib/common";
+import Icon from "../general/Icon";
+import { useState } from "react";
 
 /*
   TODO: canonical / alternate URLs https://github.com/47ng/nuqs?tab=readme-ov-file#seo
@@ -64,22 +66,40 @@ export const EventContainer = ({
           .includes(category)
     );
 
+  const [showFilter, setShowFilter] = useState(false);
+  function toggleFilter() {
+    setShowFilter(!showFilter);
+  }
+
   return (
     <div className={styles.events}>
-      <EventFilter
-        eventCategories={filterableCategories}
-        setCategory={setCategory}
-        activeCategory={category}
-        eventOrganizers={filterableOrganizers}
-        setOrganizer={setOrganizer}
-        activeOrganizer={organizer}
-      />
       <div className={styles.eventWrapper}>
         <div className={styles.displayOptions}>
-          <button onClick={() => setMode(null)}>Vis liste</button>
-          <button onClick={() => setMode("calendar")}>Vis kalender</button>
-          <button>Filtrer</button>
+          <button onClick={() => setMode(null)} className="button secondary">
+            <span>Vis liste</span>
+            <Icon />
+          </button>
+          <button
+            onClick={() => setMode("calendar")}
+            className="button secondary"
+          >
+            <span>Vis kalender</span>
+            <Icon />
+          </button>
+          <button onClick={toggleFilter} className="button tertiary">
+            <span>Filter</span>
+            <Icon />
+          </button>
         </div>
+        <EventFilter
+          eventCategories={filterableCategories}
+          setCategory={setCategory}
+          activeCategory={category}
+          eventOrganizers={filterableOrganizers}
+          setOrganizer={setOrganizer}
+          activeOrganizer={organizer}
+          isVisible={showFilter}
+        />
         {mode === "list" && <EventList events={filteredEvents} />}
         {mode === "calendar" && <EventCalendar events={filteredEvents} />}
       </div>