<div>
  <a routerLink="{{ routerLink }}">
    <span
      class="my-2 flex w-full items-center justify-start p-4 hover:text-white {{
        currentRoute() === routerLink
          ? 'font-medium text-green-400 hover:text-green-400'
          : 'text-white'
      }}"
    >
      <span>
        <ng-content />
      </span>
      <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>
