const menuButton = document.querySelector('.bar-menu');
const menuBar = document.querySelector('.mobile-menu-bar');
const drawMenu = document.getElementById('draw-menu');
const linkViewer = document.getElementById('link-viewer');

let barHeight;
let isOpened = false;

menuButton.addEventListener('click', revealMenu);

function menuSlide(event) {
    //Handles the transition animation for when the mobile menu appears or not
    event.preventDefault();
    event.stopPropagation();
    drawMenu.removeEventListener('animationend', menuSlide);
    if(isOpened) {
        linkViewer.classList.remove('appear');
    } else {
        linkViewer.classList.remove('disappear');
        drawMenu.classList.add('hidden');
    }

    menuButton.addEventListener('click', revealMenu);
}

function revealMenu(event) {
    //Reveals menu when menu button is pressed
    event.preventDefault();
    event.stopPropagation();
    if(!isOpened) {
        isOpened = true;
        drawMenu.classList.remove('hidden');
        linkViewer.classList.add('appear');
    } else {
        isOpened = false;
        linkViewer.classList.add('disappear');
    }
    linkViewer.addEventListener('animationend', menuSlide);
    menuButton.removeEventListener('click', revealMenu);
}



/*
    Re-adjustments
*/
function repositionElements() {
    //When window resizes, we readjust
    barHeight = menuBar.clientHeight;
    linkViewer.style.bottom = barHeight+'px';
}



repositionElements();