{{define "categorymenuHTML"}}
<nav class="hed">
  <div id="small-menu" onclick="handleSmallMenu();myFunction(this)">
    <div class="menu-icon">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
    <p>Menu</p>
  </div>
  <div class="menu">
  <a href="/">
    <div class="home-icon" title="Pocetna">
        <div class="home-text">Pocetna</div>
        <i class="fa fa-home" style="font-size:48px;color:white"></i>
    </div>
  </a>  
  {{range .categories}}
    <a href="/{{ . }}">
      <div class="home-icon" title="{{ . }}">
        {{ . }}
      </div>
    </a>
  {{end}}
</div> 
</nav>
</div>

<script>

  function handleSmallMenu (){
    let menu = document.querySelector('.menu')
    menu.classList.toggle('show-menu')
  }
  function myFunction(x) {
  x.classList.toggle("change");
}

  const handleScroll = function(event) {
    const top = window.scrollY;
    const header = document.querySelector('.hed');
    const headerBottom = header.offsetTop + header.offsetHeight;

    if (top >= headerBottom) {
        header.classList.add('fixed');
    } else {
        header.classList.remove('fixed');
    }
    }
  window.addEventListener('scroll', handleScroll);
</script>
{{end}}