my-portfolio/src/routes/+layout.svelte

<script>
	import { blur, fade } from "svelte/transition";
    import "../app.css";
    import ThemeSwitch from '$lib/ThemeSwitch.svelte';
    import '../app.css';


    // Navigation links are generated based on this object
    const nav = [
        {
            name: "index",
            subPages: [],
        },
        {
            name: "whoami",
            subPages: ["about", "resume"],
        },
        {
            name: "portfolio",
            subPages: ["learnings", "portfolio_project", "next.js_weather", "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>

<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" : "nav link text-2xl p-3"} on:click={changeComponent} id={i} >{main.name}</a></li>
                {:else}
                    <li class="nav-item font-jose inline-block"><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 h-0.5 border-0 mx-auto bg-black rounded dark:bg-stone-100"/>
    {#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"><a class="sub-nav-link text-xl p-2"href={(subPage)}>{subPage.replace(/_/g, ' ')}</a></li>   
            {/each}

        </ul>
    {/key}
    <li><ThemeSwitch class=""/></li>
</nav>
<div class="container text-center w-3/4 mx-auto">
    <slot />
</div>
<footer class="mt-12"> 
    <p class="text-sm text-gray-400">built and hosted by christian rannes 2024</p>
</footer>