{{ $menu_classes = switch(
                    (theme:menu_position == 'center') => 'mx-auto',
                    (theme:menu_position == 'right' and theme:logo_position == 'center') => 'ml-auto',
                    (theme:menu_position == 'left' and theme:logo_position == 'center') => 'lg:order-first',
                    (theme:menu_position == 'left' and theme:logo_position != 'center') => 'lg:mr-auto lg:pl-8') }}
<div class="flex flex-row flex-wrap items-center justify-between">
    {{ partial:layout/navigation/logo }}
    <div class="flex flex-row items-center {{ $menu_classes }}" :class="{ 'block shadow-3xl': isMenuOpen }">
        <ul class="flex flex-row w-full divide-primary-200 dark:divide-dark-600 items-center divide-y-0 md:space-x-8">
            {{ nav:navigation include_home="true" }}
                {{ partial:components/menu_item }}
            {{ /nav:navigation }}
        </ul>
    </div>
    <div class="flex flex-row items-center">
        <div class="lg:inline-flex lg:space-x-4 items-center hidden">
        {{if {{usertag:index}} }}
            <form method="POST" action="/logout">
                {{ csrf_field }}
                <a href="login" onclick="event.preventDefault();
                            this.closest('form').submit();" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 border-transparent bg-primary-700 text-white hover:text-primary-700 hover:bg-white hover:border-primary-700 px-4 py-2 text-sm">
                    <span>Se déconnecter</span>
                </a>
            </form>

            <a href="/classement" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 border-transparent bg-primary-700 text-white hover:text-primary-700 hover:bg-white hover:border-primary-700 px-4 py-2 text-sm">
                <span>Classement</span>
            </a>
        {{else}}
            <a href="/login" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 border-transparent bg-primary-700 text-white hover:text-primary-700 hover:bg-white hover:border-primary-700 px-4 py-2 text-sm">
                <span>Se connecter</span>
            </a>

            <a href="/register" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 border-transparent bg-primary-700 text-white hover:text-primary-700 hover:bg-white hover:border-primary-700 px-4 py-2 text-sm">
                <span>S'enregistrer</span>
            </a>
        {{/if}}
        </div>

        {{ if theme:enable_dark_mode }}
            <div class="ml-6">
                {{ partial:partials/theme_toggle }}
            </div>
        {{ /if }}
    </div>
</div>