move dark mode switch to navbar, update layout

src/lib/components/Burger.svelte

@@ -6,28 +6,26 @@
 <button
 	aria-label="menu-button"
 	class:isOpen
-	class="z-50 flex h-10 w-10 cursor-pointer flex-col items-center justify-center rounded-sm border-none p-2 text-center text-white focus:outline-none focus-visible:border-2 focus-visible:border-primary-400 active:text-primary-300"
+	class="relative z-50 flex h-8 w-10 cursor-pointer flex-col items-center justify-center border-none text-center text-white hover:border-primary-400 focus:outline-none focus-visible:border-2 focus-visible:border-primary-400 active:text-primary-300"
 	on:click={() => (isOpen = !isOpen)}
 >
-	<div class="absolute right-10 block -translate-y-1 transform">
-		<span
-			aria-hidden="true"
-			class="absolute block h-0.5 w-6 transform bg-current transition duration-500 ease-in-out"
-			class:rotate-45={isOpen}
-			class:-translate-y-2={!isOpen}
-		>
-		</span>
-		<span
-			aria-hidden="true"
-			class="absolute block h-0.5 w-6 transform bg-current transition duration-500 ease-in-out"
-			class:opacity-0={isOpen}
-		></span>
-		<span
-			aria-hidden="true"
-			class="absolute block h-0.5 w-6 transform bg-current transition duration-500 ease-in-out"
-			class:-rotate-45={isOpen}
-			class:translate-y-2={!isOpen}
-		></span>
-	</div>
+	<span
+		aria-hidden="true"
+		class="absolute block h-0.5 w-10 transform bg-current transition duration-500 ease-in-out"
+		class:rotate-45={isOpen}
+		class:-translate-y-2={!isOpen}
+	>
+	</span>
+	<span
+		aria-hidden="true"
+		class="absolute block h-0.5 w-10 transform bg-current transition duration-500 ease-in-out"
+		class:opacity-0={isOpen}
+	></span>
+	<span
+		aria-hidden="true"
+		class="absolute block h-0.5 w-10 transform bg-current transition duration-500 ease-in-out"
+		class:-rotate-45={isOpen}
+		class:translate-y-2={!isOpen}
+	></span>
 	<span class="sr-only">{isOpen ? 'Close Menu' : 'Open Menu'}</span>
 </button>

src/lib/components/Footer.svelte

@@ -2,8 +2,10 @@
 	export let segment: string
 </script>
 
-<footer class="w-full justify-between text-center indent-4 text-xs md:flex md:py-5 md:text-base">
-	<div>
+<footer
+	class="flex w-full flex-col-reverse justify-between text-center indent-4 text-xs md:flex-row md:py-5 xl:text-base"
+>
+	<div class="my-5 md:my-0">
 		&copy; {new Date().getFullYear()} Michael Schauer. Design & Development by
 		<a
 			class="link"
@@ -13,7 +15,7 @@
 			>Laura A. Redeker
 		</a>
 	</div>
-	<div class="my-5 md:my-0 md:text-right">
+	<div class="md:text-right">
 		<a
 			class={`link mr-4 ${
 				segment === '/privacy-policy' ? 'text-primary-200 underline underline-offset-4' : ''

src/lib/components/Navbar.svelte

@@ -1,25 +1,44 @@
 <script lang="ts">
 	import Burger from '$lib/components/Burger.svelte'
 	import Logo from '$lib/assets/logo.svg'
+	import Moon from '$lib/assets/icon-moon.svg'
+	import Sun from '$lib/assets/icon-sun.svg'
 	import routes from '$lib/NavRoutes'
+	import { LightBackground, DarkBackground } from '$lib/Constants'
+	import { customBackground } from '$lib/store'
 
 	let isOpened = false
 	export let segment: string
 
-	$: menuClasses = `fixed top-0 flex h-screen w-screen flex-col items-center justify-center bg-black bg-opacity-70 backdrop-blur-lg transition-all duration-700
-		${isOpened ? 'left-0 opacity-100' : '-left-[100%] opacity-0'}`
+	$: isDark = true
+	$: menuClasses = `fixed top-0 h-screen w-screen flex flex-col items-center justify-center bg-black bg-opacity-70 backdrop-blur-lg transition-all duration-700
+		${isOpened ? 'opacity-100 z-40 display-block' : 'hidden'}`
 </script>
 
-<nav class="max-w-screen-3xl fixed top-0 z-50 mx-auto w-full indent-0">
-	<div class="absolute z-50 flex w-full flex-row justify-between px-3 py-3">
+<nav class="max-w-screen-3xl fixed top-0 z-40 mx-auto w-full indent-0">
+	<div class="absolute z-50 flex w-full flex-row justify-between px-2 py-3 pr-4">
 		<a href="/">
 			<img
 				src={Logo}
 				alt="Michael Schauer Logo"
 				class="size-8"
 			/>
 		</a>
-		<div>
+		<div class="grid grid-cols-2 gap-x-3">
+			<button
+				class="flex w-auto items-center justify-center"
+				on:click={() => {
+					isDark ? customBackground.set(LightBackground) : customBackground.set(DarkBackground)
+					isDark = !isDark
+				}}
+			>
+				<img
+					src={isDark ? Moon : Sun}
+					alt={isDark ? 'turn on the light' : 'make it dark'}
+					class="size-6"
+				/>
+			</button>
+
 			<Burger bind:isOpen={isOpened} />
 		</div>
 	</div>