<header>
    <div class="main">
        <a href={{ config.base_url }}>{{ config.title }}</a>

        <div class="socials">
            {% for social in config.extra.socials | default(value=[]) %}
            <a rel="me" href="{{ social.url }}" class="social">
                <img alt={{ social.name }} src={{ get_url(path="social_icons/" ~ social.icon ~ ".svg") }}>
            </a>
            {% endfor %}
        </div>
    </div>

    <nav>
        {% for menu in config.extra.menu | default(value=[]) %}
        <a href={{ get_url(path=menu.url) }} style="margin-left: 0.5em">{{ menu.name }}</a>
        {% endfor %}

        {% if config.extra.theme | default(value="toggle") == "toggle" %}
        |<a id="dark-mode-toggle" onclick="toggleTheme(); event.preventDefault();" href="#">
            <img src={{ get_url(path="feather/sun.svg") }} id="sun-icon" style="filter: invert(1);" alt="Light" />
            <img src={{ get_url(path="feather/moon.svg") }} id="moon-icon" alt="Dark" />
        </a>

        <!-- Inititialize the theme toggle icons -->
        <script>updateItemToggleTheme()</script>
        {% endif %}
    </nav>
</header>