Fully implement settings

frontend/src/lib/components/Header.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import { link, location } from "svelte-spa-router";
+	import { faGear } from "@fortawesome/free-solid-svg-icons";
+	import Fa from "svelte-fa";
+	import Settings from "./Settings/Settings.svelte";
+	Fa;
 
 	type Link = {
 		label: string;
@@ -38,6 +42,8 @@
 			};
 		});
 	}
+
+	let showModal = true;
 </script>
 
 <header
@@ -75,4 +81,12 @@
 			{/each}
 		</nav>
 	</div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="absolute right-0 pt-4 pb-4 pr-8 pl-8 cursor-pointer" on:click={() => (showModal = true)}>
+		<button>
+			<Fa icon={faGear} scale={2} />
+		</button>
+	</div>
 </header>
+
+<Settings bind:showModal />