feat(Footer): improve mobile responsiveness

src/layout/Footer/FooterHost.svelte

@@ -7,12 +7,20 @@
 
 	import { createQuery } from '@tanstack/svelte-query';
 	import Query from '$lib/components/Query.svelte';
+	import FooterSection from './FooterSection.svelte';
 
 	const query = createQuery(['repositories'], queries.repositories);
 </script>
 
 <!-- squiggly divider line -->
-<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+<svg
+	aria-hidden="true"
+	width="100%"
+	height="8"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	in:fly={{ y: 10, easing: quintOut, duration: 750 }}
+>
 	<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
 		<g clip-path="url(#clip0_2426_11367)">
 			<path
@@ -39,16 +47,14 @@
 		</section>
 
 		<section class="links-container">
-			<ul>
+			<FooterSection title="Pages">
-				<li>Pages</li>
 				<li><a href="/">Home</a></li>
 				<li><a href="/download">Download</a></li>
 				<li><a href="/docs">Documentation</a></li>
 				<li><a href="/patches">Patches</a></li>
 				<li><a href="/contributors">Contributors</a></li>
-			</ul>
+			</FooterSection>
-			<ul>
+			<FooterSection title="Repositories">
-				<li>Repositories</li>
 				<Query {query} let:data>
 					{#each data as { name }}
 						<li>
@@ -58,23 +64,18 @@
 						</li>
 					{/each}
 				</Query>
-			</ul>
+			</FooterSection>
-			<ul>
+			<FooterSection title="Socials">
-				<!-- to replace -->
+				<ul>
-				<li>Socials</li>
+					<!-- to replace -->
-				<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
+					<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
-				<li><a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a></li>
+					<li><a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a></li>
-				<li>
+					<li><a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a></li>
-					<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a>
+					<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
-				</li>
+					<li><a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a></li>
-				<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
+					<li><a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a></li>
-				<li>
+				</ul>
-					<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a>
+			</FooterSection>
-				</li>
-				<li>
-					<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a>
-				</li>
-			</ul>
 		</section>
 	</div>
 	<div class="footer-bottom">
@@ -181,8 +182,17 @@
 
 		.links-container {
 			display: grid;
-			gap: 3rem;
+			gap: 2rem;
 			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
 		}
 	}
+
+	@media screen and (max-width: 768px) {
+		.links-container {
+			display: flex;
+			flex-direction: column;
+			gap: initial;
+		}
+	}
+
 </style>

src/layout/Footer/FooterSection.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
+	export let title: string;
+	let expanded: boolean = false;
+</script>
+
+<div class="desktop-only">
+	<span>{title}</span>
+	<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
+		<slot />
+	</ul>
+</div>
+
+<div class="mobile-only">
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<button class="title" on:click={() => (expanded = !expanded)}>
+		<span>
+			{title}
+		</span>
+		<span>{expanded ? '-' : '+'}</span>
+	</button>
+	{#if expanded}
+		<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
+			<slot />
+		</ul>
+	{/if}
+</div>
+
+<style lang="scss">
+	span {
+		list-style: none;
+		color: var(--grey-five);
+		font-size: 0.9rem;
+		font-weight: 500;
+	}
+
+	ul {
+		margin: 1.25rem 0rem;
+		display: flex;
+		gap: 1rem;
+		flex-direction: column;
+		width: max-content;
+	}
+
+	.title {
+		display: flex;
+		justify-content: space-between;
+		background-color: transparent;
+		border: none;
+		width: 100%;
+		margin: 1.5rem 0;
+		cursor: pointer;
+	}
+
+	.mobile-only:not(:last-child) {
+		border-bottom: 1px solid var(--grey-three);
+	}
+
+	.mobile-only {
+		display: none;
+	}
+
+	@media screen and (max-width: 768px) {
+		.mobile-only {
+			display: block;
+		}
+		.desktop-only {
+			display: none;
+		}
+	}
+</style>