const clickDiv = document.getElementById('mobile-nav-toggle');
const topBar = document.getElementById('top-bar');
const middleBar = document.getElementById('middle-bar');
const bottomBar = document.getElementById('bottom-bar');
const bodyWrapper = document.getElementById('body-wrapper');
const bodyOverlay = document.getElementById('body-overlay');
const sideNav = document.getElementById('side-nav');

const toggleSidemenu = () => {
	topBar.classList.toggle('top-bar-rotated');
	middleBar.style.opacity = middleBar.style.opacity === '0' ? '1' : '0';
	bottomBar.classList.toggle('bottom-bar-rotated');
	bodyWrapper.classList.toggle('body-wrapper-open');
	bodyOverlay.classList.toggle('body-overlay-open');

	window.scrollTo({ top: 0, behavior: 'instant' });

	document.body.style.overflow =
		document.body.style.overflow === 'hidden' ? '' : 'hidden';

	console.log('zindex:', sideNav?.style.getPropertyValue('z-index'));

	sideNav.style.zIndex =
		sideNav.style.zIndex === '' || sideNav.style.zIndex == '-1'
			? '0'
			: '-1';
};

// Add event listener for click
clickDiv.addEventListener('click', toggleSidemenu);
bodyOverlay.addEventListener('click', toggleSidemenu);