dick/src/public/js/components.js

// DOM Ready Function
function ready(fn) {
  if (document.readyState != 'loading') {
      fn();
  } else {
      document.addEventListener('DOMContentLoaded', fn);
  }
}

// DOM Ready Called
ready(function () {

  const openFile = document.getElementById('openFile');
  const showFile = document.getElementById('showFile');

  const traMove = document.getElementsByClassName('traMove');
  const tabsProfile = document.getElementsByClassName('tabsProfile');
  const tabsProfileContent = document.getElementsByClassName('tabsProfileContent');
  const dropdownNavBtn = document.getElementById('dropdownNavBtn');
  const dropdownNav = document.getElementById('dropdownNav');

  const dropdownProfileBtn = document.getElementsByClassName('dropdownProfileBtn');
  const dropdownProfile = document.getElementsByClassName('dropdownProfile');

  const dropdownSearchBtn = document.getElementsByClassName('dropdownSearchBtn');
  const dropdownSearch = document.getElementsByClassName('dropdownSearch');
  const dropdownFileBtn = document.getElementsByClassName('dropdownFileBtn');

  // Open File Manager Event
  /*
  function fireFileManager(){
      openFile.addEventListener('click', () => {
          showFile.click();
      });
  }
  fireFileManager();
*/

  // Dropdown Navbar Event
  function fireDropdownNav(){
      dropdownNavBtn.addEventListener('click', () => {
          if (dropdownNav.classList.contains('-translate-y-full')) {
              dropdownNav.classList.remove('-translate-y-full');
              dropdownNav.classList.add('translate-y-0', 'ease-linear');

              // When the event get fired, every 'traMove' id attibute will move down
              Array.prototype.forEach.call(traMove, (e) => {
                  e.classList.remove('-translate-y-32');
                  e.classList.add('translate-y-0', 'ease-linear');
              });
          } else {
              dropdownNav.classList.add('-translate-y-full',);
              dropdownNav.classList.remove('translate-y-0', 'ease-linear');

               // Then if you hide the event, every 'traMove' id attribute will back to normal
              Array.prototype.forEach.call(traMove, (e) => {
                  e.classList.add('-translate-y-32');
                  e.classList.remove('translate-y-0', 'ease-linear');
              });
          }
      });
  }
  fireDropdownNav();

  // Dropdown Profile Event
  function fireDropdownProfile() {
      Array.prototype.forEach.call(dropdownProfileBtn, function (e, index) {
          e.addEventListener('click', () => {
              var timer;
              if (dropdownProfile[index].classList.contains('opacity-0')) {
                  window.clearTimeout(timer);
                  dropdownProfile[index].classList.remove('opacity-0', 'translate-y-6', 'invisible');
                  dropdownProfile[index].classList.add('translate-y-0', 'opacity-100');
              } else {
                  dropdownProfile[index].classList.add('opacity-0', 'translate-y-6');
                  dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100');
                  
                  //Set timer to hide the dropdown
                  //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownProfile attribute 
                  timer = window.setTimeout( () => {
                      dropdownProfile[index].classList.add('invisible');
                  }, 250);
              }
          });

          // Click outside event
          window.addEventListener('click', (eve) => {
              if (!dropdownProfileBtn[index].contains(eve.target) && !dropdownProfile[index].contains(eve.target)) {
                  dropdownProfile[index].classList.add('opacity-0', 'translate-y-6');
                  dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100');
                  
                  // Same as above
                  timer = window.setTimeout( () => {
                      dropdownProfile[index].classList.add('invisible');
                  }, 250);
              }
          });
      });
  }
  fireDropdownProfile();


  // Dropdown Search Event
  function fireDropdownSearch() {
      Array.prototype.forEach.call(dropdownSearchBtn, (e, index) => {
          e.addEventListener('click', () => {
              var timer;
              if (dropdownSearch[index].classList.contains('opacity-0')) {
                  window.clearTimeout(timer);
                  dropdownSearch[index].classList.remove('opacity-0', 'translate-y-6', 'invisible');
                  dropdownSearch[index].classList.add('translate-y-0', 'opacity-100');
              } else {
                  dropdownSearch[index].classList.add('opacity-0', 'translate-y-6');
                  dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100');

                  //Set timer to hide the dropdown
                  //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownSearch attribute 
                  timer = window.setTimeout( () => {
                      dropdownSearch[index].classList.add('invisible');
                  }, 250);
              }

          });
          
          // Click outside event
          window.addEventListener('click', (eve) => {
              if (!dropdownSearchBtn[index].contains(eve.target) && !dropdownSearch[index].contains(eve.target)) {
                  dropdownSearch[index].classList.add('opacity-0', 'translate-y-6');
                  dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100');
                  
                  // Same as above
                  timer = window.setTimeout( () => {
                      dropdownSearch[index].classList.add('invisible');
                  }, 250);
              }
          });

      });
  }
  fireDropdownSearch();

  // Dropdown File Event
  function fireDropdownFile() {
      Array.prototype.forEach.call(dropdownFileBtn, (e, index) => {
          const findSibling = e.parentElement.children[1];
          e.addEventListener('click', () => {
              var timer;
              if (findSibling.classList.contains('opacity-0')) {
                  window.clearTimeout(timer);
                  findSibling.classList.remove('opacity-0', 'translate-y-6', 'invisible');
                  findSibling.classList.add('translate-y-0', 'opacity-100');
              } else {
                  findSibling.classList.add('opacity-0', 'translate-y-6');
                  findSibling.classList.remove('translate-y-0', 'opacity-100');
                  
                  //Set timer to hide the dropdown
                  //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownFile attribute
                  timer = window.setTimeout( () => {
                      findSibling.classList.add('invisible');
                  }, 250);
              }
          });

          // Click outside event
          window.addEventListener('click', (eve) => {
              if (!dropdownFileBtn[index].contains(eve.target) && !findSibling.contains(eve.target)) {
                  findSibling.classList.add('opacity-0', 'translate-y-6');
                  findSibling.classList.remove('translate-y-0', 'opacity-100');
                  
                  // Same as above
                  timer = window.setTimeout( () => {
                      findSibling.classList.add('invisible');
                  }, 250);
              }

          });

      });
  }
  fireDropdownFile();

  // Tabs Profile Event
  function fireTabsProfile(){
      //File Manager Tab = 0
      tabsProfile[0].addEventListener('click', () => {
          if (tabsProfile[1].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
              tabsProfile[1].classList.remove('border-b-2', 'border-purple-400', 'font-semibold');
              tabsProfile[0].classList.add('border-b-2', 'border-purple-400', 'font-semibold');
              tabsProfileContent[1].classList.add('hidden');
              tabsProfileContent[0].classList.remove('hidden');
          }
      });
      //Config Gen Tab = 1
      tabsProfile[1].addEventListener('click', () => {
          if (tabsProfile[0].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
              tabsProfile[0].classList.remove('border-b-2', 'border-purple-400', 'font-semibold');
              tabsProfile[1].classList.add('border-b-2', 'border-purple-400', 'font-semibold');
              tabsProfileContent[0].classList.add('hidden');
              tabsProfileContent[1].classList.remove('hidden');
          }
      });
  }
  fireTabsProfile();

});