<!-- Source: https://tailwindcomponents.com/component/drawer-expandable -->

{% load mptt_tags %}

<div class="flex">
    <input id="drawer-toggle" type="checkbox" class="peer sr-only" checked />

    <!-- Toggle: fixed next to the sidebar, just under the navbar -->
    <label
        for="drawer-toggle"
        class="fixed z-30 top-20 left-68 peer-checked:left-16 inline-flex h-9 w-9 items-center justify-center bg-gray-400 hover:bg-gray-700 text-white shadow transition-all duration-300 peer-checked:[&>svg]:rotate-180"
        aria-label="Toggle sidebar"
    >
        <svg
            class="h-5 w-5 transition-transform duration-300"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
        >
            <path
                d="M15 5l-7 7 7 7"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
            />
        </svg>
    </label>

    <!-- Sidebar panel (starts below navbar) -->
    <div
        class="z-20 mt-16 w-64 h-[calc(100vh-4rem)] transition-[width] duration-300 bg-white shadow-lg overflow-hidden peer-checked:w-0"
    >
        <div class="flex-shrink-0">
            <div class="px-4 pt-4 border-b">
                <h2 class="pb-4 font-semibold">Projects</h2>
            </div>
        </div>

        <div class="px-6 py-4 peer-checked:hidden">
            {% if projects %}
            <ul class="menu bg-base-200 rounded-box w-56">
                {% recursetree projects %} {% if node.is_leaf_node %}
                <li>
                    <a
                        href="{% url 'lara_django_projects:project-detail' node.project_id %}"
                        >{{ node.name_display }}</a
                    >
                </li>
                {% else %}
                <li>
                    <details open>
                        <summary>
                            <a
                                href="{% url 'lara_django_projects:project-detail' node.project_id %}"
                                >{{ node.name_display }}</a
                            >
                        </summary>
                        <ul>
                            {{ children }}
                        </ul>
                    </details>
                </li>
                {% endif %} {% endrecursetree %}
            </ul>
            {% else %}
            <p>No projects available</p>
            {% endif %}
        </div>
    </div>
</div>
