53 lines
1.3 KiB
Svelte
53 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import HoverIcon from '$lib/components/HoverIcon.svelte';
|
|
import { page } from '$app/state';
|
|
|
|
export let routes: App.Route[];
|
|
|
|
function isActive(route: string): boolean {
|
|
if (route === '/') return page.url.pathname === route;
|
|
|
|
return page.url.pathname.split('/')[1] === route.split('/')[1];
|
|
}
|
|
</script>
|
|
|
|
<nav
|
|
class="flex shrink-0 flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:overflow-x-auto not-landscape:px-2 landscape:flex-col landscape:overflow-y-auto landscape:py-2"
|
|
>
|
|
{#each routes as route (route.href)}
|
|
<a class="nav-button {isActive(route.href) ? 'active' : ''}" href={route.href}>
|
|
<div class="p-1">
|
|
<HoverIcon
|
|
src={route.icon}
|
|
class="text-sm uppercase"
|
|
alt={route.label}
|
|
size={32}
|
|
black={!isActive(route.href)}
|
|
/>
|
|
</div>
|
|
<div class="contour">
|
|
{route.label}
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
|
|
<style>
|
|
@import '$src/app.css';
|
|
|
|
.nav-button {
|
|
@apply flex aspect-square shrink-0 flex-col items-center justify-center gap-0.5 p-2 text-slate-950 not-landscape:h-24 hover:bg-emerald-400 landscape:w-24;
|
|
|
|
> .contour {
|
|
@apply rounded-full px-1.5 py-0.5 text-center;
|
|
}
|
|
|
|
&.active {
|
|
@apply bg-emerald-600;
|
|
|
|
> .contour {
|
|
@apply bg-slate-50;
|
|
}
|
|
}
|
|
}
|
|
</style>
|