<a routerLink="{{ routerLink }}">
  <span
    class="my-2 flex w-full items-center justify-start p-4 font-thin uppercase text-gray-500 transition-colors duration-200 lg:hover:text-blue-500 {{
      currentRoute() === routerLink &&
        'bg-gradient-to-r border-r-4 border-blue-500 border-r-4 border-blue-500 from-white to-blue-100 text-blue-500'
    }}"
  >
    <span>
      <ng-content />
    </span>
    <span class="mx-4 text-sm font-normal">
      {{ title }}
    </span>
  </span>
</a>
