<nav class="navbar is-fixed-top is-boxed" role="navigation" aria-label="main navigation" id="main-navbar">
    <input type="checkbox" id="burger-toggle" role="button" class="navbar-toggle" aria-label="menu" aria-expanded="false" data-target="main-menu" />
    <div class="navbar-brand">
        <a href="{{ get_url(path="@/_index.md") }}" class="navbar-item">
            <figure class="image" id="navbar-logo">
                <img src="{{ get_url(path="artwork/logo-teckids-orange.svg") }}" alt="Logo Teckids" />
            </figure>
        </a>

        <label for="burger-toggle" class="navbar-burger">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </label>
    </div>

    <div class="navbar-menu" id="main-menu">
        <div class="navbar-start">
            <div class="navbar-item has-dropdown is-hoverable is-mega">
                <a href="#" class="navbar-item">Projekte</a>
                <div class="navbar-dropdown is-boxed">
                    {% include "menu/projects.html" %}
                </div>
            </div>

            <div class="navbar-item has-dropdown is-hoverable is-mega">
                <a href="#" class="navbar-item">Informationen für…</a>
                <div class="navbar-dropdown is-boxed">
                    {% include "menu/infos.html" %}
                </div>
            </div>

            <div class="navbar-item has-dropdown is-hoverable">
                <a href="#" class="navbar-item">Teckids-Gemeinschaft</a>
                <div class="navbar-dropdown is-boxed">
                    {% include "menu/gemeinschaft.html" %}
                </div>
            </div>

            {% for item in config.extra.main_menu_item %}
                <a href="{{ get_url(path=item.path) }}" class="navbar-item is-hoverable">{{ item.title }}</a>
            {% endfor %}
        </div>
    </div>
</nav>