blowfish/layouts/partials/header/basic.html

<div class="relative bg-white">
    <div class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start md:space-x-10">
        <div>
            <a href="{{ "" | relLangURL }}" class="flex">
                <span class="sr-only">{{ .Site.Title | markdownify | emojify }}</span>
                {{ if .Site.Params.Logo -}}
                {{ $logo := resources.Get .Site.Params.Logo }}
                {{ if $logo }}
                <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" alt="{{ .Site.Title }}" />
                {{ end }}
                {{- end }}
            </a>
        </div>
        <div class="-my-2 -mr-2 md:hidden">
            <button type="button"
                class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
                aria-expanded="false">
                <span class="sr-only">Open menu</span>
                <!-- Heroicon name: outline/bars-3 -->
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                </svg>
            </button>
        </div>
        <div class="hidden md:flex md:flex-1 md:items-center md:justify-between">
            <nav class="flex space-x-3">

                <a href="/" class="text-base font-medium text-gray-500 hover:text-gray-900">{{ .Site.Title | markdownify
                    | emojify }}</a>

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

                {{ if .Site.Menus.main }}
                {{ range .Site.Menus.main }}
                <a href="{{ .URL }}" class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">{{ .Name | markdownify | emojify }}</a>
                {{ end }}
                {{ end }}

                <span></span>

                {{ 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" title="{{ i18n "footer.dark_appearance" }}">
                            {{ partial "icon.html" "moon" }}
                        </div>
                        <div class="items-center justify-center hidden h-12 dark:flex" title="{{ i18n "footer.light_appearance" }}">
                            {{ partial "icon.html" "sun" }}
                        </div>
                    </button>
                </div>
                {{ end }}

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

    <!--
      Mobile menu, show/hide based on mobile menu state.
  
      Entering: "duration-200 ease-out"
        From: "opacity-0 scale-95"
        To: "opacity-100 scale-100"
      Leaving: "duration-100 ease-in"
        From: "opacity-100 scale-100"
        To: "opacity-0 scale-95"
    -->
    <div class="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden">
        <div class="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
            <div class="px-5 pt-5 pb-6">
                <div class="flex items-center justify-between">
                    <div>
                        <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                            alt="Your Company">
                    </div>
                    <div class="-mr-2">
                        <button type="button"
                            class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                            <span class="sr-only">Close menu</span>
                            <!-- Heroicon name: outline/x-mark -->
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="mt-6">
                    <nav class="grid gap-6">
                        <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50">
                            <div
                                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
                                <!-- Heroicon name: outline/chart-bar -->
                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                                </svg>
                            </div>
                            <div class="ml-4 text-base font-medium text-gray-900">Analytics</div>
                        </a>

                        <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50">
                            <div
                                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
                                <!-- Heroicon name: outline/cursor-arrow-rays -->
                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
                                </svg>
                            </div>
                            <div class="ml-4 text-base font-medium text-gray-900">Engagement</div>
                        </a>

                        <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50">
                            <div
                                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
                                <!-- Heroicon name: outline/shield-check -->
                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
                                </svg>
                            </div>
                            <div class="ml-4 text-base font-medium text-gray-900">Security</div>
                        </a>

                        <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50">
                            <div
                                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
                                <!-- Heroicon name: outline/squares-2x2 -->
                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
                                </svg>
                            </div>
                            <div class="ml-4 text-base font-medium text-gray-900">Integrations</div>
                        </a>

                        <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50">
                            <div
                                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
                                <!-- Heroicon name: outline/arrow-path -->
                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M4.5 12c0-1.232.046-2.453.138-3.662a4.006 4.006 0 013.7-3.7 48.678 48.678 0 017.324 0 4.006 4.006 0 013.7 3.7c.017.22.032.441.046.662M4.5 12l-3-3m3 3l3-3m12 3c0 1.232-.046 2.453-.138 3.662a4.006 4.006 0 01-3.7 3.7 48.657 48.657 0 01-7.324 0 4.006 4.006 0 01-3.7-3.7c-.017-.22-.032-.441-.046-.662M19.5 12l-3 3m3-3l3 3" />
                                </svg>
                            </div>
                            <div class="ml-4 text-base font-medium text-gray-900">Automations</div>
                        </a>

                        <a href="#" class="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50">
                            <div
                                class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
                                <!-- Heroicon name: outline/document-chart-bar -->
                                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                </svg>
                            </div>
                            <div class="ml-4 text-base font-medium text-gray-900">Reports</div>
                        </a>
                    </nav>
                </div>
            </div>
            <div class="py-6 px-5">
                <div class="grid grid-cols-2 gap-4">
                    <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Pricing</a>

                    <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Docs</a>

                    <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Enterprise</a>

                    <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Help Center</a>

                    <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Guides</a>

                    <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Events</a>

                    <a href="#" class="text-base font-medium text-gray-900 hover:text-gray-700">Security</a>
                </div>
                <div class="mt-6">
                    <a href="#"
                        class="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700">Sign
                        up</a>
                    <p class="mt-6 text-center text-base font-medium text-gray-500">
                        Existing customer?
                        <a href="#" class="text-indigo-600 hover:text-indigo-500">Sign in</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>