<div x-data="{ mobileMenuOpen: false }">
    <nav class="tf_nav">
        <div class="tf_nav_container">
            <button class="hamburger-menu" @click="mobileMenuOpen = !mobileMenuOpen">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="3" y1="12" x2="21" y2="12"></line>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <line x1="3" y1="18" x2="21" y2="18"></line>
                </svg>
            </button>
            <a href="#" class="tf_logo">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                </svg>
                <span>ThreeFold</span>
            </a>
            <ul class="tf_menu" :class="{ 'active': mobileMenuOpen }">
                [[navcontent]]
            </ul>    
            {% include 'components/login_lightswitch.html' %}
        </div>
    </nav>

    <div class="mobile-overlay" :class="{ 'active': mobileMenuOpen }" @click="mobileMenuOpen = false"></div>
</div>