{{- $logoPath := .Site.Params.navbar.logo.path | default "images/logo.svg" -}}
{{- $logoLink := .Site.Params.navbar.logo.link | default .Site.Home.RelPermalink -}}
{{- $logoWidth := .Site.Params.navbar.logo.width | default "20" -}}
{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}

<a class="hx:flex hx:items-center hx:hover:opacity-75 hx:ltr:mr-auto hx:rtl:ml-auto" href="{{ $logoLink | safeURL }}">
  {{- $displayTitle := (.Site.Params.navbar.displayTitle | default true) }}
  {{- if (.Site.Params.navbar.displayLogo | default true) }}
    <img class="hx:mr-2 hx:block hx:dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ cond $displayTitle `Logo` .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
    <img class="hx:mr-2 hx:hidden hx:dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ cond $displayTitle `Dark Logo` .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
  {{- end }}
  {{- if $displayTitle }}
    <div class="hx:flex hx:flex-col hx:leading-tight">
      <span class="hx:font-extrabold hx:select-none">{{- .Site.Title -}}</span>
      <span class="hx:text-[0.6rem] hx:font-normal hx:select-none hx:opacity-60 hx:tracking-wide">Bose SoundTouch Toolkit</span>
    </div>
  {{- end }}
</a>
