Untitled

// Select all necessary elements and store them as uiElements object
const burgerIconWrap = document.querySelector(".burger-menu--icon-wrap");
const burgerIcon = document.querySelector(".burger-menu--icon");
const headerMenu = document.querySelector(".home-header--menu");
const burgerMenu = document.querySelector(".burger-menu--wrap");
const burgerNav = document.querySelector(".home-header--navbar");
const gortexLogo = document.querySelector(".home-header--logo");
const headerLangWrap = document.querySelector(".home-header--lang-wrap");
const collectionLineWrap = document.querySelector(".home--collection-line-wrap");
const contactLineWrap = document.querySelector(".home--contact-line-wrap");

const collection = document.querySelector(".collection");
const collectionLink = document.querySelector(".collection a");
const contactLink = document.querySelector(".contact a");
const dropdownArrows = document.querySelectorAll(".burger-menu--arrow");
const collectionDropdown = document.querySelector(".collection-dropdown--ul");
const contactDropdown = document.querySelector(".contact-dropdown--ul");

const uiElements = {
    burgerIconWrap,
    burgerIcon,
    headerMenu,
    burgerMenu,
    burgerNav,
    gortexLogo,
    headerLangWrap,
    collectionLineWrap,
    contactLineWrap,
    collectionLink,
    contactLink,
    collectionArrow: dropdownArrows[0],
    contactArrow: dropdownArrows[1],
    collectionDropdown,
    contactDropdown,
};

let isBurgerVisible = false;

let isDropdownVisible = [false, false];

// Styles
const burgerIconWrapStyles = {
    height: "15vw",
    width: "14%",
    alignItems: "center",
};

const burgerIconStyles = {

};

const headerMenuStyles = {
    flexFlow: "column nowrap",
    height: "100vh",
};

const burgerMenuStyles = {
    display: "flex",
    width: "100%",
    alignItems: "flex-end",
    backgroundColor: "#151515E5",
    justifyContent: "flex-start",
};

const burgerNavStyles = {
    display: "flex",
};

const gortexLogoStyles = {
    display: "none",
};

const headerLangWrapStyles = {
    display: "flex",
};

const collectionLineWrapStyles = {
    display: "flex",
};

const contactLineWrapStyles = {
    display: "flex",
};

const collectionLinkStyles = {

};

const contactLinkStyles = {
    
};

const collectionArrowStyles = {
    
};
const contactArrowStyles = {
    
};

const collectionDropdownStyles = {
    
};

const contactDropdownStyles = {
    
};

const elementStyles = {
    burgerIconWrap: burgerIconWrapStyles,
    burgerIcon: burgerIconStyles,
    headerMenu: headerMenuStyles,
    burgerMenu: burgerMenuStyles,
    burgerNav: burgerNavStyles,
    gortexLogo: gortexLogoStyles,
    headerLangWrap: headerLangWrapStyles,
    collectionLineWrap: collectionLineWrapStyles,
    contactLineWrap: contactLineWrapStyles,
    collectionLink: collectionLinkStyles,
    contactLink: contactLinkStyles,
    collectionArrow: collectionArrowStyles,
    contactArrow: contactArrowStyles,
    collectionDropdown: collectionDropdownStyles,
    contactDropdown: contactDropdownStyles,
};

if (window.matchMedia("(max-width: 599.9px)").matches) {
    //Save existing inline styles
    const originalInlineStyles = {};
    for (const element in uiElements) {
        if (uiElements.hasOwnProperty(element)) {
            originalInlineStyles[element] = uiElements[element].getAttribute("style") || "";
        }
    }
    // Switch burger menu visibility on click (default = invisible)
    uiElements.burgerIcon.addEventListener('click', toggleBurger);
    function toggleBurger() {
        isBurgerVisible ? hideBurger() : showBurger();
    }

    // Show burger menu (add inline styles)
    function showBurger() {
        for (const elementKey in uiElements) {
            if (uiElements.hasOwnProperty(elementKey)) {
                const element = uiElements[elementKey];
                const styles = elementStyles[elementKey];
                modifyElementStyle(element, styles);
            }
        }
        uiElements.burgerIcon.innerText = "close";
        isBurgerVisible = true;
    }

    // Hide burger menu (remove added inline styles)
    function hideBurger() {
        isBurgerVisible = false;
        for (const element in originalInlineStyles) {
            uiElements[element].style = originalInlineStyles[element];
            if (uiElements[element].getAttribute("style") === "") {
                uiElements[element].removeAttribute('style');
            }
        }
        uiElements.burgerIcon.innerText = "menu";
        collection.style.marginBottom = 0;
        isDropdownVisible[0] = isDropdownVisible[1] = false;
        collectionDropdown.style.display = contactDropdown.style.display = "none";
        dropdownArrows[0].innerText = dropdownArrows[1].innerText = "arrow_downward";
    }

    // Modifty inline styles (add/change)
    function modifyElementStyle(element, styleObject) {
        if (element.hasAttribute("style")) {
            const originalStyles = originalInlineStyles[element];
            element.setAttribute("style", originalStyles + "; " + styleObjectToString(styleObject));
        } else {
            element.setAttribute("style", styleObjectToString(styleObject));
        }
    }

    // Convert style object to string (used for adding inline styles defined as JS object in "Styles" section below)
    function styleObjectToString(styleObject) {
        let styleString = "";
        for (let property in styleObject) {
            const kebabCaseProperty = camelToKebab(property);
            styleString += ${kebabCaseProperty}: ${styleObject[property]} ; }
        }
        return styleString;
    }

    // Convert camelCaseString to kebab-case-string (used for CSS properites = simple regex - no numbers etc.)
    function camelToKebab(string) {
        return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
    }

    //Burger dropdowns
    // Switch dropdowns visibility on click (default = invisible)
    collectionLink.addEventListener('click', function() {
        toggleDropdown(0);
    });
    contactLink.addEventListener('click', function() {
        toggleDropdown(1);
    });
    function toggleDropdown(dropdownIndex) {
        isDropdownVisible[dropdownIndex] ? hideDropdown(dropdownIndex) : showDropdown(dropdownIndex);
    }

    // Show dropdown (based on dropdownIndex)
    function showDropdown(dropdownIndex) {
        if (dropdownIndex === 0) {
            collectionDropdown.style = "display: flex; top: 26vw;";
            burgerNav.style.height = "68vw";
            collection.style.marginBottom = "27vw";
            contactDropdown.style.top = "85vw";
        } else if (dropdownIndex === 1) {
            contactDropdown.style.display = "flex";
            if (isDropdownVisible[0] == true) {
                contactDropdown.style.top = "85vw";
            } else {
                contactDropdown.style.top = "55vw";
            }
        }
        dropdownArrows[dropdownIndex].innerText = "arrow_upward";
        isDropdownVisible[dropdownIndex] = true;
    }

    // Hide dropdown (based on dropdownIndex)
    function hideDropdown(dropdownIndex) {
        isDropdownVisible[dropdownIndex] = false;
        if (dropdownIndex === 0) {
            collectionDropdown.style = "display: none;";
            burgerNav.style.height = "40vw";
            collection.style.marginBottom = "";
            contactDropdown.style.top = "55vw";
        } else if (dropdownIndex === 1) {
            contactDropdown.style.display = "none";
        }
        dropdownArrows[dropdownIndex].innerText = "arrow_downward";
    }
}