Responsive design

2026-07-20 16:25:44 +02:00
parent 589864e48f
commit ca24632fac
30 changed files with 346 additions and 112 deletions
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import Home from '@lucide/svelte/icons/house';
+	import Search from '@lucide/svelte/icons/search';
+	import Music from '@lucide/svelte/icons/music';
+	import Folder from '@lucide/svelte/icons/folder';
+
+	const links = [
+		{ href: '/', label: 'Inicio', icon: Home },
+		{ href: '/explore', label: 'Buscar', icon: Search },
+		{ href: '/playlists', label: 'Listas', icon: Music },
+		{ href: '/library', label: 'Subidas', icon: Folder }
+	];
+
+	function isActive(href: string) {
+		return href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
+	}
+</script>
+
+<nav
+	class="fixed inset-x-0 bottom-0 z-50 border-t border-line bg-bg/95 backdrop-blur-md md:hidden"
+	style="padding-bottom:var(--mf-safe-b)"
+>
+	<ul class="grid h-[var(--mf-nav-h)] grid-cols-4">
+		{#each links as link (link.href)}
+			{@const active = isActive(link.href)}
+			<li>
+				<a
+					href={link.href}
+					aria-current={active ? 'page' : undefined}
+					class="flex h-full flex-col items-center justify-center gap-1 transition-colors {active
+						? 'text-fg'
+						: 'text-fg-3'}"
+				>
+					<link.icon class="h-[22px] w-[22px] {active ? 'text-accent-soft' : ''}" />
+					<span class="text-[11px] leading-none font-medium">{link.label}</span>
+				</a>
+			</li>
+		{/each}
+	</ul>
+</nav>