{{ $header_img := .Scratch.Get "header_img" -}}
{{ $navStyle := "invert" }}
{{- with $header_img -}}
{{ $navStyle = "" }}
{{- end -}}

<nav class="navbar navbar-default navbar-custom navbar-fixed-top {{ $navStyle }}">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="{{ .Site.BaseURL | safeURL }}">{{ .Site.Title }}</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="huxblog_navbar">
      <div class="navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          {{ range .Site.Menus.main }}
          <li><a href="{{ .URL | safeURL }}" title="{{ .Name }}">{{ .Name }}</a></li>
          {{ end }}
        </ul>
      </div>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>
<script>
  // Drop Bootstarp low-performance Navbar
  // Use customize navbar with high-quality material design animation
  // in high-perf jank-free CSS3 implementation
  var $body = document.body;
  var $toggle = document.querySelector(".navbar-toggle");
  var $navbar = document.querySelector("#huxblog_navbar");
  var $collapse = document.querySelector(".navbar-collapse");

  var __HuxNav__ = {
    close: function () {
      $navbar.className = " ";
      // wait until animation end.
      setTimeout(function () {
        // prevent frequently toggle
        if ($navbar.className.indexOf("in") < 0) {
          $collapse.style.height = "0px";
        }
      }, 400);
    },
    open: function () {
      $collapse.style.height = "auto";
      $navbar.className += " in";
    },
  };

  // Bind Event
  $toggle.addEventListener("click", function (e) {
    if ($navbar.className.indexOf("in") > 0) {
      __HuxNav__.close();
    } else {
      __HuxNav__.open();
    }
  });

  /**
   * Since Fastclick is used to delegate 'touchstart' globally
   * to hack 300ms delay in iOS by performing a fake 'click',
   * Using 'e.stopPropagation' to stop 'touchstart' event from
   * $toggle/$collapse will break global delegation.
   *
   * Instead, we use a 'e.target' filter to prevent handler
   * added to document close HuxNav.
   *
   * Also, we use 'click' instead of 'touchstart' as compromise
   */
  document.addEventListener("click", function (e) {
    if (e.target == $toggle) return;
    if (e.target.className == "icon-bar") return;
    __HuxNav__.close();
  });
</script>