---
const links = [
    { href: '/utenti', text: 'Utenti' },
    // { href: '/macchinisti', text: 'Macchinisti' },
    // { href: '/appunti', text: 'Appunti' },
    { href: '/notizie', text: 'Notizie' },
    { href: '/guide', text: 'Guide' },
    { href: '/storia', text: 'Storia' },
    // { href: '/login', text: 'Login' },
]
---

<header>
    <!-- main logo on the left -->
    <a href="/" class="logo">
        <img src="/images/phc-logo-2024-11@x8.png" alt="phc logo" />
    </a>

    <!-- hidden checkbox for mobile js-less sidebar interaction -->
    <input type="checkbox" id="header-menu-toggle" />

    <!-- desktop navbar links -->
    <div class="links desktop-only">
        {
            links.map(link => (
                <a role="button" href={link.href}>
                    {link.text}
                </a>
            ))
        }
    </div>

    <!-- sidebar menu for mobile -->
    <div class="mobile-only">
        <label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
            <span class="material-symbols-outlined">menu</span>
        </label>
        <label id="header-menu-toggle-close" role="button" class="flat icon" for="header-menu-toggle">
            <span class="material-symbols-outlined">close</span>
        </label>
    </div>

    <!-- sidebar menu only visible on mobile when #header-menu-toggle is checked -->
    <div class="side-menu">
        <div class="links">
            {
                links.map(link => (
                    <a role="button" href={link.href}>
                        {link.text}
                    </a>
                ))
            }
        </div>
    </div>
</header>