{% load static %}

<!-- Sidebar component with DaisyUI styling -->
<aside id="sidebar" class="sidebar-collapsed bg-gray-200 min-h-screen transition-all duration-300">
    <div class="p-3">
        <button id="menu-button" class="bg-slate-400 text-white rounded-full p-3 focus:outline-none">
            <svg class="i" width="16" height="16" role="img" aria-label="Menu">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#menu" />
            </svg>
        </button>
    </div>

    {% for item in sidebar_menu_items %}

    <nav class="mt-4">
        <a href="{{ item.path }}" class="sidebar-item flex items-center p-4 {{ item.hover_class }}">
            <svg class="bi" width="32" height="32" role="img" aria-label="{{ item.name }}">
                <use xlink:href="{% static 'lara_django_base/icons/symbols.svg' %}#{{ item.icon }}" />
            </svg>
            <span class="ml-4">{{ item.name }}</span>
        </a>
    </nav>
    {% endfor %}

</aside>
