ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-25 11:02:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add mobile dropdown

Browse Source
This commit is contained in:
madkarmaa 2025-05-04 17:52:18 +02:00
parent 0ab6b7e466
commit ef9bf6ba0c
No known key found for this signature in database
GPG Key ID: BF5E2EF8F188606D
1 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/molecules/FooterSection.svelte
View File

@ -1,5 +1,9 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from 'svelte'; 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 }; type Props = { title: string; children: Snippet };
let { title, children }: Props = $props(); let { title, children }: Props = $props();
@ -13,3 +17,19 @@
{@render children()} {@render children()}
</ul> </ul>
</div> </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>