{% load static %}
<style>
  .logo-full {
    display: block;
    width: 160px;
    height: auto;
    transition: width 0.3s;
  }
  body.toggled .logo-full {
    width: 50px;
  }
  /* Prevent text wrapping during sidebar collapse */
  .sidebar-wrapper .metismenu .menu-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<aside class="sidebar-wrapper">
  <div class="sidebar-header">
    <div class="logo-icon" style="width: 100%; display: flex; justify-content: center;">
      <img src="{% static 'assets/images/logo-ironers.jpg' %}" class="logo-full" alt="Ironers">
    </div>
    <div class="sidebar-close">
      <span class="material-icons-outlined">close</span>
    </div>
  </div>
  <div class="sidebar-nav" data-simplebar="true">

    <!--navigation-->
    <ul class="metismenu" id="sidenav">
      <li>
        <a href="{% url 'dashboard' %}">
          <div class="parent-icon"><i class="material-icons-outlined">home</i>
          </div>
          <div class="menu-title">Dashboard</div>
        </a>
      </li>
      <li>
        <a href="{% url 'user-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">people</i></div>
          <div class="menu-title">User Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'banner-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">view_carousel</i></div>
          <div class="menu-title">Banner Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'service-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">cleaning_services</i></div>
          <div class="menu-title">Service Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'category-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">category</i></div>
          <div class="menu-title">Category Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'rider-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">two_wheeler</i></div>
          <div class="menu-title">Rider Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'brand-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">branding_watermark</i></div>
          <div class="menu-title">Brand Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'material-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">texture</i></div>
          <div class="menu-title">Material Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'garment-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">checkroom</i></div>
          <div class="menu-title">Garment Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'booking-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">receipt_long</i></div>
          <div class="menu-title">Booking Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'service-request-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">home_repair_service</i></div>
          <div class="menu-title">Service Requests</div>
        </a>
      </li>
      <li>
        <a href="{% url 'back-to-base-list' %}">
          <div class="parent-icon"><i class="material-icons-outlined">assignment_return</i></div>
          <div class="menu-title">Back to Base</div>
        </a>
      </li>
      <li>
        <a href="{% url 'tag-management' %}">
          <div class="parent-icon"><i class="material-icons-outlined">local_offer</i></div>
          <div class="menu-title">Tag Management</div>
        </a>
      </li>
      <li>
        <a href="{% url 'global-settings' %}">
          <div class="parent-icon"><i class="material-icons-outlined">settings</i></div>
          <div class="menu-title">Global Settings</div>
        </a>
      </li>
    </ul>
    <!--end navigation-->
  </div>
  <div class="sidebar-bottom gap-4">
    <div class="dark-mode">
      <a href="javascript:;" class="footer-icon dark-mode-icon">
        <i class="material-icons-outlined">dark_mode</i>
      </a>
    </div>
  </div>
</aside>