Enhance Add Pages Test

// Define the selectors for the menu wrapper, menu box and original content box
const menuSelector = '#root > [data-qa="box"] > [data-qa="box"]:first-child';
const originalBoxSelector = '#root > [data-qa="box"] > [data-qa="box"]:nth-child(2)';
const dashboardSpine = document.getElementById('dashboard-spine');

function injectCSS(customCSS) {
    const style = document.createElement('style');
    style.textContent = customCSS;
    document.head.appendChild(style);
}

function cloneAndModifyNavLink(newHref, newTitle, newSvg, callback) {

    if (!dashboardSpine) return;

    const navLinks = dashboardSpine.querySelectorAll('a[data-qa="navLink"]');
    if (navLinks.length === 0) return;

    const lastNavLink = navLinks[navLinks.length - 1];
    const newNavLink = lastNavLink.cloneNode(true);

    newNavLink.href = newHref;
    newNavLink.title = newTitle;
    newNavLink.setAttribute('aria-label', newTitle);
    newNavLink.classList.add('extLinks');  // Add the extLinks class

    const textElement = newNavLink.querySelector('p[data-qa="text"]');
    if (textElement) textElement.textContent = newTitle;

    const svgElement = newNavLink.querySelector('svg');
    if (svgElement && newSvg) {
        svgElement.outerHTML = newSvg;
    }

    const uniqueId = newHref.replace('#', '') + '-content';

    newNavLink.addEventListener('click', function(e) {
        e.preventDefault();


        // Remove the 'selected' class from any previously selected link
        const previouslySelectedLink = dashboardSpine.querySelector('a.selected');
        if (previouslySelectedLink) {
            previouslySelectedLink.classList.remove('selected');
        }
        newNavLink.classList.add('selected');


        // Hide the original box
        const originalBox = document.querySelector(originalBoxSelector);
        if (originalBox) {
            originalBox.style.display = 'none';  // Hide the original box
        }

        // Hide all other extLink content divs
        const otherDivs = document.querySelectorAll('.ext-page-wrapper');
        otherDivs.forEach(div => {
            div.style.display = 'none';  // Hide all other content divs
        });

        // Show the corresponding content div for the clicked extLink
        const contentDiv = document.getElementById(uniqueId);
        if (contentDiv) {
            contentDiv.style.display = 'block';  // Show the corresponding content div
        }

        // Show the menu box
        const menuBox = document.querySelector(menuSelector);
        if (menuBox) {
            menuBox.style.display = 'block';  // Show the menu
        }
    });


    if (callback && typeof callback === 'function') {
        const content = callback();

        const box = document.querySelector('#root > [data-qa="box"]');
        if (box) {
            const newDiv = document.createElement('div');
            newDiv.id = uniqueId;
            newDiv.style.display = 'none';
            newDiv.classList.add('ext-page-wrapper');
            newDiv.innerHTML = content;
            box.appendChild(newDiv);
        }
    }

    dashboardSpine.appendChild(newNavLink);
}

// Restore original box when an original link is clicked
const originalLinks = document.querySelectorAll('a[data-qa="navLink"]:not(.extLinks)');
originalLinks.forEach(link => {
    link.addEventListener('click', function() {
        const previouslySelectedLink = dashboardSpine.querySelector('a.extLinks.selected');
        if (previouslySelectedLink) {
            previouslySelectedLink.classList.remove('selected');
        }


        const originalBox = document.querySelector(originalBoxSelector);
        if (originalBox) {
            originalBox.style.display = 'flex';  // Show the original box
        }


        const otherDivs = document.querySelectorAll('.ext-page-wrapper');
        otherDivs.forEach(div => {
            div.style.display = 'none';  // Hide all extLink content divs
        });
    });
});

//fix spacing between default and new menu items
injectCSS(`#dashboard-spine > div:last-of-type {
height: 1px;
    background: white;
    margin: 0;
}`)

//Add CSS for spacing of pages etc
injectCSS(`
.ext-page-wrapper iframe {
width:100%;
height:100vh;
}
.ext-page-wrapper{
width:100%;
background:gray;
display:flex;
}

`)

cloneAndModifyNavLink('#hello', 'Hello World', `<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 485 485" xml:space="preserve"> <g> <path d="M382.5,69.429c-7.441,0-14.5,1.646-20.852,4.573c-4.309-23.218-24.7-40.859-49.148-40.859 c-7.68,0-14.958,1.744-21.467,4.852C285.641,16.205,265.932,0,242.5,0c-23.432,0-43.141,16.206-48.533,37.995 c-6.508-3.107-13.787-4.852-21.467-4.852c-27.57,0-50,22.43-50,50v122.222c-6.129-2.686-12.891-4.187-20-4.187 c-27.57,0-50,22.43-50,50V354c0,72.233,58.766,131,131,131h118c72.233,0,131-58.767,131-131V119.429 C432.5,91.858,410.07,69.429,382.5,69.429z M402.5,354c0,55.691-45.309,101-101,101h-118c-55.691,0-101-45.309-101-101V251.178 c0-11.028,8.972-20,20-20s20,8.972,20,20v80h30V83.143c0-11.028,8.972-20,20-20s20,8.972,20,20v158.035h30V50 c0-11.028,8.972-20,20-20c11.028,0,20,8.972,20,20v191.178h30V83.143c0-11.028,8.972-20,20-20s20,8.972,20,20v158.035h30v-121.75 c0-11.028,8.972-20,20-20s20,8.972,20,20V354z"/> </g> </svg>`, () => {
    //PAGE HTML GOES HERE
    return `<div><h1 style="color:red;">HELLO WORLD</h1></div>`;
});

cloneAndModifyNavLink('#google', 'Google', `
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 26 2 C 13.308594 2 3 12.308594 3 25 C 3 37.691406 13.308594 48 26 48 C 35.917969 48 41.972656 43.4375 45.125 37.78125 C 48.277344 32.125 48.675781 25.480469 47.71875 20.9375 L 47.53125 20.15625 L 46.75 20.15625 L 26 20.125 L 25 20.125 L 25 30.53125 L 36.4375 30.53125 C 34.710938 34.53125 31.195313 37.28125 26 37.28125 C 19.210938 37.28125 13.71875 31.789063 13.71875 25 C 13.71875 18.210938 19.210938 12.71875 26 12.71875 C 29.050781 12.71875 31.820313 13.847656 33.96875 15.6875 L 34.6875 16.28125 L 41.53125 9.4375 L 42.25 8.6875 L 41.5 8 C 37.414063 4.277344 31.960938 2 26 2 Z M 26 4 C 31.074219 4 35.652344 5.855469 39.28125 8.84375 L 34.46875 13.65625 C 32.089844 11.878906 29.199219 10.71875 26 10.71875 C 18.128906 10.71875 11.71875 17.128906 11.71875 25 C 11.71875 32.871094 18.128906 39.28125 26 39.28125 C 32.550781 39.28125 37.261719 35.265625 38.9375 29.8125 L 39.34375 28.53125 L 27 28.53125 L 27 22.125 L 45.84375 22.15625 C 46.507813 26.191406 46.066406 31.984375 43.375 36.8125 C 40.515625 41.9375 35.320313 46 26 46 C 14.386719 46 5 36.609375 5 25 C 5 13.390625 14.386719 4 26 4 Z"/></svg>`, () => {
    return `<div><iframe src="https://www.google.com/search?igu=1"></iframe></div>`;
});