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>

web/src/components/events/EventFilter.tsx

@@ -9,6 +9,7 @@ export const EventFilter = ({
   eventOrganizers,
   setOrganizer,
   activeOrganizer,
+  isVisible,
 }: {
   eventCategories: EventCategory[];
   setCategory: (slug: string | null) => void;
@@ -16,6 +17,7 @@ export const EventFilter = ({
   eventOrganizers: EventOrganizer[];
   setOrganizer: (slug: string | null) => void;
   activeOrganizer: string | null;
+  isVisible: boolean;
 }) => {
   const onOrganizerSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const organizer = e.target.value;
@@ -23,44 +25,52 @@ export const EventFilter = ({
   };
 
   return (
-    <div className={styles.eventFilter}>
-      <span className="suphead">Kategori</span>
-      <ul>
-        {eventCategories
-          .filter((x) => x.showInFilters)
-          .map((category) => (
-            <li
-              key={category.slug}
-              className={activeCategory === category.slug ? styles.active : ""}
+    <div className={styles.eventFilter} data-show={isVisible}>
+      <div className={styles.filterContent}>
+        <div className={styles.filterItem}>
+          <span className={`suphead ${styles.heading}`}>Kategori</span>
+          <ul>
+            {eventCategories
+              .filter((x) => x.showInFilters)
+              .map((category) => (
+                <li
+                  key={category.slug}
+                  className={
+                    activeCategory === category.slug ? styles.active : ""
+                  }
+                >
+                  <button
+                    onClick={() =>
+                      setCategory(
+                        activeCategory === category.slug ? null : category.slug
+                      )
+                    }
+                  >
+                    {category.name}
+                  </button>
+                </li>
+              ))}
+          </ul>
+        </div>
+        <div className={styles.filterItem}>
+          <label htmlFor="organizer" className={`suphead ${styles.heading}`}>
+            Arrangør
+          </label>
+          <div>
+            <select
+              name="organizer"
+              value={activeOrganizer ?? ""}
+              onChange={onOrganizerSelect}
             >
-              <button
-                onClick={() =>
-                  setCategory(
-                    activeCategory === category.slug ? null : category.slug
-                  )
-                }
-              >
-                {category.name}
-              </button>
-            </li>
-          ))}
-      </ul>
-      <label htmlFor="organizer" className="suphead">
-        Arrangør
-      </label>
-      <div>
-        <select
-          name="organizer"
-          value={activeOrganizer ?? ""}
-          onChange={onOrganizerSelect}
-        >
-          <option value="">Vis alle</option>
-          {eventOrganizers.map((organizer) => (
-            <option key={organizer.slug} value={organizer.slug}>
-              {organizer.name}
-            </option>
-          ))}
-        </select>
+              <option value="">Vis alle</option>
+              {eventOrganizers.map((organizer) => (
+                <option key={organizer.slug} value={organizer.slug}>
+                  {organizer.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
       </div>
     </div>
   );

web/src/components/events/eventContainer.module.scss

@@ -12,15 +12,19 @@
 }
 
 .displayOptions {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacing-gap-column);
-  //padding: 0 var(--spacing-sitepadding);
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  position: relative;
+  z-index: 10;
+  transition: background-color .5s ease;
 
-  button {
-    border-radius: 0;
-    background: var(--color-deepBrick);
-    color: var(--color-goldenBeige);
+  button:last-child {
+    margin: 0 0 0 auto;
+  }
+
+  &[data-showFilter=true] {
+    background-color: var(--color-background-secondary);
   }
 }
 
@@ -91,6 +95,10 @@
 }
 
 @media (max-width: 1200px) {
+  .eventList {
+    grid-template-columns: 1fr 1fr;
+  }
+
   .calendarWeek {
     grid-template-columns: 1fr;
   }
@@ -117,3 +125,9 @@
     }
   }
 }
+
+@media (max-width: 700px) {
+  .eventList {
+    grid-template-columns: 1fr;
+  }
+}

web/src/components/events/eventFilter.module.scss

@@ -1,10 +1,26 @@
 .eventFilter {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  background: var(--color-background-secondary);
-  margin: var(--spacing-sitepadding) calc(var(--spacing-sitepadding)*-1);
-  padding: 1rem var(--spacing-sitepadding);
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows .5s ease;
+  margin: var(--spacing-sitepadding) calc(var(--spacing-sitepadding)*-1) 0;
+
+  .filterContent {
+    background-color: var(--color-background);
+    padding: 1rem var(--spacing-sitepadding);
+    min-height: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility .5s, opacity .5s ease, background-color .5s ease;
+  }
+
+  .filterItem {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+
+
+  }
 
   ul {
     list-style: none;
@@ -25,4 +41,14 @@
       color: var(--color-goldenBeige);
     }
   }
+
+  &[data-show=true] {
+    grid-template-rows: 1fr;
+
+    .filterContent {
+      background-color: var(--color-background-secondary);
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 }

web/src/components/general/pageHeader.module.scss

@@ -1,6 +1,6 @@
 .pageHeader {
   position: relative;
-  padding: var(--spacing-l) 0 calc(var(--spacing-l) + var(--spacing-sitepadding));
+  padding: var(--spacing-l) 0 var(--spacing-sitepadding);
 }
 
 .title {

web/src/css/base.scss

@@ -145,6 +145,18 @@ input[type="text"] {
   transition: opacity var(--transition-easing);
 }
 
+select {
+  border-radius: 10rem;
+  background: var(--color-white);
+  color: var(--color-text);
+  border: 2px solid currentColor;
+  padding: .5rem 1rem;
+  font-family: inherit;
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  transition: opacity var(--transition-easing);
+}
+
 .number {
   font-family: var(--font-serif);
   font-weight: 400;