congo/layouts/partials/header/basic.html

<header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
  <nav class="flex items-start justify-between sm:items-center">
    {{/* Site logo/title */}}
    <div class="flex flex-row items-center">
      {{ partial "logo.html" . }}
      {{ partial "translations.html" . }}
    </div>
    {{/* Main menu */}}
    {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
      <ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row">
        {{ if .Site.Menus.main }}
          {{ range .Site.Menus.main }}
            <li
              class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
            >
              {{ if eq .Params.action "search" }}
                {{ $.Scratch.Add "searchCount" 1 }}
                {{ if $.Site.Params.enableSearch | default false }}
                  <button
                    id="search-button-{{ $.Scratch.Get "searchCount" }}"
                    title="{{ .Title | default (i18n "search.open_button_title") }}"
                  >
                    {{ with .Params.icon | default "search" }}
                      <span
                        class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
                      >
                        {{ partial "icon.html" . }}
                      </span>
                    {{ end }}{{ if .Params.showName | default true }}
                      <span
                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
                        >{{ .Name | markdownify | emojify }}</span
                      >
                    {{ end }}
                  </button>
                {{ end }}
              {{ else if eq .Params.action "appearance" }}
                {{ $.Scratch.Add "switchCount" 1 }}
                <button
                  id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
                  type="button"
                  aria-label="appearance switcher"
                >
                  <span
                    class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
                    title="{{ i18n "footer.dark_appearance" }}"
                  >
                    {{ with .Params.icon | default "moon" }}
                      {{ partial "icon.html" . }}
                    {{ end }}
                    {{ if .Params.showName | default true }}
                      <span
                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
                        >{{ .Name | markdownify | emojify }}</span
                      >
                    {{ end }}
                  </span>
                  <span
                    class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
                    title="{{ i18n "footer.light_appearance" }}"
                  >
                    {{ with .Params.icon | default "sun" }}
                      {{ partial "icon.html" . }}
                    {{ end }}
                    {{ if .Params.showName | default true }}
                      <span
                        class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
                        >{{ .Name | markdownify | emojify }}</span
                      >
                    {{ end }}
                  </span>
                </button>
              {{ else }}
                <a
                  href="{{ .URL }}"
                  title="{{ .Title }}"
                  {{ with .Params.target }}target="{{ . }}"{{ end }}
                  >{{ with .Params.icon }}
                    <span
                      class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
                    >
                      {{ partial "icon.html" . }}
                    </span>
                  {{ end }}{{ if .Params.showName | default true }}
                    <span
                      class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"
                      >{{ .Name | markdownify | emojify }}</span
                    >
                  {{ end }}</a
                >
              {{ end }}
            </li>
          {{ end }}
          {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
            <li
              class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
            >
              <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
                <span
                  class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"
                >
                  {{ partial "icon.html" "search" }}
                </span>
              </button>
            </li>
          {{ end }}
        {{ end }}
      </ul>
    {{ end }}
  </nav>
</header>