Auto hiding of kiwixNav on scroll for mobile devices

Since kiwixNav is sticky for larger screens now, the tiles area on mobile devices is incredibly low.
This change hides kiwixNav if the screen is scrolled.

static/skin/index.css

@@ -27,6 +27,7 @@ body {
     position: sticky;
     top: 0;
     z-index: 3;
+    transition: all 0.5s ease;
 }
 
 .kiwixHomeBody__results {
@@ -137,6 +138,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
 }
 
 .tagFilterLabel {
@@ -178,7 +180,7 @@ body {
 }
 
 #uiLanguageSelectorButton {
-  margin: 16px 12px 0 0;
+  margin: 0 12px 0 0;
   float: right;
 }
 
@@ -467,7 +469,6 @@ body {
 }
 
 .feedLogo {
-    margin: 16px 12px 0 0;
     height: 30px;
     float: right;
     border-radius: 5px;

static/skin/index.js

@@ -18,6 +18,7 @@
     params.delete('userlang');
     let timer;
     let languages = {};
+    let previousScrollTop = Infinity;
 
     function updateFeedLink() {
         const inputParams = new URLSearchParams(window.location.search);
@@ -453,6 +454,22 @@
         }
     }
 
+    function updateNavVisibilityState() {
+        const st = window.scrollY;
+        const enableAutoHiding = document.body.clientWidth < 590;
+        if ((Math.abs(previousScrollTop - st) <= 5) || !enableAutoHiding)
+            return;
+        const kiwixNav = document.querySelector('.kiwixNav');
+        if (st > previousScrollTop) {
+            kiwixNav.style.position = 'fixed';
+            kiwixNav.style.top = '-100%';
+        } else {
+            kiwixNav.style.position = 'sticky';
+            kiwixNav.style.top = '0';
+        }
+        previousScrollTop = st;
+    }
+
     window.addEventListener('resize', (event) => {
         if (timer) {clearTimeout(timer)}
         timer = setTimeout(() => {
@@ -531,6 +548,7 @@
         }
         updateFeedLink();
         setCookie(filterCookieName, params.toString(), oneDayDelta);
+        setInterval(updateNavVisibilityState, 250);
     };
 
     // required by i18n.js:setUserLanguage()