blowfish/layouts/partials/header/components/desktop-menu.html

<nav class="flex items-center gap-x-5 h-12">
  {{ if .Site.Menus.main }}
    {{ range .Site.Menus.main }}
      {{ template "DesktopMenu" . }}
    {{ end }}
  {{ end }}

  {{ partial "header/components/translations.html" . }}
  {{ if .Site.Params.enableA11y | default false }}
    {{ partial "header/components/a11y.html" (dict "prefix" "desktop-") }}
  {{ end }}

  {{ if .Site.Params.enableSearch | default false }}
    <button
      id="search-button"
      aria-label="Search"
      class="text-base bf-icon-color-hover"
      title="{{ i18n "search.open_button_title" }}">
      {{ partial "icon.html" "search" }}
    </button>
  {{ end }}

  {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
    <div class="flex items-center">
      <button
        id="appearance-switcher"
        aria-label="Dark mode switcher"
        type="button"
        class="text-base bf-icon-color-hover">
        <div class="flex items-center justify-center dark:hidden">
          {{ partial "icon.html" "moon" }}
        </div>
        <div class="items-center justify-center hidden dark:flex">
          {{ partial "icon.html" "sun" }}
        </div>
      </button>
    </div>
  {{ end }}
</nav>

{{ define "DesktopMenu" }}
  {{ if .HasChildren }}
    <div class="nested-menu">
      <div class="cursor-pointer flex items-center">
        <a
          {{ if .URL }}
            href="{{ .URL }}"
            {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
              target="_blank"
            {{ end }}
          {{ else }}
            tabindex="0"
          {{ end }}
          {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
          class="flex items-center text-base font-medium bf-icon-color-hover"
          title="{{ .Title }}">
          {{ if .Pre }}
            <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
              {{ partial "icon.html" .Pre }}
            </span>
          {{ end }}
          <span class="text-bg font-bg break-normal" title="{{ .Title }}">
            {{ .Name | markdownify }}
          </span>
          <span>
            {{ partial "icon.html" "chevron-down" }}
          </span>
        </a>
      </div>
      <div class="menuhide">
        <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl bg-neutral/25 dark:bg-neutral-800/25">
          <div class="flex flex-col space-y-3">
            {{ range .Children }}
              <a
                href="{{ .URL }}"
                {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
                  target="_blank"
                {{ end }}
                {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
                class="flex items-center bf-icon-color-hover">
                {{ if .Pre }}
                  <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
                    {{ partial "icon.html" .Pre }}
                  </span>
                {{ end }}
                <span class="text-sm font-sm" title="{{ .Title }}">
                  {{ .Name | markdownify }}
                </span>
              </a>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  {{ else }}
    <a
      href="{{ .URL }}"
      {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
        target="_blank"
      {{ end }}
      class="flex items-center bf-icon-color-hover"
      {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
      title="{{ .Title }}">
      {{ if .Pre }}
        <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
          {{ partial "icon.html" .Pre }}
        </span>
      {{ end }}
      {{ if .Name }}
        <span class="text-base font-medium break-normal">
          {{ .Name | markdownify }}
        </span>
      {{ end }}
    </a>
  {{ end }}
{{ end }}