---
import type Page from "../types/page.ts"

const sections: Array<Page> = [
    { title: "Home", id: "home", icon: "home" },
    { title: "Projects", id: "projects", icon: "build" },
    { title: "Hire", id: "hire", icon: "person" },
]
---

<mdui-navigation-bar value="home" label-visibility="labeled">
    {
        sections.map((section) => (
            <mdui-navigation-bar-item
                icon={section.icon}
                value={section.id}
                href={`#${section.id}`}
            >
                {section.title}
            </mdui-navigation-bar-item>
        ))
    }
</mdui-navigation-bar>

<script is:inline define:vars={{ sections }}>
    document.addEventListener("scroll", () =>
        sections.forEach(({ id }) => {
            const rect = document.getElementById(id).getBoundingClientRect()
            if (rect.bottom < window.innerHeight || rect.top < 200)
                document.querySelector("mdui-navigation-bar").value = id
        })
    )
</script>
