Adjust main.js to also show the menu bar when scrolled to the bottom

assets/js/main.js

@@ -0,0 +1,106 @@
+/**
+ * Utils
+ * 
+ * From https://github.com/Track3/hermit/blob/master/assets/js/main.js
+ * 
+ * MIT licensed
+ */
+
+// Throttle
+//
+const throttle = (callback, limit) => {
+    let timeoutHandler = null;
+    return () => {
+      if (timeoutHandler == null) {
+        timeoutHandler = setTimeout(() => {
+          callback();
+          timeoutHandler = null;
+        }, limit);
+      }
+    };
+  };
+  
+  // addEventListener Helper
+  //
+  const listen = (ele, e, callback) => {
+    if (document.querySelector(ele) !== null) {
+      document.querySelector(ele).addEventListener(e, callback);
+    }
+  }
+  
+  /**
+   * Functions
+   */
+  
+  // Auto Hide Header
+  //
+  let header = document.getElementById('site-header');
+  let lastScrollPosition = window.pageYOffset;
+  
+  const autoHideHeader = () => {
+    let currentScrollPosition = Math.max(window.pageYOffset, 0);
+    if (currentScrollPosition > lastScrollPosition && document.documentElement.clientHeight + currentScrollPosition < document.documentElement.offsetHeight) {
+      header.classList.remove('slideInUp');
+      header.classList.add('slideOutDown');
+    } else {
+      header.classList.remove('slideOutDown');
+      header.classList.add('slideInUp');
+    }
+    lastScrollPosition = currentScrollPosition;
+  }
+  
+  // Mobile Menu Toggle
+  //
+  let mobileMenuVisible = false;
+  
+  const toggleMobileMenu = () => {
+    let mobileMenu = document.getElementById('mobile-menu');
+    if (mobileMenuVisible == false) {
+      mobileMenu.style.animationName = 'bounceInRight';
+      mobileMenu.style.webkitAnimationName = 'bounceInRight';
+      mobileMenu.style.display = 'block';
+      mobileMenuVisible = true;
+    } else {
+      mobileMenu.style.animationName = 'bounceOutRight';
+      mobileMenu.style.webkitAnimationName = 'bounceOutRight'
+      mobileMenuVisible = false;
+    }
+  }
+  
+  // Featured Image Toggle
+  //
+  const showImg = () => {
+    document.querySelector('.bg-img').classList.add('show-bg-img');
+  }
+  
+  const hideImg = () => {
+    document.querySelector('.bg-img').classList.remove('show-bg-img');
+  }
+  
+  // ToC Toggle
+  //
+  const toggleToc = () => {
+    document.getElementById('toc').classList.toggle('show-toc');
+  }
+  
+  if (header !== null) {
+    listen('#menu-btn', "click", toggleMobileMenu);
+    listen('#toc-btn', "click", toggleToc);
+    listen('#img-btn', "click", showImg);
+    listen('.bg-img', "click", hideImg);
+  
+    document.querySelectorAll('.post-year').forEach((ele)=> {
+      ele.addEventListener('click', () => {
+        window.location.hash = '#' + ele.id;
+      });
+    });
+  
+    window.addEventListener('scroll', throttle(() => {
+      autoHideHeader();
+  
+      if (mobileMenuVisible == true) {
+        toggleMobileMenu();
+      }
+    }, 450));
+  }
+