Gymnasium/_static/versioning/versioning_menu.html

<div class="versions_menu">
    <div class="versions_menu__header">
        <span id="versions_menu-current-version"></span>
        <i class="icon"><svg><use href="#svg-arrow-right"></use></svg></i>
        <!-- Current Version -->
    </div>
    <div class="versions_menu__content">
        <span>Versions</span>
        <ul class="versions_menu__list">
            <!-- Versions list -->
        </ul>
    </div>
    <style>
        .versions_menu {
            position: fixed;
            bottom: 0;
            right: 30px;
            font-family: var(--font-stack, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
            border: 1px solid var(--color-background-border, #eeebee);
            z-index: 98;
        }

        .versions_menu__header {
            display: flex;
            padding: 8px 10px;
            font-size: 14px;
            border-bottom: 1px solid var(--color-background-border, #eeebee);
            background-color: var(--color-background-secondary, #f8f9fb);
            cursor: pointer;
        }

        .versions_menu__header:hover {
            background-color: var(--color-background-hover, #efeff4);
        }

        .versions_menu__header span {
            display: flex;
            flex: 1;
        }

        .versions_menu__header svg {
            transform: rotate(-90deg);
        }

        .versions_menu.active .versions_menu__header svg {
            transform: rotate(90deg);
        }

        .versions_menu__content {
            width: 200px;
            max-height: 0;
            transition: max-height 0.5s ease-in-out;
            background-color: var(--color-background-primary, #fff);
            box-sizing: border-box;
        }

        .versions_menu.active .versions_menu__content {
            max-height: 200px;
        }

        .versions_menu__content span {
            display: block;
            padding: 8px 10px;
            font-size: 12px;
            text-transform: uppercase;
            color: var(--color-foreground-muted, #646776);
        }

        .versions_menu__list {
            list-style: none;
            padding: 0 8px 8px;
            margin: 0;
        }

        .versions_menu__list li {}

        .versions_menu__list li a {
            display: block;
            padding: 4px 10px;
            font-size: 14px;
            color: var(--color-link, #2962ff);
            text-decoration: none;
            cursor: pointer;
        }

        .versions_menu__list li:hover {
            background-color: var(--color-background-hover, #efeff4)
        }
        @media screen and (max-width: 400px) {
            .versions_menu__content {
                width: 140px;
            }
        }
    </style>
    <script>
        const githubUser = versioningConfig.githubUser;
        const repo = versioningConfig.githubRepo;

        const menuElem = document.querySelector(".versions_menu");
        const headerElem = document.querySelector(".versions_menu__header");
        const versionElemList = document.querySelector(".versions_menu__list");

        headerElem.onclick = (e) => {
            e.stopPropagation();
            if (menuElem.classList.contains("active")) {
                menuElem.classList.remove("active");
            } else {
                menuElem.classList.add("active");
            }
        }

        document.addEventListener("click", () => {
            menuElem.classList.remove("active");
        });

        const sortVersions = (a, b) => {
            if (a.replace("v", "") > b.replace("v", ""))
                return -1
            else if (a.replace("v", "") < b.replace("v", ""))
                return 1
            else
                return 0
        }

        if ((githubUser !== null && githubUser !== "") || (repo !== null && repo !== "")) {
            const basePath = "";
            const mainBranchName = "main"
            const apiUrl = `https://api.github.com/repos/${githubUser}/${repo}/git/trees/gh-pages`;
            const versionRegex = new RegExp(/[vV]?\d+\.\d+(\.?\d+)*/);
            fetch(apiUrl).then(response => {
                if (response.status !== 200) {
                    console.warn("Unable to load repository tree, the repository must be public", response);
                    return;
                }
                response.json().then(json => {
                    const versions = json.tree.filter(v => versionRegex.test(v.path)).map(v => v.path);
                    versions.sort(sortVersions);
                    // verify if exists a directory with main version
                    if (json.tree.filter(v => v.path == mainBranchName).length > 0) {
                        versions.unshift(mainBranchName);
                    }

                    // Get current path
                    let currentPath = document.location.href.split(document.location.origin)[1];
                    let currentVersion = "";
                    // https://domain.com/basePath/1.2.0/content/index.html -> /1.2.0/content/index.html
                    if (basePath !== "") {
                        currentPath = currentPath.split(basePath).slice(1).join("/");
                    }
                    // /v1.2.0/content/index.html -> /content/index.html
                    if (versionRegex.test(currentPath.split("/")[1]) || currentPath.split("/")[1] === mainBranchName) {
                        currentVersion = currentPath.split("/")[1];
                        currentPath = "/" + currentPath.split("/").slice(2).join("/");
                    }

                    // Create versions list
                    const listElems = [];
                    let latestVersion = "";
                    for (const version of versions) {
                        const liElem = document.createElement("li");
                        const aElem = document.createElement("a");

                        if (version === mainBranchName) {
                            aElem.textContent = version + " (unstable)";
                        } else {
                            if (latestVersion === "") {
                                latestVersion = version;
                                aElem.textContent = latestVersion + " (latest)";
                            } else {
                                aElem.textContent = version;
                            }
                        }

                        aElem.href = version === latestVersion ?
                            `${basePath}${currentPath}` :
                            `${basePath}/${version}${currentPath}`;
                        liElem.appendChild(aElem);
                        listElems.push(liElem);
                        versionElemList.appendChild(liElem);
                    }

                    // Set current version to menu header
                    currentVersionStr = currentVersion || latestVersion;
                    if (currentVersionStr === mainBranchName) {
                        currentVersionStr = currentVersionStr + " (unstable)";
                    } else if (currentVersionStr === latestVersion) {
                        currentVersionStr = currentVersionStr + " (latest)";
                    }
                    document.getElementById("versions_menu-current-version").innerHTML = currentVersionStr;
                });
            });
        } else {
            console.error("Invalid versioning configuration");
        }
    </script>
</div>