blowfish/layouts/partials/header/basic.html

<div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
    class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
    {{ if .Site.Params.Logo -}}
    {{ $logo := resources.Get .Site.Params.Logo }}
    {{ if $logo }}
    <div>
        <a href="{{ "" | relLangURL }}" class="flex">
            <span class="sr-only">{{ .Site.Title | markdownify | emojify }}</span>

            <img src="{{ $logo.RelPermalink }}" width="{{ div $logo.Width 2 }}" height="{{ div $logo.Height 2 }}"
                class="max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt="{{ .Site.Title }}" />

        </a>
    </div>
    {{ end }}
    {{- end }}
    <div class="flex flex-1 items-center justify-between">
        <nav class="site-header-title flex space-x-3">

            <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">{{ .Site.Title | markdownify
                | emojify }}</a>
            
            
        </nav>
        <nav class="site-header-menu-main hidden md:flex items-center space-x-5 md:ml-12">

            {{ if .Site.Menus.main }}
            {{ range .Site.Menus.main }}

            {{ partial "header/header-option.html" . }}

            {{ end }}
            {{ end }}
            {{ partial "translations.html" . }}

            {{ if .Site.Params.enableSearch | default false }}
            <button id="search-button" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
                title="{{ i18n "search.open_button_title" }}">
                {{ partial "icon.html" "search" }}
            </button>
            {{ end }}

            
            {{/* Appearance switch */}}
            {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
            <div
                class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400">
                <button id="appearance-switcher" type="button">
                    <div class="flex items-center justify-center h-12 dark:hidden">
                        {{ partial "icon.html" "moon" }}
                    </div>
                    <div class="items-center justify-center hidden h-12 dark:flex">
                        {{ partial "icon.html" "sun" }}
                    </div>
                </button>
            </div>
            {{ end }}

          </nav>
        <div class="flex md:hidden items-center space-x-5 md:ml-12">

            <span></span>

            {{ partial "translations.html" . }}

            {{ if .Site.Params.enableSearch | default false }}
            <button id="search-button-mobile" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
                title="{{ i18n "search.open_button_title" }}">
                {{ partial "icon.html" "search" }}
            </button>
            {{ end }}

            {{/* Appearance switch */}}
            {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
            <button id="appearance-switcher-mobile" type="button" style="margin-right:5px">
                <div class="flex items-center justify-center h-12 dark:hidden">
                    {{ partial "icon.html" "moon" }}
                </div>
                <div class="items-center justify-center hidden h-12 dark:flex">
                    {{ partial "icon.html" "sun" }}
                </div>
            </button>
            {{ end }}

        </div>
    </div>
    <div class="-my-2 -mr-2 md:hidden">

        <label id="menu-button" for="menu-controller" class="block">
            <input type="checkbox" id="menu-controller" class="hidden" />
            <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
                {{ partial "icon.html" "bars" }}
            </div>
            <div id="menu-wrapper" style="padding-top:5px;"
                class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
                <ul
                    class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
                    <li class="mb-1">
                        <span class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">{{ partial
                            "icon.html"
                            "xmark" }}</span>
                    </li>

                    {{ if .Site.Menus.main }}
                    {{ range .Site.Menus.main }}
                    <li class="mb-1">
                        <a {{ if or (strings.HasPrefix .URL "http:") (strings.HasPrefix .URL "https:") }} target="_blank"{{ end }} class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
                            href="{{ .URL }}" title="{{ .Title }}">
                            <span class="inline-block align-text-bottom">{{ partial "icon.html" .Pre }}</span>
                            {{ if and .Pre .Name }} &nbsp; {{ end }}
                            {{ .Name | markdownify | emojify }}
                        </a>
                    </li>
                    {{ end }}
                    {{ end }}

                    {{ if .Site.Menus.subnavigation }}
                    <p>-</p>
                    {{ range .Site.Menus.subnavigation }}
                    <li class="mb-1">
                      <a {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{ end }}
                          class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href="{{ .URL }}"
                          title="{{ .Title }}">
                        <span class="inline-block align-text-bottom">{{ partial "icon.html" .Pre }}</span>
                        {{ if and .Pre .Name }} &nbsp; {{ end }}
                        {{ .Name | markdownify | emojify }}
                      </a>
                    </li>
                    {{ end }}
                    {{ end }}

                </ul>
            </div>
        </label>
    </div>
</div>

{{ if .Site.Menus.subnavigation }}
<div class="site-header-menu-subnavigation flex items-center justify-between md:justify-start space-x-3">
  <div class="flex flex-1 items-center justify-between">
    <div class="hidden md:flex items-center space-x-5">
      {{ range .Site.Menus.subnavigation }}
        {{ partial "header/header-option.html" . }}
      {{ end }}
    </div>
  </div>
</div>
{{ end }}