2024-04-03 21:04:00 +00:00
< script >
2024-04-05 18:42:45 +00:00
import "../app.css";
2024-04-04 21:38:25 +00:00
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: []
}
];
2024-04-03 21:04:00 +00:00
2024-04-04 21:38:25 +00:00
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;
}
2024-04-03 21:04:00 +00:00
< / script >
< nav >
2024-04-05 19:21:04 +00:00
< 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 >
2024-04-03 21:04:00 +00:00
< / nav >
< slot / >