kinda finished nav

This commit is contained in:
ChrQR 2024-04-04 23:38:25 +02:00
parent 8b60a26b69
commit ab7edf7454

View File

@ -1,20 +1,50 @@
<script> <script>
const nav = { import { writable } from "svelte/store";
whoami: ["about", "resume", "homelab"], const nav = [
portfolio: ["project a", "project, b", "project c"], {
contact: ["get in touch", "socials"], name: "index",
login: [] 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> </script>
<nav> <nav>
<ul> <ul>
{#each Object.entries(nav) as [main, context]} {#each nav as main,i}
<li><a href={main}>{main}</a></li> {#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} {/each}
<hr /> <hr />
{#each selected.subPages as subPage}
<li><a href={subPage}>{subPage}</a></li>
{/each}
</ul> </ul>
</nav> </nav>
<slot /> <slot />