From 36229adc78508a87358bc93add50a91212cc9151 Mon Sep 17 00:00:00 2001
From: zalnars <53659756+zalnaRs@users.noreply.github.com>
Date: Wed, 9 Aug 2023 19:23:03 +0200
Subject: [PATCH] feat: add skip navigation button (#140)

Co-authored-by: afn <hey@afn.im>
---
 src/layout/Navbar/NavHost.svelte | 19 +++++++++++++++++++
 src/routes/+layout.svelte        | 12 +++++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index eb934b5..cb5deca 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -51,6 +51,8 @@
 <svelte:window bind:scrollY={y} />
 
 <nav class:scrolled={y > 10}>
+	<a class="menu-btn skiptab-btn" href="#skiptab">Skip navigation</a>
+
 	<button
 		class="menu-btn mobile-only"
 		on:click={() => (menuOpen = !menuOpen)}
@@ -321,4 +323,21 @@
 	.menu-btn.open .menu-btn__burger::after {
 		transform: rotate(-45deg) translate(10px, 10px);
 	}
+
+	.skiptab-btn {
+		position: fixed;
+		left: -300px;
+		border-radius: 100px;
+		text-decoration: none;
+		background-color: var(--accent-color);
+		z-index: 10;
+		color: var(--grey-four);
+		font-weight: 600;
+		font-size: 0.95rem;
+		padding: 16px 24px;
+	}
+
+	.skiptab-btn:focus {
+		left: 12px;
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 12a6393..0f3a0d2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -105,10 +105,12 @@
 		</svelte:fragment>
 	</Dialogue>
 
-	{#if $show_loading_animation}
-		<Spinner />
-	{:else}
-		<slot />
-	{/if}
+	<div id="skiptab">
+		{#if $show_loading_animation}
+			<Spinner />
+		{:else}
+			<slot />
+		{/if}
+	</div>
 	<!-- <Footer> -->
 </QueryClientProvider>