PeerTube - Menu Enhancer

/** === LINKS ===
 * Simple add your links into the MENU_LINKS array following the example format
 * It will be added to the menu in the same order as you defined it
 */

/** === SEPARATOR ===
 * Like our example, use {name: "separator"} to add a separator to the menu
 */

/** === ICONS ===
 * You can use https://css.gg, icons are automatically imported if start with gg-*** (Ex: gg-game).
 * Else, you can use https://fontawesome.com/icons/ or any other custom icon library.
 * Just import the CSS manually.
 **/

// EDIT HERE
var MENU_LINKS = [
    {
        name: "Gaming",
        url: "/videos/recently-added?languageOneOf=fr&categoryOneOf=7&c=true&s=2",
        icon: "gg-games",
    },
    {
        name: "Kid's",
        url: "/videos/recently-added?languageOneOf=fr&categoryOneOf=17&c=true&s=2",
        icon: "gg-girl",
    },
    { name: "separator" },
    {
        name: "Pewtix - Dicutez de l\'actualité",
        url: "https://pewtix.com/",
        target: "_blank",
        icon: "gg-twitter"
    },
    {
        name: "Pixel - Partagez vos photos",
        url: "https://pixel.orion-hub.fr/",
        target: "_blank",
        icon: "gg-instagram"
    },
    { name: "separator" },
    {
        name: "Liberapay - Faire un Don",
        url: "https://liberapay.com/bthommy/",
        target: "_blank",
        icon: "gg-coffee"
    }
]

// END EDIT -- DO NOT TOUCH AFTER

/**
 * Wait for the DOM to be loaded
 * Then, init the custom menu
 */
window.addEventListener("DOMContentLoaded", (event) => {
    const wait__menuCustomInterval = setInterval(() => {
        let firstLink = document.querySelectorAll(
            '.menu-block a[href="/videos/overview"]'
        );
        if (firstLink.length > 0) {
            clearInterval(wait__menuCustomInterval);
            initCustomMenu(firstLink[0]);
        }
    }, 500);
});

/**
 * Init the custom menu
 * @param {HTMLElement} firstLink The first link of the menu
 * @returns {void}
 */
function initCustomMenu(linkTemplate) {
    //Parent node which contains 'Videos' title and the 3 links ('Découvrir', 'Tendances', 'Récemment ajoutées')
    const menuContainer = linkTemplate.parentNode;
    // Define head element
    const head = document.head;

    // Define and ADD custom CSS
    const customCSS = `
        hr {
          background-color: #ccc !important;
        }
        
        a.menu-link i {
          margin-right: 16px;
        }
    `;
    const style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(document.createTextNode(customCSS));
    head.appendChild(style);

    // Define separator
    const separator = document.createElement("hr");
    separator.setAttribute("width", "80%");
    separator.setAttribute("color", "white");
    separator.setAttribute("background-color", "white");
    separator.setAttribute("height", "1px");
    separator.setAttribute("visible", "true");

    //Adding links
    MENU_LINKS.forEach((link) => {
        if (link.name === "separator") {
            // Adding separator
            menuContainer.appendChild(separator.cloneNode());
        } else {
            // Adding link

            // Manage icon (automatically import if start with gg-*** from https://css.gg)
            let icon = "";
            if (link.icon.startsWith("gg-")) {
                icon = `<i class="${link.icon}"></i>`;
                const ggName = link.icon.replace("gg-", "");

                // Inject css in the head
                const cssLink = document.createElement("link");
                cssLink.type = "text/css";
                cssLink.rel = "stylesheet";
                cssLink.href = `https://css.gg/${ggName}.css`;
                head.appendChild(cssLink);
            } else {
                icon = `<i class="${link.icon}"></i>`;
            }

            // Create link
            const linkNode = linkTemplate.cloneNode();
            linkNode.setAttribute("href", link.url);
            linkNode.setAttribute("routerLink", link.url);
            linkNode.setAttribute("target", (link.target || "_self"));
            linkNode.innerHTML = icon + " " + link.name;

            // Add link to the menu
            menuContainer.appendChild(linkNode);
        }
    });
}