homepage/templates/_navbar.html

<nav class="flex flex-row place-content-around lg:px-12 md:h-14 bg-overlay-dark text-text-dark">
    <div class="basis-1/6 flex flex-row items-center">
        <a href="/" class="flex flex-row items-center p-0">
            <img src="/assets/logo.png" alt="logo.png" class="size-16 p-2">
            <h2 class="max-md:hidden">Viyurz</h2>
        </a>
    </div>
    <div
        class="basis-3/6 flex flex-col md:flex-row place-content-center place-items-center max-md:p-2 max-md:space-y-2 md:space-x-10">
        <h2><a class="{% if title == 'Home' %} active-page {% endif %}" href="/">Home</a></h2>
        <h2><a class="{% if title == 'Services' %} active-page {% endif %}" href="/services">Services</a></h2>
        <h2><a href="https://status.viyurz.fr/" target="_blank">Status</a></h2>
        <h2><a href="https://kc.viyurz.fr/" target="_blank">Account</a></h2>
    </div>
    <div class="basis-1/6 flex flex-row justify-end items-center">
        <div class="flex items-center z-30"></div>
        <svg class="h-5 w-5 mr-2 text-surface" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
        <div class="relative inline-block w-10 select-none">
            <input type="checkbox" name="toggleTheme" id="toggleTheme"
                class="transition-transform transform translate-x-0 duration-300 theme-switch absolute block w-4 h-4 rounded-full bg-overlay appearance-none cursor-pointer mx-1 my-1">
            <label for="toggleTheme"
                class="theme-switch-label block overflow-hidden w-12 h-6 rounded-full bg-surface cursor-pointer"></label>
        </div>
        <svg class="h-5 w-5 ml-4 text-turquoise" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
    </div>
    <div class="hidden relative inline-block opacity-10">
        <div>
            <button type="button"
                class="md:before:content-['Language'] inline-flex w-full justify-center gap-x-1.5 px-3 py-2"
                id="menu-button" aria-expanded="true" aria-haspopup="true">
                <svg class="-mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd"
                        d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                        clip-rule="evenodd" />
                </svg>
            </button>
        </div>
        <div class="hidden absolute right-0 z-10 mt-2 text-right origin-top-right rounded-lg border border-overlay dark:border-overlay-dark bg-surface dark:bg-surface-dark focus:outline-none"
            role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
            <div class="py-1" role="none">
                <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1"
                    id="menu-item-0">English</a>
                <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1"
                    id="menu-item-1">Français</a>
            </div>
        </div>
    </div>

    </div>
</nav>