about page progress

website/src/lib/components/Nav.svelte

@@ -1,67 +1,29 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import Logo from '$lib/components/Logo.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import * as Select from '$lib/components/ui/select';
-	import { languages } from '$lib/languages';
-	import { BookOpenText, Info, Languages, Map } from 'lucide-svelte';
-	import { _, locale } from 'svelte-i18n';
-
-	let selected = {
-		value: '',
-		label: ''
-	};
-
-	$: if ($locale) {
-		selected = {
-			value: $locale,
-			label: languages[$locale]
-		};
-	}
-
-	function getURLForLanguage(lang?: string): string {
-		let currentPath = window.location.pathname;
-		let currentPathArray = currentPath.split('/');
-
-		if (currentPathArray.length > 1 && languages.hasOwnProperty(currentPathArray[1])) {
-			currentPathArray.splice(1, 1);
-		}
-
-		if (lang !== undefined && lang !== 'en') {
-			currentPathArray.splice(1, 0, lang);
-		}
-
-		return currentPathArray.join('/');
-	}
+	import ModeSwitch from '$lib/components/ModeSwitch.svelte';
+	import { BookOpenText, Info, Map } from 'lucide-svelte';
+	import { _ } from 'svelte-i18n';
 </script>
 
-<nav class="w-full sticky top-0 bg-background">
-	<div class="mx-6 py-2 flex flex-row items-center border-b">
-		<a href="./">
-			<Logo class="h-6" />
+<nav class="w-full sticky top-0 bg-background z-10">
+	<div class="mx-6 py-2 flex flex-row items-center border-b gap-4 md:gap-8">
+		<a href="./" class="shrink-0">
+			<Logo class="h-8 sm:hidden" iconOnly={true} />
+			<Logo class="h-7 hidden sm:block" />
 		</a>
-		<Button variant="link" class="text-base" href="./">
+		<Button variant="link" class="text-base px-0" href="./">
 			<Map size="18" class="mr-1.5" />
-			{$_('menu.app')}
+			{$_('homepage.app')}
 		</Button>
-		<Button variant="link" class="text-base" href="./about">
+		<Button variant="link" class="text-base px-0" href="./about">
 			<Info size="18" class="mr-1.5" />
 			{$_('menu.about')}
 		</Button>
-		<Button variant="link" class="text-base" href="./documentation">
+		<Button variant="link" class="text-base px-0" href="./documentation">
 			<BookOpenText size="18" class="mr-1.5" />
-			{$_('menu.documentation')}
+			{$_('homepage.documentation')}
 		</Button>
-		<Select.Root bind:selected onSelectedChange={(s) => goto(getURLForLanguage(s?.value))}>
-			<Select.Trigger class="w-[180px] ml-auto">
-				<Languages size="16" />
-				<Select.Value class="ml-2 mr-auto" />
-			</Select.Trigger>
-			<Select.Content>
-				{#each Object.entries(languages) as [key, value]}
-					<Select.Item value={key}>{value}</Select.Item>
-				{/each}
-			</Select.Content>
-		</Select.Root>
+		<ModeSwitch class="ml-auto" />
 	</div>
 </nav>