<div>
  <a routerLink="{{ routerLink }}">
    <span
      class="my-1 flex w-full items-center justify-start p-3 hover:text-white"
    >
      <div
        class="p-2 {{
          currentRoute() === routerLink && 'bg-gray-700 rounded-full'
        }}"
      >
        <span>
          <ng-content />
        </span>
      </div>
      <span
        class="mx-4 text-sm whitespace-pre {{
          sidebarOpen()
            ? 'lg:duration-500 lg:ease-in lg:h-auto lg:opacity-100 lg:transition-all lg:w-auto'
            : 'lg:duration-700 lg:ease-out lg:invisible lg:opacity-0 lg:transition-all'
        }}"
      >
        {{ title }}
      </span>
    </span>
  </a>
</div>
