hugo-academic-mirror/modules/blox-tailwind/layouts/partials/components/headers/navbar-simple.html

<!-- Main navigation container -->

{{/* Show site search? */}}
{{ $show_search := site.Params.header.navbar.show_search | default false }}

<nav
  class="relative flex w-full flex-nowrap items-center justify-between bg-white py-2 text-neutral-500 shadow-lg hover:text-neutral-700 focus:text-neutral-700 dark:bg-slate-900 lg:flex-wrap lg:justify-start lg:py-4"
  data-te-navbar-ref>
  <div class="flex w-full flex-wrap items-center justify-between px-3">
    <!-- Hamburger button for mobile view -->
    <button
      class="block border-0 bg-transparent px-2 text-neutral-500 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
      type="button"
      data-te-collapse-init
      data-te-target="#collapse-main-navbar"
      aria-controls="collapse-main-navbar"
      aria-expanded="false"
      aria-label="Toggle navigation" onclick="toggleNavbar('collapse-main-navbar')">
      <!-- Hamburger icon -->
      <span class="[&>svg]:w-7">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="h-7 w-7">
          <path
            fill-rule="evenodd"
            d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
            clip-rule="evenodd" />
        </svg>
      </span>
    </button>

    <!-- Collapsible navbar container -->
    <div
      class="!visible mt-2 hidden flex-grow basis-[100%] items-center justify-center lg:mt-0 lg:!flex lg:basis-auto"
      id="collapse-main-navbar"
      data-te-collapse-item>
      <!-- Main links -->
      {{- $currentPage := . }}
      <ul
        class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row items-center"
        data-te-navbar-nav-ref>
        {{- range site.Menus.main }}
        {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
        {{- $page_url:= $currentPage.Permalink | absLangURL }}
        {{- $active := eq $menu_item_url $page_url -}}
        {{- $activeClass := cond $active "active" "" -}}
        <!-- Home link [&.active]:text-bold [&.active]:text-black/90 dark:[&.active]:text-neutral-300-->
        <li
          class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1"
          data-te-nav-item-ref>
          <a
            class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
            [&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white {{ $activeClass }}"
            aria-current="page"
            href="{{ .URL | relLangURL }}"
            data-te-nav-link-ref
          >{{- .Name -}}</a
          >
        </li>
        {{ end }}
        {{ if $show_search }}
        <li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-1">
          <a
            class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
            [&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white"
            aria-current="page"
            href="#"
            id="search_toggle"
          >{{- i18n "search" -}}</a
          >
        </li>
        {{ end }}
        {{ $show_theme_chooser := site.Params.header.navbar.show_theme_chooser | default true }}
        {{ if $show_theme_chooser }}
        <li class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
            [&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white">
          <button class="theme-toggle mt-1" accesskey="t" title="">
            <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                 stroke-linejoin="round" class="dark:hidden">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
            <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                 stroke-linejoin="round" class=" dark:block [&:not(dark)]:hidden">
              <circle cx="12" cy="12" r="5"></circle>
              <line x1="12" y1="1" x2="12" y2="3"></line>
              <line x1="12" y1="21" x2="12" y2="23"></line>
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
              <line x1="1" y1="12" x2="3" y2="12"></line>
              <line x1="21" y1="12" x2="23" y2="12"></line>
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
          </button>
        </li>
        {{ end }}
        {{ $show_translations := site.Params.header.navbar.show_translations | default true }}
        {{ if .IsTranslated | and $show_translations }}
        <li class="lg:px-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200
            [&.active]:font-bold [&.active]:text-black/90 dark:[&.active]:text-white">
          {{- partial "components/language-chooser.html" (dict "page" .) -}}
        </li>
        {{ end }}
      </ul>
    </div>
  </div>
</nav>

{{ if $show_search }}
  {{- partial "components/search-modal.html" . -}}
{{ end }}

<script>
  function toggleNavbar(collapseID){
    document.getElementById(collapseID).classList.toggle("hidden");
    document.getElementById(collapseID).classList.toggle("flex");
  }
</script>