main.js

// Toggle Functionality

// Initializations
const sideNavContainer = document.getElementById('sidenavContainer');
const backdropContainer = document.getElementById('backdropContainer');
const scrollToNone = document.getElementById('scrollToNone');
const autofocusInput = document.getElementById('autofocusInput');
let drawerState = false;

function openNav() {
  sideNavContainer.style.width = '44%'; // opens side navbar by 45 percent
  backdropContainer.style.display = 'block'; // displays overlay
  scrollToNone.classList.add('scrollToNone'); // force stop background scrolling
  autofocusInput.focus(); // focusing the input field
  drawerState = true;

  // Dynamic Width Changing
  if (window.innerWidth <= 600) {
    sideNavContainer.style.width = '80%';
    backdropContainer.style.display = 'block';
    scrollToNone.classList.add('scrollToNone');
  }

  window.matchMedia('(max-width: 600px)').addListener((e) => {
    if (drawerState) {
      sideNavContainer.style.width = e.matches ? '80%' : '44%';
    }
  });
}

function closeNav() {
  sideNavContainer.style.width = '0'; // closes side navbar by 0
  backdropContainer.style.display = 'none'; // hides overlay
  scrollToNone.classList.remove('scrollToNone'); // normalize background scrolling
  drawerState = false;
}