<script lang="ts">
    let menuOpen: boolean = false;

    function toggleMenu(): void {
        menuOpen = !menuOpen;
    }

    function closeMenu(): void {
        menuOpen = false;
    }
</script>

<header>
    <div class="header-top">
        <h1>Filip Wandzio</h1>
        <button
            class="menu-toggle"
            on:click={toggleMenu}
            aria-expanded={menuOpen}
            aria-controls="main-nav"
        >
            {#if menuOpen}
                ✕ <span class="sr-only">Close menu</span>
            {:else}
                ☰ <span class="sr-only">Open menu</span>
            {/if}
        </button>
    </div>

    <nav id="main-nav" aria-label="Main navigation">
        <ul class:open={menuOpen}>
            <li><a href="#about" on:click={closeMenu}>About</a></li>
            <li><a href="#projects" on:click={closeMenu}>Projects</a></li>
            <li><a href="#research" on:click={closeMenu}>Research</a></li>
            <li><a href="#contact" on:click={closeMenu}>Contact</a></li>
        </ul>
    </nav>
</header>
