<header id="header" class="bg-blue-600 shadow sticky top-0">
    <div class="container flex justify-between flex-wrap items-center mx-auto p-4 md:flex-row">
        <div class="flex-1 font-mono text-white text-sm tracking-tight overflow-x-auto whitespace-no-wrap py-1">
            <a href="." class="inline-block hover:underline">
                {{ translate('home') }}
            </a>

            {% if path is not null %}
                {% for name, path in breadcrumbs(path) %}
                    / <a href="{{ path }}" class="inline-block hover:underline">{{ name }}</a>
                {% endfor %}
            {% endif %}
        </div>

        <button class="inline-block text-white mx-2 hover:text-gray-400 md:hidden" v-on:click="toggleMenuVisibility">
            <div v-if="menuOpen">
                <i class="fas fa-times fa-lg fa-fw"></i>
            </div>
            <div v-else>
                <i class="fas fa-ellipsis-v fa-lg fa-fw"></i>
            </div>
        </button>

        <div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-2 md:flex md:max-w-xs md:p-0" v-bind:class="menuStyles">
            {% if path and files is not empty and config('zip_downloads') %}
                <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white p-1 hover:text-gray-400">
                    <i class="fas fa-download fa-lg"></i>
                </a>
            {% endif %}

            <div class="flex-1">
                {% include 'components/search.twig' %}
            </div>
        </div>
    </div>
</header>
