kinda finished nav
This commit is contained in:
parent
8b60a26b69
commit
ab7edf7454
@ -1,20 +1,50 @@
|
||||
<script>
|
||||
const nav = {
|
||||
|
||||
whoami: ["about", "resume", "homelab"],
|
||||
portfolio: ["project a", "project, b", "project c"],
|
||||
contact: ["get in touch", "socials"],
|
||||
login: []
|
||||
};
|
||||
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 Object.entries(nav) as [main, context]}
|
||||
<li><a href={main}>{main}</a></li>
|
||||
{#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 />
|
Loading…
Reference in New Issue
Block a user