hugo-theme-introduction/layouts/partials/nav.html

<!-- Begin Nav bar -->
<div class="container">
    <hr>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        {{ $isHome := .Page.IsHome }}
        <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false" >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
        <div class="navbar-menu" id="navMenu">
            <!-- look for custom menu and include it -->
            {{ if .Site.Menus.main }}
            {{ range .Site.Menus.main }}
            {{ if .HasChildren }}
            <a class="navbar-item"  href="{{ .URL }}">
                {{ .Pre }}
                {{ .Name }}
                {{ .Post }}
            </a>
            {{ range .Children }}
            <!-- TODO: style children diffrent then parents-->
            <a class="navbar-item" href="{{ .URL }}">
                {{ .Pre }}
                {{ .Name }}
                {{ .Post }}
            </a>
            {{ end }}
            {{ else }}
            <a class="navbar-item" href="{{ .URL }}">
                {{ .Pre }}
                {{ .Name }}
                {{ .Post }}
            </a>
            {{ end }}
            {{ end }}
            {{ else }}
            <!-- use default menu -->
            {{ if not $isHome }}
            <a class="navbar-item" href="{{ "/" | relLangURL }}">{{ i18n "nav_main" . }}</a>
            {{ end }}

            {{ with .Site.GetPage "page" "home" }}
            {{ range sort (.Resources.ByType "page") "Params.weight" }}
            {{ if ne .Name "contact.md" }}
            <a class="navbar-item" href="{{ if $isHome }}#{{ .File.TranslationBaseName }}{{ else }}{{ printf "/#%s" .File.TranslationBaseName | relLangURL }}{{ end }}">{{ .Title }}</a>
            {{ end }}
            {{ end }}
            {{ end }}

            {{ $pageIsInProjects := eq .Page.Section "projects"}}
            {{ if not (and $pageIsInProjects (eq .Page.Kind "section")) }}
            {{ with .Site.GetPage "section" "projects" }}
            {{ if $isHome }}
            <a class="navbar-item" href="#{{ .Title | urlize }}">{{ .Title }}</a>
            {{ else }}
            <a class="navbar-item" href="{{ .RelPermalink }}">
                {{ if $pageIsInProjects }}
                {{ i18n "nav_backToSection" . }}
                {{ else }}
                {{ .Title }}
                {{ end }}
            </a>
            {{ end }}
            {{ end }}
            {{ end }}

            {{ $pageIsInBlog := eq .Page.Section "blog"}}
            {{ if not (and $pageIsInBlog (eq .Page.Kind "section")) }}
            {{ with .Site.GetPage "section" "blog" }}
            {{ if $isHome }}
            <a class="navbar-item" href="#{{ .Title | urlize }}">{{ .Title }}</a>
            {{ else }}
            <a class="navbar-item" href="{{ .RelPermalink }}">
                {{ if $pageIsInBlog }}
                Back to {{ .Title | singularize}}
                {{ else }}
                {{ .Title | singularize}}
                {{ end }}
            </a>
            {{ end }}
            {{ end }}
            {{ end }}

            {{ with .Site.GetPage "page" "home" }}
            {{ with .Resources.GetMatch "contact.md" }}
            <a class="navbar-item" href="{{ if $isHome }}#{{ .File.TranslationBaseName }}{{ else }}{{ printf "/#%s" .File.TranslationBaseName | relLangURL }}{{ end }}">{{ .Title }}</a>
            {{ end }}
            {{ end }}

            {{ if gt (len  $.Site.Home.AllTranslations.ByWeight) 1 }}
            {{ range $.Site.Home.AllTranslations.ByWeight }}
                <a class="navbar-item" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
            {{ end }}
            {{ end }}

            {{ if and .Site.Params.showRSSButton .Site.RSSLink  }}
            <a class="navbar-item" href="{{ .Site.RSSLink }}"><i class="fas fa-rss"></i></a>
            {{ end }}
            {{ end }}
        </div>
    </nav>
    <hr>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {

  // Get all "navbar-burger" elements
  var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Check if there are any navbar burgers
  if ($navbarBurgers.length > 0) {

    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', function () {

        // Get the target from the "data-target" attribute
        var target = $el.dataset.target;
        var $target = document.getElementById(target);

        // Toggle the class on both the "navbar-burger" and the "navbar-menu"
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');

      });
    });
  }

});
</script>
<!-- End Nav bar -->