AdventureLog/frontend/src/lib/components/Navbar.svelte

<script lang="ts">
	import { enhance } from '$app/forms';
	import { goto } from '$app/navigation';
	export let data: any;
	import type { SubmitFunction } from '@sveltejs/kit';

	import DotsHorizontal from '~icons/mdi/dots-horizontal';
	import WeatherSunny from '~icons/mdi/weather-sunny';
	import WeatherNight from '~icons/mdi/weather-night';
	import Forest from '~icons/mdi/forest';
	import Water from '~icons/mdi/water';
	import AboutModal from './AboutModal.svelte';
	import AccountMultiple from '~icons/mdi/account-multiple';
	import Avatar from './Avatar.svelte';
	import PaletteOutline from '~icons/mdi/palette-outline';
	import { page } from '$app/stores';
	import { t, locale, locales } from 'svelte-i18n';

	let query: string = '';

	let isAboutModalOpen: boolean = false;

	const submitLocaleChange = (event: Event) => {
		const select = event.target as HTMLSelectElement;
		const newLocale = select.value;
		document.cookie = `locale=${newLocale}; path=/`;
		locale.set(newLocale);
		window.location.reload();
	};
	const submitUpdateTheme: SubmitFunction = ({ action }) => {
		const theme = action.searchParams.get('theme');
		console.log('theme', theme);
		if (theme) {
			document.documentElement.setAttribute('data-theme', theme);
		}
	};

	const searchGo = async (e: Event) => {
		e.preventDefault();

		if ($page.url.pathname === '/search') {
			let url = new URL(window.location.href);
			url.searchParams.set('query', query);
			goto(url.toString(), { invalidateAll: true });
		}

		if (query) {
			goto(`/search?query=${query}`);
		}
	};
</script>

{#if isAboutModalOpen}
	<AboutModal on:close={() => (isAboutModalOpen = false)} />
{/if}

<div class="navbar bg-base-100">
	<div class="navbar-start">
		<div class="dropdown">
			<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
				>
			</div>
			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
			<ul
				tabindex="0"
				class="menu dropdown-content mt-3 z-[1] p-2 shadow bg-neutral text-neutral-content rounded-box gap-2 w-96"
			>
				{#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('/users')}>{$t('navbar.users')}</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}

				<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')} />

						<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"
							/>
						</svg>
					</label>
					<button on:click={searchGo} type="submit" class="btn btn-primary"
						>{$t('navbar.search')}</button
					>
				</form>
			</ul>
		</div>
		<a class="btn btn-ghost text-xl" href="/"
			>AdventureLog <img src="/favicon.png" alt="Map Logo" class="w-10" /></a
		>
	</div>
	<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" on:click={() => goto('/adventures')}
						>{$t('navbar.adventures')}</button
					>
				</li>
				<li>
					<button class="btn btn-neutral" on:click={() => goto('/collections')}
						>{$t('navbar.collections')}</button
					>
				</li>
				<li>
					<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}
						>{$t('navbar.worldtravel')}</button
					>
				</li>
				<li>
					<button class="btn btn-neutral" on:click={() => goto('/map')}>{$t('navbar.map')}</button>
				</li>
				<li>
					<button class="btn btn-neutral" 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}

			<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')} />

					<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"
						/>
					</svg>
				</label>
				<button on:click={searchGo} type="submit" class="btn btn-neutral"
					>{$t('navbar.search')}</button
				>
			</form>
		</ul>
	</div>
	<div class="navbar-end">
		{#if data.user}
			<Avatar user={data.user} />
		{/if}
		<div class="dropdown dropdown-bottom dropdown-end">
			<div tabindex="0" role="button" class="btn m-1 ml-4">
				<DotsHorizontal class="w-6 h-6" />
			</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"
			>
				<button class="btn" on:click={() => (isAboutModalOpen = true)}>{$t('navbar.about')}</button>
				<button
					class="btn btn-sm mt-2"
					on:click={() => (window.location.href = 'https://docs.adventurelog.app/')}
					>{$t('navbar.documentation')}</button
				>
				<button
					class="btn btn-sm mt-2"
					on:click={() => (window.location.href = 'https://discord.gg/wRbQ9Egr8C')}
					>{$t('navbar.discord')}</button
				>
				<p class="font-bold m-4 text-lg">{$t('navbar.theme_selection')}</p>
				<form method="POST" use:enhance={submitUpdateTheme}>
					<li>
						<button formaction="/?/setTheme&theme=light"
							>{$t('navbar.themes.light')}<WeatherSunny class="w-6 h-6" />
						</button>
					</li>
					<li>
						<button formaction="/?/setTheme&theme=dark"
							>{$t('navbar.themes.dark')}<WeatherNight class="w-6 h-6" /></button
						>
					</li>
					<li>
						<button formaction="/?/setTheme&theme=night"
							>{$t('navbar.themes.night')}<WeatherNight class="w-6 h-6" /></button
						>
					</li>
					<li>
						<button formaction="/?/setTheme&theme=forest"
							>{$t('navbar.themes.forest')}<Forest class="w-6 h-6" /></button
						>
						<button formaction="/?/setTheme&theme=aestheticLight"
							>{$t('navbar.themes.aestetic-light')}<PaletteOutline class="w-6 h-6" /></button
						>
						<button formaction="/?/setTheme&theme=aestheticDark"
							>{$t('navbar.themes.aestetic-dark')}<PaletteOutline class="w-6 h-6" /></button
						>
						<button formaction="/?/setTheme&theme=aqua"
							>{$t('navbar.themes.aqua')}<Water class="w-6 h-6" /></button
						>
					</li>
					<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}
						>
							{#each $locales as loc}
								<option value={loc} class="text-base-content">{$t(`languages.${loc}`)}</option>
							{/each}
						</select>
						<input type="hidden" name="locale" value={$locale} />
					</form>
				</form>
			</ul>
		</div>
	</div>
</div>