Hide HID on small screen

1 files changed, 15 insertions, 0 deletions

diff --git a/src/js/zen.js b/src/js/zen.js
index 80476e6..be5f7d7 100644
--- a/src/js/zen.js
+++ b/src/js/zen.js
@@ -1,18 +1,25 @@
 window.addEventListener('DOMContentLoaded', () => {
   let firstTime = window.location.pathname != '/' && window.pageYOffset < 800;
   const toggleArrow = document.querySelector('#harr');
+  const hid = document.querySelector('#hid');
   const initValue = document.body.style.getPropertyValue('--width_panel_bis');
 
   toggleArrow.addEventListener('click', () => {
     if (toggleArrow.classList.contains('hide_arrow_off')) {
       firstTime = false;
       showAbout();
+      showHID();
       setTimeout(() => {
         toggleArrow.classList.remove('hide_arrow_off');
       }, 1000);
     } else {
       toggleArrow.classList.add('hide_arrow_off');
       hideAbout();
+
+      // If the screen is smaller than 500px, hide the HID
+      if (window.screen.availWidth <= 500) {
+        hideHID();
+      }
     }
   });
 
@@ -24,6 +31,14 @@ window.addEventListener('DOMContentLoaded', () => {
     document.body.style.setProperty('--width_panel_bis', initValue);
   }
 
+  function hideHID() {
+    hid.style.setProperty('display', 'none');
+  }
+
+  function showHID() {
+    hid.style.setProperty('display', '');
+  }
+
   window.addEventListener('scroll', () => {
     if(!toggleArrow) return;
     if (window.pageYOffset >= 800) {