ChrQR
7f935758e3
All checks were successful
Vercel Preview Deployment / Deploy-Preview (push) Successful in 2m18s
85 lines
2.3 KiB
Svelte
85 lines
2.3 KiB
Svelte
<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>
|