chill_hugoplate/layouts/partials/essentials/header.html

<header
  class="header {{ if site.Params.navbar_fixed }}sticky top-0{{ end }} z-30">
  <nav class="navbar container">
    <!-- logo -->
    <div class="order-0">
      <!-- navbar brand/logo -->
      <a class="navbar-brand block" href="{{ site.BaseURL | relLangURL }}">
        {{ partial "logo" }}
      </a>
    </div>
    <!-- navbar toggler -->
    <input id="nav-toggle" type="checkbox" class="hidden" />
    <label
      for="nav-toggle"
      class="order-3 cursor-pointer text-dark dark:text-white lg:order-1"
    >
      <span id="show-button" class="flex items-center lg:order-1 lg:hidden">
        <svg class="h-6 fill-current" viewBox="0 0 20 20">
          <title>Menu Open</title>
          <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
        </svg>
      </span>
      <span
        id="hide-button"
        for="nav-toggle"
        class="hidden items-center lg:order-1"
      >
        <svg class="h-6 fill-current" viewBox="0 0 20 20">
          <title>Menu Close</title>
          <polygon
            points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
            transform="rotate(45 10 10)"
          ></polygon>
        </svg>
      </span>
    </label>
    <!-- /navbar toggler -->

    <!-- main navbar -->
    <ul
      id="nav-menu"
      class="navbar-nav order-3 hidden w-full pb-6 lg:order-1 lg:flex lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8">
      {{ $currentPage := . }}
      {{ range site.Menus.main }}
        {{ $menuURL := .URL | absLangURL }}
        {{ $pageURL:= $currentPage.Permalink | absLangURL }}
        {{ $active := eq $menuURL $pageURL }}
        {{ if .HasChildren }}
          <li class="nav-item nav-dropdown group relative">
            <span
              class="nav-link {{ range .Children }}
                {{ $childURL := .URL | absLangURL }}
                {{ $active := eq $childURL $pageURL }}
                {{ if $active }}active{{ end }}
              {{ end }} inline-flex items-center">
              {{ .Name }}
              <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20">
                <path
                  d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
              </svg>
            </span>
            <ul
              class="nav-dropdown-list hidden group-hover:block lg:invisible lg:absolute lg:block lg:opacity-0 lg:group-hover:visible lg:group-hover:opacity-100">
              {{ range .Children }}
                {{ $childURL := .URL | absLangURL }}
                {{ $active := eq $childURL $pageURL }}
                <li class="nav-dropdown-item">
                  <a
                    class="nav-dropdown-link {{ if $active }}
                      active
                    {{ end }}"
                    {{ if findRE `^http` .URL }}
                      target="_blank" rel="noopener"
                    {{ end }}
                    href="{{ if findRE `^#` .URL }}
                      {{ if not $.IsHome }}
                        {{ site.BaseURL | relLangURL }}
                      {{ end }}{{ .URL }}
                    {{ else }}
                      {{ .URL | relLangURL }}
                    {{ end }}">
                    {{ .Name }}
                  </a>
                </li>
              {{ end }}
            </ul>
          </li>
        {{ else }}
          <li class="nav-item">
            <a
              class="nav-link {{ if $active }}active{{ end }}"
              {{ if findRE `^http` .URL }}
                target="_blank" rel="noopener"
              {{ end }}
              href="{{ if findRE `^#` .URL }}
                {{ if not $.IsHome }}
                  {{ site.BaseURL | relLangURL }}
                {{ end }}{{ .URL }}
              {{ else }}
                {{ .URL | relLangURL }}
              {{ end }}"
              >{{ .Name }}</a
            >
          </li>
        {{ end }}
      {{ end }}
      {{ if site.Params.navigation_button.enable }}
        <li class="mt-4 inline-block lg:hidden">
          <a
            class="btn btn-outline-primary btn-sm"
            href="{{ site.Params.navigation_button.link | relLangURL }}">
            {{ site.Params.navigation_button.label }}
          </a>
        </li>
      {{ end }}
    </ul>

    <div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0">
      {{ with site.Params.search }}
        {{ if .enable }}
          <button
            aria-label="search"
            class="border-border text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r pr-5 text-xl dark:text-white"
            data-target="search-modal">
            <i class="fa-solid fa-search"></i>
          </button>
        {{ end }}
      {{ end }}

      {{ partial "components/language-switcher" (dict "Context" . "Class" "mr-5 pl-2 py-1 dark:bg-darkmode-theme-light rounded") }}
      {{ partial "components/theme-switcher" (dict "Class" "mr-5") }}


      <!-- navigation btn -->
      {{ if site.Params.navigation_button.enable }}
        <a
          href="{{ site.Params.navigation_button.link | relLangURL }}"
          class="btn btn-outline-primary btn-sm hidden lg:inline-block">
          {{ site.Params.navigation_button.label }}
        </a>
      {{ end }}
    </div>
  </nav>
</header>