<script>
	import { blur } from 'svelte/transition';
	import '../app.css';
	import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
	import { DarkMode } from 'flowbite-svelte';

	// Navigation links are generated based on this object
	const nav = [
		{
			name: 'index',
			subPages: []
		},
		{
			name: 'whoami',
			subPages: ['about', 'resume']
		},
		{
			name: 'portfolio',
			subPages: ['learnings', 'svelte', 'next.js', 'homelab']
		},
		{
			name: 'contact',
			subPages: ['get_in_touch', 'socials']
		}
	];

	let selected = nav[0]; // keep track of the selected 'page' object.
	let intSelected = 0; // selected page index

	// change the selected component (the event.originalTarget.id is not accessible in Chrome so switched to event.srcElement.id)
	function changeComponent(event) {
		selected = nav[event.srcElement.id];
		intSelected = event.srcElement.id;
	}
</script>

<CloudflareAnalytics />
<nav class="nav-container h-32 w-full mt-12">
	<ul class="text-center">
		{#each nav as main, i}
			{#if i != 0}
				{#if !nav[i].subPages[0]}
					<li class="nav-item font-jose inline-block">
						<a
							href={main.name}
							class={selected == nav[i]
								? 'nav-link text-2xl p-3 hover:text-slate-400'
								: 'nav-link text-2xl p-3 hover:text-slate-400'}
							on:click={changeComponent}
							id={i}>{main.name}</a
						>
					</li>
				{:else}
					<li class="nav-item font-jose inline-block hover:text-slate-400">
						<button
							class={selected == nav[i] ? 'nav-link text-2xl p-3' : 'nav link text-2xl p-3'}
							on:click={changeComponent}
							id={i}>{main.name}</button
						>
					</li>
				{/if}
			{/if}
		{/each}
	</ul>
	<hr class="nav-divider max-w-xl border-1 mx-auto rounded border-slate-400" />
	{#key selected}
		<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
			{#each selected.subPages as subPage}
				<li class="sub-nav-item inline-block font-jose hover:text-slate-400">
					<a class="sub-nav-link text-xl p-2" href={subPage}>{subPage.replace(/_/g, ' ')}</a>
				</li>
			{/each}
		</ul>
	{/key}
	<div class="absolute top-2 md:top-6 right-2 md:right-6">
		<DarkMode />
	</div>
</nav>
<div class="mt-6 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
	<slot />
</div>
<footer class="mt-12">
	<p class="text-sm text-gray-400">built by christian rannes 2024</p>
</footer>
