<nav class=“menu” id=“menu”>

<div class="menu-container">
    <!-- Header -->
    <div class="menu-header">
        <!-- Title -->
        <div class="menu-title-container">
            <a class="menu-title" href="{{ '/' | prepend: site.baseurl | prepend: site.url }}">
                {{ site.title }}
            </a>
        </div>

        <!-- Menu Dropdown Controls -->
        <div class="menu-dropdown-controls">
            <button class="icon-button show-on-mobile" id="dropdown-toggle">
                <span class="fas fa-bars"></span>
            </button>
        </div>
    </div>

    <!-- Menu Dropdown Content -->
    <div class='menu-dropdown' id='toggled-dropdown'>
        <!-- Menu Links -->
        <ul class="menu-links">
            {%- for link in site.links -%}
                <li>
                    {%- if link.direct -%}
                        <a href="{{ link.url }}">
                            {{ link.text }}
                        </a>
                    {%- else -%}
                        <a href="{{ link.url | prepend: site.baseurl | prepend: site.url }}">
                            {{ link.text }}
                        </a>
                    {%- endif -%}
                </li>
            {%- endfor -%}
        </ul>
    </div>
</div>

</nav>