{{define "nav.html"}}
<nav class="site-nav">
    <div class="site-nav__inner">
        <a href="/" class="site-nav__brand">
            <span class="site-nav__brand-mark">&gt;</span>
            <span>skillf</span>
        </a>

        <div class="site-nav__menu">
            <a href="/convert">Import</a>
            <a href="/merge">Merge</a>
            <a href="/ssh">Terminal</a>
        </div>

        <button type="button" id="mobile-menu-toggle" class="site-nav__toggle">Menu</button>
    </div>

    <div id="mobile-menu" class="site-nav__mobile">
        <a href="/convert">Import</a>
        <a href="/merge">Merge</a>
        <a href="/ssh">Terminal</a>
    </div>
</nav>

<script>
(function() {
    const button = document.getElementById('mobile-menu-toggle');
    const menu = document.getElementById('mobile-menu');
    if (!button || !menu) {
        return;
    }

    button.addEventListener('click', function() {
        menu.classList.toggle('is-open');
    });
})();
</script>
{{end}}