<aside
  class="sidebar flex h-full flex-col border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
  [class.sidebar--collapsed]="collapsed()"
  i18n-aria-label="@@sidebar.aria.label"
  aria-label="Sidebar navigation"
>
  <nav
    i18n-aria-label="@@sidebar.aria.sections"
    aria-label="Sections"
    class="flex-1 overflow-y-auto px-2 py-4"
  >
    @for (group of menu; track group.label) {
    <div class="mb-4">
      @if (!collapsed()) {
      <h2
        class="px-3 pb-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
      >
        {{ group.label }}
      </h2>
      }
      <ul class="flex flex-col gap-1">
        @for (item of group.items; track item.label) {
        <li>
          @if (item.routerLink) {
          <a
            [routerLink]="item.routerLink"
            routerLinkActive="sidebar__link--active"
            [routerLinkActiveOptions]="{ exact: true }"
            ariaCurrentWhenActive="page"
            class="sidebar__link"
            [attr.aria-label]="collapsed() ? item.label : null"
            [title]="collapsed() ? item.label : ''"
          >
            <lib-icon [name]="item.icon" />
            @if (!collapsed()) {
            <span class="sidebar__label">{{ item.label }}</span>
            }
          </a>
          } @else {
          <a
            [attr.href]="item.href"
            class="sidebar__link"
            [attr.aria-label]="collapsed() ? item.label : null"
            [title]="collapsed() ? item.label : ''"
          >
            <lib-icon [name]="item.icon" />
            @if (!collapsed()) {
            <span class="sidebar__label">{{ item.label }}</span>
            }
          </a>
          }
        </li>
        }
      </ul>
    </div>
    }
  </nav>

  <div class="border-t border-gray-200 px-2 py-3 dark:border-gray-800">
    <button
      type="button"
      (click)="toggle()"
      class="sidebar__toggle"
      [attr.aria-expanded]="!collapsed()"
      [attr.aria-label]="toggleAriaLabel()"
    >
      <lib-icon [name]="collapsed() ? 'chevron-right' : 'chevron-left'" />
      @if (!collapsed()) {
      <span class="sidebar__label" i18n="@@sidebar.toggle.collapse">Collapse</span>
      }
    </button>
  </div>
</aside>
