pbmobilehamburger/hamburger.js

Hamburger menu for mobile devices

export default function(menu) {
    // only adds default style if it does not already exist
    if(!(document.getElementById('hamburgerStyle'))) {
        // adds the default styles and makes sure its on the top so it can be overwritten
        if(!(document.getElementById('dropdownMenuDefaultStyle'))) { 
            const firstLink = Array.from(document.getElementsByTagName('link'))[0];
            const hamburgerStyle = document.createElement('style');
            hamburgerStyle.id = 'hamburgerStyle';
            hamburgerStyle.textContent = `.menuLineDefault { height: 8%; width: 80%; background-color: black; } .hamburgerIconDefault{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15%; min-height: 7rem; aspect-ratio: 1; z-index: 9999; background-color: rgb(0, 162, 255); margin-left: 3rem; margin-top: 3rem} .hamburgerBodyDefault { display: none; position: absolute; left: 0; top: 0; height: 100vh; width: 50%; background-color: rgb(113, 170, 255); font-size: 3rem; border-bottom-right-radius: 100px; overflow: auto; padding-left: 3rem; padding-top: ${menu.parentElement.getBoundingClientRect().height * 0.7 + 'px'}} .on { display: block }`;
            document.head.insertBefore(hamburgerStyle, firstLink);
        };
    };

    menu.classList.add('hamburgerIconDefault');
    document.addEventListener('click', (e) => {
        console.log(menu);
        if(!menu.contains(e.target) && !hamburgerBody.contains(e.target)) {
            hamburgerBody.classList.remove('on');
        }
    });
    menu.addEventListener('click', () => {
        hamburgerBody.classList.toggle('on');
    });


    const hamburgerBody = document.createElement('div');
    hamburgerBody.classList.add('hamburgerBodyDefault');
    document.body.appendChild(hamburgerBody);
    Array.from(menu.children).forEach(opt => {
        hamburgerBody.appendChild(opt);
    });

    for(let i = 0; i < 3; i++) {
        const line = document.createElement('div');
        line.classList.add('menuLineDefault');
        menu.appendChild(line);
    };
};