Weather and Category

web/data/categorymenu.html

@@ -0,0 +1,44 @@
+{{define "categorymenuHTML"}}
+<nav class="hed">
+  <div id="small-menu" onclick="handleSmallMenu()">
+    Menu
+  </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')
+  }
+
+  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}}