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

<script>
	import { writable } from "svelte/store";
    
    const nav = [
        {
            name: "index",
            subPages: [],
        },
        {
            name: "whoami",
            subPages: ["about", "resume", "homelab"],
        },
        {
            name: "portfolio",
            subPages: ["project a", "project, b", "project c"],
        },
        {
            name: "contact",
            subPages: ["get in touch", "socials"],
        },
        {
            name: "login",
            subPages: []
        }
    ];

    let selected = nav[0];	// keep track of the selected 'page' object (default to the about component since we must have local db connection established first)
    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>
    <ul>
        {#each nav as main,i}
            {#if i != 0}
                <li><button class={selected==i ? "nav-link active p-2 ml-1" : "p-2 ml-1 nav-link"} on:click={changeComponent} id={i} >{main.name}</button></li>
            {/if}     
        {/each}
        <hr />
        {#each selected.subPages as subPage}
            <li><a href={subPage}>{subPage}</a></li>
        {/each}
    </ul>
</nav>
<slot />