{% set currentUrl %}{{ page.url }}{% endset %}

<nav class="navbar">
    <ul class="nav__menu">
        {% for page in collections.pages %}
            <li>
                <a href="{{ page.url }}" {% if currentUrl === page.url %}aria-current="page"{% endif %}>
                    {{ page.data.title or page.data.metadata.title }}
                </a>
            </li>
        {%- endfor %}
        <li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
    </ul>
</nav>

<style>
    .navbar {
        background: var(--clr-navbar-bg);
        padding: 0 0.6rem;
        width: 100%;
        z-index: 999;
    }

    .navbar a {
        color: var(--clr-navbar-link);
        text-decoration: none;
        cursor: pointer;
    }

    .navbar a:hover {
        color: var(--clr-link-hover);
    }

    .navbar a:focus {
        outline-offset: 0.3em;
        outline: 0.15em solid var(--clr-navbar-link);
    }

    .nav__menu {
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Added to the navbar with JS when it reaches its scroll position */
    .nav--sticky {
        position: fixed;
        width: 100%;
        top: 0;
    }

    /* Add some top padding to the page content to prevent sudden quick movement
    as the navigation bar gets a new position at the top of the page
    (position:fixed and top:0) */
    .nav--sticky + main {
        padding-top: 2rem;
    }
</style>

<script defer>
    // Make the navigation bar sticky
    // const hero = document.querySelector(".hero");
    const navbar = document.querySelector(".navbar");
    window.addEventListener("scroll", () => {
        const scrollPos = window.scrollY || document.documentElement.scrollTop;
        const stickyLine = hero.scrollHeight - navbar.scrollHeight;
        if (scrollPos > stickyLine) {
            navbar.classList.add("nav--sticky");
        } else {
            navbar.classList.remove("nav--sticky");
        }
    });
</script>