function addItemsToHeader(menuItems, header) {
    for (const menuItem of menuItems) {
        const headerItem = document.createElement('div');

        headerItem.setAttribute('class', 'vector-menu mw-portlet');
        headerItem.appendChild(menuItem.cloneNode(true));

        const links = headerItem.querySelectorAll('a');

        for (const link of links) {
            link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only';
        }

        header.appendChild(headerItem);
    }
}

function initHeader() {
    const menuItems = document.querySelectorAll('#vector-user-links-dropdown .vector-dropdown-content .vector-menu-content');
    const headers   = document.querySelectorAll('.vector-user-links-main');

    for (const header of headers) {
        addItemsToHeader(menuItems, header);
    }
}

function addLinksToStickyHeader(menuLinks, stickyHeader) {
    for (const menuLink of menuLinks) {
        const headerItem = menuLink.cloneNode(true);

        headerItem.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only';

        stickyHeader.appendChild(headerItem);
    }
}

function initStickyHeader() {
    const callback = (mutationList, observer) => {
        const stickyHeaders = document.querySelectorAll('.vector-sticky-header-icons');

        if (stickyHeaders.length > 0) {
            observer.disconnect();

            const menuLinks = document.querySelectorAll('#vector-user-links-dropdown a');

            for (const header of stickyHeaders) {
                addLinksToStickyHeader(menuLinks, header);
            }
        }
    };

    const stickyHeader = document.querySelector('.vector-sticky-header-end');
    const observer     = new MutationObserver(callback);

    observer.observe(stickyHeader, {childList: true, subtree: true});
}

function hideUserMenu() {
    const userMenus = document.querySelectorAll('#vector-user-links-dropdown');

    for (const menu of userMenus) {
        menu.style.display = "none";
    }
}

function addUserMenuItemsToHeader() {
    initHeader();
    initStickyHeader();
    hideUserMenu();
}

addUserMenuItemsToHeader();