header.html

<header class="container flex justify-around md:justify-between gap-4 flex-wrap p-6 mx-auto">
  <a href="{{ .Site.Home.Permalink }}" class="capitalize font-extrabold text-2xl hover:bg-gray-200">
    {{ .Site.Title }}
  </a>
  <ul class="flex items-center gap-4 lg:gap-6">

    {{ range .Site.Menus.main }}
      <li><a href="{{ .URL }}" class="hover:bg-gray-200" >{{ .Name }}</a></li>
    {{ end }}

    {{ range .Site.Sections }}
      <li><a href="{{ .Permalink }}" class="hover:bg-gray-200" >{{ .Title }}</a></li>
    {{ end }}

    {{ if .Site.Params.enableSearch }}
    <li class="grid place-items-center">
      <span class="open-search inline-block cursor-pointer hover:bg-gray-200">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
          stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <circle cx="10" cy="10" r="7" />
          <line x1="21" y1="21" x2="15" y2="15" />
        </svg>
      </span>
    </li>
    {{ end }}

    {{ if .Site.Params.darkModeToggle }}
    <li class="grid place-items-center">
      <span class="toggle-dark-mode inline-block cursor-pointer hover:bg-gray-200">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
          stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <circle cx="12" cy="12" r="3" />
          <line x1="12" y1="5" x2="12" y2="5.01" />
          <line x1="17" y1="7" x2="17" y2="7.01" />
          <line x1="19" y1="12" x2="19" y2="12.01" />
          <line x1="17" y1="17" x2="17" y2="17.01" />
          <line x1="12" y1="19" x2="12" y2="19.01" />
          <line x1="7" y1="17" x2="7" y2="17.01" />
          <line x1="5" y1="12" x2="5" y2="12.01" />
          <line x1="7" y1="7" x2="7" y2="7.01" />
        </svg>
      </span>
    </li>
    {{ end }}
  </ul>
</header>