Panel handler

Now that you have added the iframe panel and launcher to your code, you will need add some logic to it.

Here is an exemple of how you can open/close the panel :

Open panel after 200 ms

function openPanel() {
    setTimeout(() => {
        // Show iframe panel
        let panelWindow = document.getElementById('gqwindow');
        panelWindow.style.width = "400px";
        panelWindow.style.transform = "translateX(0%)";

        // Show iframe launcher
        let launcher = document.getElementById('gqlauncher');
        launcher.style.right = "400px";

        // Flag on the state of the panel
        isPanelOpenedGlobal = true;
    }, 200);
}

Close panel

function closePanel() {
    // Hide iframe panel
    let panelWindow = document.getElementById('gqwindow');
    panelWindow.style.transform = "translateX(100%)";

    // Hide iframe launcher
    let launcher = document.getElementById('gqlauncher');
    launcher.style.right = "0%";

    // Flag on the state of the panel
    isPanelOpenedGlobal = false;
}

You can now have a handler function that uses those two functions to open/close the panel :

function handlePanel() {
    if (isPanelOpenedGlobal)
        closePanel();
    else
        openPanel();
}

Don't forget to attach the handlePanel function to your iframe launcher by adding and event listener on the 'click' event :

let launcher = document.getElementById('gqlauncher');
launcher.addEventListener('click', () => handlePanel())