From ef9bf6ba0ca2ec2f3cf786acae665dd28f0c72ec Mon Sep 17 00:00:00 2001
From: madkarmaa <madkarma99@gmail.com>
Date: Sun, 4 May 2025 17:52:18 +0200
Subject: [PATCH] feat: add mobile dropdown

---
 .../components/molecules/FooterSection.svelte | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/lib/components/molecules/FooterSection.svelte b/src/lib/components/molecules/FooterSection.svelte
index 030ed0b..ec51b0d 100644
--- a/src/lib/components/molecules/FooterSection.svelte
+++ b/src/lib/components/molecules/FooterSection.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
+	import ChevronDown from '~icons/mdi/chevron-down';
 
 	type Props = { title: string; children: Snippet };
 	let { title, children }: Props = $props();
@@ -13,3 +17,19 @@
 		{@render children()}
 	</ul>
 </div>
+
+<div class="mobile-only">
+	<button class="title" onclick={() => (expanded = !expanded)}>
+		<span>
+			{title}
+		</span>
+		<div class="arrow" style:transform={expanded ? 'rotate(180deg)' : 'rotate(0deg)'}>
+			<ChevronDown color="var(--surface-six)" />
+		</div>
+	</button>
+	{#if expanded}
+		<ul transition:slide={{ easing: quintOut, duration: 500 }}>
+			{@render children()}
+		</ul>
+	{/if}
+</div>