Enhance user profile and world travel pages with improved UI and functionality

- Updated user profile page to include achievement calculations and enhanced styling for user information and statistics.
- Added icons for better visual representation of user stats and achievements.
- Improved layout for displaying adventures and collections with conditional rendering for empty states.
- Refactored world travel page to include search and filter functionality for cities, with a sidebar for progress and stats.
- Implemented completion percentage and progress bars for visited cities.
- Enhanced map integration with markers for visited and not visited cities, including toggle options for map labels.

frontend/src/lib/components/AdventureModal.svelte

@@ -10,7 +10,6 @@
 	let fullEndDate: string = '';
 	let fullStartDateOnly: string = '';
 	let fullEndDateOnly: string = '';
-	let allDay: boolean = true;
 
 	// Set full start and end dates from collection
 	if (collection && collection.start_date && collection.end_date) {
@@ -626,7 +625,7 @@
 									<p class="text-red-500">{wikiError}</p>
 								</div>
 							</div>
-							{#if adventure.collections && adventure.collections.length == 0}
+							{#if !adventureToEdit || (adventureToEdit.collections && adventureToEdit.collections.length === 0)}
 								<div>
 									<div class="form-control flex items-start mt-1">
 										<label class="label cursor-pointer flex items-start space-x-2">

frontend/src/lib/components/Avatar.svelte

@@ -2,49 +2,179 @@
 	import { goto } from '$app/navigation';
 	import { t } from 'svelte-i18n';
 
+	// Icons
+	import Account from '~icons/mdi/account';
+	import MapMarker from '~icons/mdi/map-marker';
+	import Share from '~icons/mdi/share-variant';
+	import Shield from '~icons/mdi/shield-account';
+	import Settings from '~icons/mdi/cog';
+	import Logout from '~icons/mdi/logout';
+
 	export let user: any;
 
-	let letter: string = user.first_name[0];
+	let letter: string = user.first_name?.[0] || user.username?.[0] || '?';
 
-	if (user && !user.first_name && user.username) {
-		letter = user.username[0];
-	}
+	// Get display name
+	$: displayName = user.first_name
+		? `${user.first_name} ${user.last_name || ''}`.trim()
+		: user.username || 'User';
+
+	// Get initials for fallback
+	$: initials =
+		user.first_name && user.last_name ? `${user.first_name[0]}${user.last_name[0]}` : letter;
+
+	// Menu items for better organization
+	const menuItems = [
+		{
+			path: `/profile/${user.username}`,
+			icon: Account,
+			label: 'navbar.profile',
+			section: 'main'
+		},
+		{
+			path: '/adventures',
+			icon: MapMarker,
+			label: 'navbar.my_adventures',
+			section: 'main'
+		},
+		{
+			path: '/shared',
+			icon: Share,
+			label: 'navbar.shared_with_me',
+			section: 'main'
+		},
+		{
+			path: '/settings',
+			icon: Settings,
+			label: 'navbar.settings',
+			section: 'secondary'
+		}
+	];
+
+	// Add admin item if user is staff
+	$: adminMenuItem = user.is_staff
+		? {
+				path: '/admin',
+				icon: Shield,
+				label: 'navbar.admin_panel',
+				section: 'secondary'
+			}
+		: null;
 </script>
 
-<div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
-	<div class="avatar placeholder">
-		<div class="bg-neutral rounded-full text-neutral-200 w-10 ml-4">
+<div class="dropdown dropdown-bottom dropdown-end z-[100]">
+	<div
+		tabindex="0"
+		role="button"
+		class="btn btn-ghost btn-circle avatar hover:bg-base-200 transition-colors"
+	>
+		<div class="w-10 rounded-full ring-2 ring-primary/20 hover:ring-primary/40 transition-all">
 			{#if user.profile_pic}
-				<img src={user.profile_pic} alt={$t('navbar.profile')} />
+				<img src={user.profile_pic} alt={$t('navbar.profile')} class="rounded-full object-cover" />
 			{:else}
-				<span class="text-2xl -mt-1">{letter}</span>
+				<div
+					class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center text-primary-content font-semibold text-sm"
+				>
+					{initials.toUpperCase()}
+				</div>
 			{/if}
 		</div>
 	</div>
-	<!-- svelte-ignore a11y-missing-attribute -->
+
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<ul
 		tabindex="0"
-		class="dropdown-content z-[999] text-neutral-200 menu p-2 shadow bg-neutral mt-2 rounded-box w-52"
+		class="dropdown-content z-[100] menu p-4 shadow-2xl bg-base-100 border border-base-300 rounded-2xl w-72 mt-2"
 	>
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<p class="text-lg ml-4 font-bold">
-			{$t('navbar.greeting')}, {user.first_name
-				? `${user.first_name} ${user.last_name}`
-				: user.username}
-		</p>
-		<li>
-			<button on:click={() => goto(`/profile/${user.username}`)}>{$t('navbar.profile')}</button>
-		</li>
-		<li><button on:click={() => goto('/adventures')}>{$t('navbar.my_adventures')}</button></li>
-		<li><button on:click={() => goto('/shared')}>{$t('navbar.shared_with_me')}</button></li>
-		{#if user.is_staff}
-			<li><button on:click={() => goto('/admin')}>{$t('navbar.admin_panel')}</button></li>
-		{/if}
-		<li><button on:click={() => goto('/settings')}>{$t('navbar.settings')}</button></li>
-		<form method="post">
-			<li><button formaction="/?/logout">{$t('navbar.logout')}</button></li>
+		<!-- User Info Header -->
+		<div class="px-2 py-3 mb-3 border-b border-base-300">
+			<div class="flex items-center gap-3">
+				<div class="avatar placeholder">
+					<div class="w-12 rounded-full ring-2 ring-primary/20">
+						{#if user.profile_pic}
+							<img
+								src={user.profile_pic}
+								alt={$t('navbar.profile')}
+								class="rounded-full object-cover"
+							/>
+						{:else}
+							<div
+								class="w-12 h-12 bg-gradient-to-br from-primary to-secondary rounded-full flex items-center justify-center text-primary-content font-semibold text-lg"
+								style="line-height: 3rem;"
+							>
+								{initials.toUpperCase()}
+							</div>
+						{/if}
+					</div>
+				</div>
+				<div class="flex-1 min-w-0">
+					<p class="font-semibold text-base text-base-content truncate">
+						{$t('navbar.greeting')}, {displayName}
+					</p>
+					<p class="text-sm text-base-content/60 truncate">
+						@{user.username}
+					</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Main Menu Items -->
+		<div class="space-y-1 mb-3">
+			{#each menuItems.filter((item) => item.section === 'main') as item}
+				<li>
+					<button
+						class="btn btn-ghost justify-start gap-3 w-full text-left rounded-xl hover:bg-base-200"
+						on:click={() => goto(item.path)}
+					>
+						<svelte:component this={item.icon} class="w-5 h-5 text-base-content/70" />
+						<span>{$t(item.label)}</span>
+					</button>
+				</li>
+			{/each}
+		</div>
+
+		<div class="divider my-2"></div>
+
+		<!-- Secondary Menu Items -->
+		<div class="space-y-1 mb-3">
+			{#if adminMenuItem}
+				<li>
+					<button
+						class="btn btn-ghost justify-start gap-3 w-full text-left rounded-xl hover:bg-base-200"
+						on:click={() => goto(adminMenuItem.path)}
+					>
+						<svelte:component this={adminMenuItem.icon} class="w-5 h-5 text-warning" />
+						<span class="text-warning font-medium">{$t(adminMenuItem.label)}</span>
+					</button>
+				</li>
+			{/if}
+
+			{#each menuItems.filter((item) => item.section === 'secondary') as item}
+				<li>
+					<button
+						class="btn btn-ghost justify-start gap-3 w-full text-left rounded-xl hover:bg-base-200"
+						on:click={() => goto(item.path)}
+					>
+						<svelte:component this={item.icon} class="w-5 h-5 text-base-content/70" />
+						<span>{$t(item.label)}</span>
+					</button>
+				</li>
+			{/each}
+		</div>
+
+		<div class="divider my-2"></div>
+
+		<!-- Logout -->
+		<form method="post" class="w-full">
+			<li class="w-full">
+				<button
+					formaction="/?/logout"
+					class="btn btn-ghost justify-start gap-3 w-full text-left rounded-xl hover:bg-error/10 hover:text-error transition-colors"
+				>
+					<Logout class="w-5 h-5" />
+					<span>{$t('navbar.logout')}</span>
+				</button>
+			</li>
 		</form>
 	</ul>
 </div>

frontend/src/lib/components/Navbar.svelte

@@ -13,23 +13,25 @@
 	import Earth from '~icons/mdi/earth';
 	import Magnify from '~icons/mdi/magnify';
 	import Map from '~icons/mdi/map';
+	import Menu from '~icons/mdi/menu';
 	import Avatar from './Avatar.svelte';
 	import { page } from '$app/stores';
 	import { t, locale, locales } from 'svelte-i18n';
 	import { themes } from '$lib';
 	import { onMount } from 'svelte';
-	let inputElement: HTMLInputElement | null = null;
 
+	let inputElement: HTMLInputElement | null = null;
 	let theme = '';
+	let query: string = '';
+	let isAboutModalOpen: boolean = false;
 
 	// Event listener for focusing input
 	function handleKeydown(event: KeyboardEvent) {
-		// Ignore any keypresses in an input/textarea field, so we don't interfere with typing.
 		if (
 			event.key === '/' &&
 			!['INPUT', 'TEXTAREA'].includes((event.target as HTMLElement)?.tagName)
 		) {
-			event.preventDefault(); // Prevent browser's search shortcut
+			event.preventDefault();
 			if (inputElement) {
 				inputElement.focus();
 			}
@@ -37,13 +39,10 @@
 	}
 
 	onMount(() => {
-		// Attach event listener on component mount
 		document.addEventListener('keydown', handleKeydown);
-
 		// @ts-ignore
 		theme = document.documentElement.getAttribute('data-theme');
 
-		// Cleanup event listener on component destruction
 		return () => {
 			document.removeEventListener('keydown', handleKeydown);
 		};
@@ -64,10 +63,6 @@
 		ru: 'Русский'
 	};
 
-	let query: string = '';
-
-	let isAboutModalOpen: boolean = false;
-
 	const submitLocaleChange = (event: Event) => {
 		const select = event.target as HTMLSelectElement;
 		const newLocale = select.value;
@@ -75,6 +70,7 @@
 		locale.set(newLocale);
 		window.location.reload();
 	};
+
 	const submitThemeChange = (event: Event) => {
 		// @ts-ignore
 		const theme = event.target.value;
@@ -83,6 +79,7 @@
 		themeForm.action = `/?/setTheme&theme=${theme}`;
 		themeForm.submit();
 	};
+
 	const submitUpdateTheme: SubmitFunction = ({ action }) => {
 		const theme = action.searchParams.get('theme');
 		if (theme) {
@@ -103,231 +100,246 @@
 			goto(`/search?query=${query}`);
 		}
 	};
+
+	// Navigation items for better organization
+	const navigationItems = [
+		{ path: '/adventures', icon: MapMarker, label: 'navbar.adventures' },
+		{ path: '/collections', icon: FormatListBulletedSquare, label: 'navbar.collections' },
+		{ path: '/worldtravel', icon: Earth, label: 'navbar.worldtravel' },
+		{ path: '/map', icon: Map, label: 'navbar.map' },
+		{ path: '/calendar', icon: Calendar, label: 'navbar.calendar' },
+		{ path: '/users', icon: AccountMultiple, label: 'navbar.users' }
+	];
 </script>
 
 {#if isAboutModalOpen}
 	<AboutModal on:close={() => (isAboutModalOpen = false)} />
 {/if}
 
-<div class="navbar bg-base-100">
+<div class="navbar bg-base-100/95 backdrop-blur-lg border-b border-base-300 top-0 z-[999] relative">
 	<div class="navbar-start">
-		<div class="dropdown z-50">
-			<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-5 w-5"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-					><path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M4 6h16M4 12h8m-8 6h16"
-					/></svg
-				>
+		<!-- Mobile Menu -->
+		<div class="dropdown z-[999]">
+			<div tabindex="0" role="button" class="btn btn-ghost btn-square lg:hidden">
+				<Menu class="h-5 w-5" />
 			</div>
 			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 			<ul
 				tabindex="0"
-				class="menu dropdown-content mt-3 z-[1] p-2 shadow bg-neutral text-base text-neutral-content rounded-box gap-2 w-96"
+				class="menu dropdown-content mt-3 z-[999] p-4 shadow-2xl bg-base-100 border border-base-300 rounded-2xl gap-2 w-80 max-h-[80vh] overflow-y-auto"
 			>
 				{#if data.user}
-					<li>
-						<button on:click={() => goto('/adventures')}>{$t('navbar.adventures')}</button>
-					</li>
-					<li>
-						<button on:click={() => goto('/collections')}>{$t('navbar.collections')}</button>
-					</li>
-					<li>
-						<button on:click={() => goto('/worldtravel')}>{$t('navbar.worldtravel')}</button>
-					</li>
-					<li>
-						<button on:click={() => goto('/map')}>{$t('navbar.map')}</button>
-					</li>
-					<li>
-						<button on:click={() => goto('/calendar')}>{$t('navbar.calendar')}</button>
-					</li>
-					<li>
-						<button on:click={() => goto('/users')}>{$t('navbar.users')}</button>
-					</li>
-				{/if}
-
-				{#if !data.user}
-					<li>
-						<button class="btn btn-primary" on:click={() => goto('/login')}
-							>{$t('auth.login')}</button
+					<!-- Navigation Items -->
+					<div class="mb-4">
+						<h3
+							class="text-sm font-semibold text-base-content/60 uppercase tracking-wide mb-2 px-2"
 						>
-					</li>
-					<li>
-						<button class="btn btn-primary" on:click={() => goto('/signup')}
-							>{$t('auth.signup')}</button
+							Navigation
+						</h3>
+						{#each navigationItems as item}
+							<li>
+								<button
+									class="btn btn-ghost justify-start gap-3 w-full text-left rounded-xl"
+									on:click={() => goto(item.path)}
+									class:btn-active={$page.url.pathname === item.path}
+								>
+									<svelte:component this={item.icon} class="w-5 h-5" />
+									{$t(item.label)}
+								</button>
+							</li>
+						{/each}
+					</div>
+
+					<div class="divider my-2"></div>
+
+					<!-- Search Section -->
+					<div class="mb-4">
+						<h3
+							class="text-sm font-semibold text-base-content/60 uppercase tracking-wide mb-2 px-2"
 						>
-					</li>
-				{/if}
-
-				{#if data.user}
-					<form class="flex gap-2">
-						<label class="input input-bordered flex items-center gap-2">
-							<input type="text" bind:value={query} placeholder={$t('navbar.search')} />
-
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="h-4 w-4 opacity-70"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
-									clip-rule="evenodd"
+							Search
+						</h3>
+						<form class="flex gap-2" on:submit={searchGo}>
+							<label class="input input-bordered flex items-center gap-2 flex-1">
+								<Magnify class="h-4 w-4 opacity-70" />
+								<input
+									type="text"
+									bind:value={query}
+									placeholder={$t('navbar.search')}
+									class="grow"
 								/>
-							</svg>
-						</label>
-						<button on:click={searchGo} type="submit" class="btn btn-primary"
-							>{$t('navbar.search')}</button
-						>
-					</form>
+							</label>
+							<button type="submit" class="btn btn-primary btn-square">
+								<Magnify class="w-4 h-4" />
+							</button>
+						</form>
+					</div>
+				{:else}
+					<!-- Auth Buttons -->
+					<div class="space-y-2">
+						<li>
+							<button class="btn btn-primary w-full" on:click={() => goto('/login')}>
+								{$t('auth.login')}
+							</button>
+						</li>
+						<li>
+							<button class="btn btn-outline w-full" on:click={() => goto('/signup')}>
+								{$t('auth.signup')}
+							</button>
+						</li>
+					</div>
 				{/if}
 			</ul>
 		</div>
-		<a class="btn btn-ghost p-0 text-2xl font-bold tracking-normal" href="/">
-			<span class="sm:inline hidden">AdventureLog</span>
-			<img src="/favicon.png" alt="Map Logo" class="w-10" />
+
+		<!-- Logo -->
+		<a class="btn btn-ghost hover:bg-transparent p-2 text-2xl font-bold tracking-tight" href="/">
+			<div class="flex items-center gap-3">
+				<img src="/favicon.png" alt="AdventureLog" class="w-10 h-10" />
+				<span class="hidden sm:inline mb-1"> AdventureLog </span>
+			</div>
 		</a>
 	</div>
+
+	<!-- Desktop Navigation -->
 	<div class="navbar-center hidden lg:flex">
-		<ul class="menu menu-horizontal px-1 gap-2">
-			{#if data.user}
-				<li>
-					<button
-						class="btn btn-neutral flex items-center gap-1"
-						on:click={() => goto('/adventures')}
-					>
-						<MapMarker class="w-5 h-5" />
-						<span>{$t('navbar.adventures')}</span>
-					</button>
-				</li>
-				<li>
-					<button
-						class="btn btn-neutral flex items-center gap-1"
-						on:click={() => goto('/collections')}
-					>
-						<FormatListBulletedSquare class="w-5 h-5" />
-						{$t('navbar.collections')}</button
-					>
-				</li>
-				<li>
-					<button
-						class="btn btn-neutral flex items-center gap-1"
-						on:click={() => goto('/worldtravel')}
-					>
-						<Earth class="w-5 h-5" />
-						{$t('navbar.worldtravel')}
-					</button>
-				</li>
-				<li>
-					<button class="btn btn-neutral flex items-center gap-1" on:click={() => goto('/map')}>
-						<Map class="w-5 h-5" />
-					</button>
-				</li>
-				<li>
-					<button class="btn btn-neutral flex items-center gap-1" on:click={() => goto('/calendar')}
-						><Calendar /></button
-					>
-				</li>
-				<li>
-					<button class="btn btn-neutral flex items-center gap-1" on:click={() => goto('/users')}
-						><AccountMultiple /></button
-					>
-				</li>
-			{/if}
-
-			{#if !data.user}
-				<li>
-					<button class="btn btn-primary" on:click={() => goto('/login')}>{$t('auth.login')}</button
-					>
-				</li>
-				<li>
-					<button class="btn btn-primary" on:click={() => goto('/signup')}
-						>{$t('auth.signup')}</button
-					>
-				</li>
-			{/if}
-
-			{#if data.user}
-				<form class="flex gap-2">
-					<label class="input input-bordered flex items-center gap-2">
-						<input
-							type="text"
-							bind:value={query}
-							class="grow"
-							placeholder={$t('navbar.search')}
-							bind:this={inputElement}
-						/><kbd class="kbd">/</kbd>
-					</label>
-					<button on:click={searchGo} type="submit" class="btn btn-neutral flex items-center gap-1">
-						<Magnify class="w-5 h-5" />
-					</button>
-				</form>
-			{/if}
-		</ul>
+		{#if data.user}
+			<ul class="menu menu-horizontal gap-1">
+				{#each navigationItems as item}
+					<li>
+						<button
+							class="btn btn-ghost gap-2 rounded-xl transition-all duration-200 hover:bg-base-200"
+							class:bg-primary-10={$page.url.pathname === item.path}
+							class:text-primary={$page.url.pathname === item.path}
+							on:click={() => goto(item.path)}
+						>
+							<svelte:component this={item.icon} class="w-4 h-4" />
+							<span class="hidden xl:inline">{$t(item.label)}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
 	</div>
-	<div class="navbar-end">
+
+	<div class="navbar-end gap-3">
+		<!-- Desktop Search -->
+		{#if data.user}
+			<form class="hidden lg:flex gap-2" on:submit={searchGo}>
+				<label
+					class="input input-bordered input-sm flex items-center gap-2 w-64 focus-within:w-80 transition-all duration-300"
+				>
+					<input
+						type="text"
+						bind:value={query}
+						class="grow"
+						placeholder={$t('navbar.search')}
+						bind:this={inputElement}
+					/>
+					<kbd class="kbd kbd-xs opacity-60">/</kbd>
+				</label>
+				<button type="submit" class="btn btn-ghost btn-sm btn-square">
+					<Magnify class="w-4 h-4" />
+				</button>
+			</form>
+		{/if}
+
+		<!-- Auth Buttons (Desktop) -->
+		{#if !data.user}
+			<div class="hidden lg:flex gap-2">
+				<button class="btn btn-primary btn-sm" on:click={() => goto('/login')}>
+					{$t('auth.login')}
+				</button>
+				<button class="btn btn-neutral btn-sm" on:click={() => goto('/signup')}>
+					{$t('auth.signup')}
+				</button>
+			</div>
+		{/if}
+
+		<!-- User Avatar -->
 		{#if data.user}
 			<Avatar user={data.user} />
 		{/if}
+
+		<!-- Settings Dropdown -->
 		<div class="dropdown dropdown-bottom dropdown-end z-[999]">
-			<div tabindex="0" role="button" class="btn m-1 p-2">
-				<DotsHorizontal class="w-6 h-6" />
+			<div tabindex="0" role="button" class="btn btn-ghost btn-sm btn-square">
+				<DotsHorizontal class="w-5 h-5" />
 			</div>
 			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 			<ul
 				tabindex="0"
-				class="dropdown-content bg-neutral text-neutral-content z-[1] menu p-2 shadow rounded-box w-52"
+				class="dropdown-content bg-base-100 border border-base-300 shadow-2xl z-[999] menu p-4 rounded-2xl w-80"
 			>
-				<button class="btn" on:click={() => (isAboutModalOpen = true)}>{$t('navbar.about')}</button>
-				<button
-					class="btn btn-sm mt-2"
-					on:click={() => (window.location.href = 'https://adventurelog.app')}
-					>{$t('navbar.documentation')}</button
-				>
-				<button
-					class="btn btn-sm mt-2"
-					on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}>Discord</button
-				>
-				<button
-					class="btn btn-sm mt-2"
-					on:click={() => (window.location.href = 'https://seanmorley.com/sponsor')}
-					>{$t('navbar.support')} 💖</button
-				>
-				<p class="font-bold m-4 text-lg text-center">{$t('navbar.language_selection')}</p>
-				<form method="POST" use:enhance>
-					<select
-						class="select select-bordered w-full max-w-xs bg-base-100 text-base-content"
-						on:change={submitLocaleChange}
-						bind:value={$locale}
+				<!-- Quick Actions -->
+				<div class="space-y-2 mb-4">
+					<button
+						class="btn btn-ghost w-full justify-start gap-3"
+						on:click={() => (isAboutModalOpen = true)}
 					>
-						{#each $locales as loc (loc)}
-							<option value={loc} class="text-base-content">{languages[loc]}</option>
-						{/each}
-					</select>
-					<input type="hidden" name="locale" value={$locale} />
-				</form>
-				<p class="font-bold m-4 text-lg text-center">{$t('navbar.theme_selection')}</p>
-				<form method="POST" use:enhance={submitUpdateTheme}>
-					<select
-						class="select select-bordered w-full max-w-xs bg-base-100 text-base-content"
-						bind:value={theme}
-						on:change={submitThemeChange}
+						{$t('navbar.about')}
+					</button>
+					<button
+						class="btn btn-ghost w-full justify-start gap-3"
+						on:click={() => (window.location.href = 'https://adventurelog.app')}
 					>
-						{#each themes as theme}
-							<option value={theme.name} class="text-base-content"
-								>{$t(`navbar.themes.${theme.name}`)}</option
-							>
-						{/each}
-					</select>
-				</form>
+						{$t('navbar.documentation')}
+					</button>
+					<button
+						class="btn btn-ghost w-full justify-start gap-3"
+						on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}
+					>
+						Discord
+					</button>
+					<button
+						class="btn btn-ghost w-full justify-start gap-3"
+						on:click={() => (window.location.href = 'https://seanmorley.com/sponsor')}
+					>
+						{$t('navbar.support')} 💖
+					</button>
+				</div>
+
+				<div class="divider my-3"></div>
+
+				<!-- Language Selection -->
+				<div class="mb-4">
+					<h3 class="font-semibold text-sm text-base-content/70 mb-3 flex items-center gap-2">
+						<Earth class="w-4 h-4" />
+						{$t('navbar.language_selection')}
+					</h3>
+					<form method="POST" use:enhance>
+						<select
+							class="select select-bordered select-sm w-full bg-base-100"
+							on:change={submitLocaleChange}
+							bind:value={$locale}
+						>
+							{#each $locales as loc (loc)}
+								<option value={loc}>{languages[loc]}</option>
+							{/each}
+						</select>
+						<input type="hidden" name="locale" value={$locale} />
+					</form>
+				</div>
+
+				<!-- Theme Selection -->
+				<div>
+					<h3 class="font-semibold text-sm text-base-content/70 mb-3">
+						{$t('navbar.theme_selection')}
+					</h3>
+					<form method="POST" use:enhance={submitUpdateTheme}>
+						<select
+							class="select select-bordered select-sm w-full bg-base-100"
+							bind:value={theme}
+							on:change={submitThemeChange}
+						>
+							{#each themes as themeOption}
+								<option value={themeOption.name}>
+									{$t(`navbar.themes.${themeOption.name}`)}
+								</option>
+							{/each}
+						</select>
+					</form>
+				</div>
 			</ul>
 		</div>
 	</div>