{% extends "base.html" %}

{% block sidebar %}
    <div class="flex flex-col gap-4 w-full">
        <div class="flex flex-col gap-1">
            <div class="text-neutral border-b border-neutral font-bold text-sm opacity-40 mb-2">Members</div>
            <a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2 cursor-default hover:cursor-pointer">
                <i class="fa-solid fa-users"></i>
                <span>Members</span>
            </a>
            <a class="flex flex-row gap-2 items-center hover:bg-neutral-content rounded-md p-2">
                <i class="fa-solid fa-users"></i>
                <span>Members</span>
            </a>
        </div>

        <div>
            <div>Members</div>
            <a>
                <i class="fa-solid fa-users"></i>
                <span>Members</span>
            </a>
        </div>
    </div>


    <ul class="menu bg-base-200 rounded-box w-56">
        <li class="menu-title">Members</li>
        <li class="menu-active">
            <a>
                <i class="fa-solid fa-users w-5 h-5 mr-2 self-center"></i>Members
            </a>
        </li>
    </ul>
{% endblock sidebar %}