52 lines
1.6 KiB
Svelte
52 lines
1.6 KiB
Svelte
<script>
|
|
import "../app.css";
|
|
|
|
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>
|
|
<div class="justify-items-center align-middle">
|
|
<ul>
|
|
{#each nav as main,i}
|
|
{#if i != 0}
|
|
<li class="nav-item inline-block"><button class={selected==nav[i] ? "nav-link font-bold 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 class="sub-nav-item inline-block"><a class="sub-nav-link"href={subPage}>{subPage}</a></li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<slot /> |