<a
  {{
    $props
     .except(['icon'])
     .merge({
       class: ["h-10 lg:h-8 relative flex items-center gap-3 rounded-lg  py-0 text-start w-full px-3 my-px text-zinc-500 dark:text-white/80 data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content) data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5  border border-transparent"]
     })
     .toAttrs()
  }}
  data-ui-navlist-item="data-ui-navlist-item"
  {{ request?.matchesRoute(href) ? 'data-current': '' }}
>
  @if(icon && svg)
    <div class="relative">
      {{ svg(icon, {
        class: 'shrink-0 [:where(&)]:size-6 size-4!',
        'data-slot': 'icon',
        'data-ui-icon': true,
      }) }}
    </div>
  @endif

  <div class="flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&amp;]:hidden [[data-nav-sidebar]_[data-nav-footer]_&amp;]:block" data-content="">
    {{ await $slots.main() }}
  </div>

  @if(badge)
    <ui:navlist.badge :color="badgeColor" class="ms-2">{{ badge }}</ui:navlist.badge>
  @end
</a>
