blowfish/layouts/partials/header/basic.html

<div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
    class="main-menu 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 h-12">
            <span class="sr-only">{{ .Site.Title | markdownify | emojify }}</span>

            <img src="{{ $logo.RelPermalink }}" width="{{ div $logo.Width 2 }}" height="{{ div $logo.Height 2 }}"
                class="logo 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="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="hidden md:flex items-center space-x-5 md:ml-12 h-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" aria-label="Search" class="text-base hover:text-primary-600 dark:hover:text-primary-400 h-12"
                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" aria-label="Dark mode 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" aria-label="Search" 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" aria-label="Dark mode switcher" 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 space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">

                    <li>
                        <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 }}

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

                    {{ end }}
                    {{ end }}

                </ul>
                {{ if .Site.Menus.subnavigation }}
                <hr>
                <ul
                    class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">


                    {{ range .Site.Menus.subnavigation }}
                    <li class="mb-1">
                        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
                            ) }} target="_blank" {{ end }} class="flex items-center">
                            {{ if .Pre }}
                            <span {{ if and .Pre .Name}} class="mr-3" {{ end }}>
                                {{ partial "icon.html" .Pre }}
                            </span>
                            {{ end }}
                            <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
                                {{ .Name | markdownify | emojify }}
                            </p>
                        </a>
                    </li>
                    {{ end }}

                </ul>
                {{ end }}

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

{{ if .Site.Menus.subnavigation }}
<div class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3" {{ if .Site.Params.Logo
    }} style="margin-top:-15px" {{ end }}>
    <div class="hidden md:flex items-center space-x-5">
        {{ range .Site.Menus.subnavigation }}
        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
            target="_blank" {{ end }} class="flex items-center">
            {{ if .Pre }}
            <span {{ if and .Pre .Name}} class="mr-1" {{ end }}>
                {{ partial "icon.html" .Pre }}
            </span>
            {{ end }}
            <p class="text-xs font-light text-gray-500 hover:text-gray-900" title="{{ .Title }}">
                {{ .Name | markdownify | emojify }}
            </p>
        </a>
        {{ end }}
    </div>
</div>
{{ end }}

{{ if .Site.Params.highlightCurrentMenuArea }}
<script>
    (function () {
        var $mainmenu = $('.main-menu');
        var path = window.location.pathname;
        $mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
            $(e).children('p').addClass('active');
        });
    })();
</script>
{{ end }}