<nav class="bg-[color:var(--color-primary)] text-[color:var(--color-primary-contrast)] shadow-sm">
    <div class="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">

        <!-- Logo -->
        <a href="{% url 'home' %}" class="text-xl font-semibold tracking-tight">
            MTDify Local
        </a>

        <!-- Desktop Menu -->
        <div class="hidden md:flex items-center space-x-8 text-sm font-medium">

            <a href="{% url 'home' %}" class="hover:text-[color:var(--color-accent)]">Home</a>
            <a href="{% url 'dashboard' %}" class="hover:text-[color:var(--color-accent)]">Dashboard</a>
            <a href="{% url 'businesses:business_list' %}" class="hover:text-[color:var(--color-accent)]">Business</a>
            <a href="{% url 'bookkeeping:income_list' %}" class="hover:text-[color:var(--color-accent)]">Income</a>
            <a href="{% url 'bookkeeping:expense_list' %}" class="hover:text-[color:var(--color-accent)]">Expenses</a>
            

        </div>

        <!-- Mobile Hamburger -->
        <button id="mobile-menu-toggle"
            class="md:hidden text-2xl focus:outline-none">
            ☰
        </button>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden md:hidden bg-[color:var(--color-primary)] px-6 pb-4 space-y-2">

        <a href="{% url 'home' %}" class="block py-2 text-sm hover:text-[color:var(--color-accent)]">Home</a>
        <a href="{% url 'dashboard' %}" class="block py-2 text-sm hover:text-[color:var(--color-accent)]">Dashboard</a>
        <a href="{% url 'businesses:business_list' %}" class="block py-2 text-sm hover:text-[color:var(--color-accent)]">Business</a>
        <a href="{% url 'bookkeeping:income_list' %}" class="block py-2 text-sm hover:text-[color:var(--color-accent)]">Income</a>
        <a href="{% url 'bookkeeping:expense_list' %}" class="block py-2 text-sm hover:text-[color:var(--color-accent)]">Expenses</a>
        

    </div>
</nav>

<script>
document.getElementById("mobile-menu-toggle").onclick = function () {
    const menu = document.getElementById("mobile-menu");
    menu.classList.toggle("hidden");
};
</script>
