Сделал панель навигации с ссылками-заглушками

src/lib/components/NavBar.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import HoverIcon from '$lib/components/HoverIcon.svelte';
+	import { page } from '$app/state';
+
+	export let routes: App.Route[];
+	export let isVertical: boolean = false;
+</script>
+
+<nav
+	class="flex flex-row gap-2 bg-slate-100 not-landscape:justify-around not-landscape:px-2 landscape:flex-col landscape:py-2"
+>
+	{#each routes as route (route.href)}
+		<a class="nav-button {page.url.pathname === route.href ? 'active' : ''}" href={route.href}>
+			<div class="p-1">
+				<HoverIcon
+					src={route.icon}
+					class="text-sm uppercase"
+					text={route.href}
+					size={32}
+					black={page.url.pathname !== route.href}
+				/>
+			</div>
+			<div class="contour">
+				{route.label}
+			</div>
+		</a>
+	{/each}
+</nav>
+
+<style>
+	@import '$src/app.css';
+
+	.nav-button {
+		@apply flex aspect-square 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 bg-slate-50 px-1.5 py-0.5 text-center;
+		}
+
+		&.active {
+			@apply bg-emerald-600;
+		}
+	}
+</style>