@if (sideNavService.version() === "vfo1") {
  <a
    [routerLink]="route()"
    class="tw-relative tw-grow tw-flex tw-p-3 tw-rounded-xl tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-border-nav-focus focus-visible:tw-bg-bg-nav-hover hover:tw-bg-bg-nav-hover [&_svg]:tw-w-[153px]"
    [class]="!sideNavService.open() ? '[&_svg]:!tw-w-[20px]' : ''"
    [attr.aria-label]="label()"
    [title]="label()"
    routerLinkActive
    ariaCurrentWhenActive="page"
  >
    <bit-svg [content]="sideNavService.open() ? sideNavLogo : closedIcon()"></bit-svg>
  </a>
} @else {
  <div
    class="tw-px-2 tw-bg-bg-nav"
    [ngClass]="{
      'tw-sticky tw-top-0 tw-z-50 tw-pb-4': sideNavService.open(),
      'tw-pb-[calc(theme(spacing.8)_+_2px)]': !sideNavService.open(),
      'tw-pt-[calc(0.5rem_+_var(--bit-sidenav-extra-top-padding,_0px))]':
        sideNavService.isOverlay(),
      'tw-pt-2': !sideNavService.isOverlay(),
    }"
  >
    <!-- absolutely position the link svg to avoid shifting layout when sidenav is closed -->
    <a
      [routerLink]="route()"
      class="tw-relative tw-p-3 tw-block tw-rounded-md tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-border-nav-focus hover:tw-bg-bg-nav-hover tw-h-[73px] [&_svg]:tw-absolute [&_svg]:tw-inset-[.6875rem] [&_svg]:tw-w-[200px]"
      [class]="!sideNavService.open() ? '!tw-h-[55px] [&_svg]:!tw-w-[26px]' : ''"
      [attr.aria-label]="label()"
      [title]="label()"
      routerLinkActive
      ariaCurrentWhenActive="page"
    >
      <bit-svg [content]="sideNavService.open() ? openIcon() : closedIcon()"></bit-svg>
    </a>
  </div>
}