hugo-theme/layouts/partials/menu.html

{{ $page := . }}
{{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }}
{{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }}
{{ with site.Menus.main }}
<nav class="h-full static">
  <button id="navbar-menu-toggle" type="button" class="inline-flex items-center p-2 text-sm text-slate-800 dark:text-slate-200 rounded-lg md:hidden" aria-controls="navbar-menu" aria-expanded="false">
    <span class="sr-only">{{ T "open_main_menu" }}</span>
    <i class="w-8 h-8">
      {{ partial "icon.html" "menu-2" }}
    </i>
  </button>
  <div class="absolute md:static top-16 left-0 right-0 z-50 hidden w-full md:block md:w-auto" id="navbar-menu">
    <ul class="flex flex-col mx-2 md:mx-0 md:flex-row md:border-0 px-3 text-base font-medium text-slate-800 dark:text-slate-200 md:bg-transparent bg-slate-950 mt-11 md:mt-0">
    {{ range . }}
      {{- $isCurrent := or ($page.IsMenuCurrent .Menu .) ($page.HasMenuCurrent .Menu .) (and $page.IsHome (and .Page (eq $contentTypeName .Page.Type))) -}}
      {{ if not .HasChildren }}
        <li id="{{ .Identifier }}" class="relative">
          <a class="block px-3 py-3 hover:text-emerald-600 {{- if $isCurrent }} text-emerald-600{{ end -}}"
            href="{{ .URL }}" title="{{ .Name }}">{{ .Name }}</a>
        </li>
      {{ else }}
        <li id="{{ .Identifier }}" class="relative group">
          <input type="checkbox" id="{{ .Identifier }}-toggle" class="hidden peer">
          <label for="{{ .Identifier }}-toggle" class="block px-3 py-3 hover:text-emerald-600 {{- if $isCurrent }} text-emerald-600{{ end -}} cursor-pointer md:cursor-default">
            {{ .Name }}
            <svg class="w-4 h-4 ml-1 inline-block transition-transform peer-checked:rotate-180 md:peer-checked:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </label>
          {{ $children := where .Children "Name" "!=" "" }}
          {{ if $children }}
          <ul class="sub-menu hidden peer-checked:block md:peer-checked:hidden md:group-hover:block absolute left-0 md:top-full mt-0 py-2 bg-white dark:bg-slate-800 rounded-lg shadow-lg min-w-full z-50 md:w-48">
            {{ range $children }}
              <li class="{{ if $page.IsMenuCurrent "main" . }}active{{ end }}">
                <a href="{{ .URL }}" class="block px-4 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-700 whitespace-nowrap">{{ .Name }}</a>
              </li>
            {{ end }}
          </ul>
          {{ end }}
        </li>
      {{ end }}
    {{ end }}
    </ul>
  </div>
</nav>
{{ end }}