Discourse topbar menu

MenuInjector.js

(function (window) {
    'use strict';
    
    const MOBILE_WIDTH_LIMIT = 768;
    const MENU_BAR_HEIGHT = 45;

    let headerElement = document.querySelector('.docked .d-header') || false;
    let menuElement;

    function hideOnMobile () {
        if(window.innerWidth <= MOBILE_WIDTH_LIMIT) {
            menuElement.style.display = 'none';
            pushTopBar(0);
            window.scrollTo(0, +window.scrollY + 1); // Force topbar component to repaint properly
        } else {
            if(menuElement.style.display !== 'flex') {
                menuElement.style.display = 'flex';
                 pushTopBar(MENU_BAR_HEIGHT);
                 window.scrollTo(0, +window.scrollY + 1); // Force topbar component to repaint properly
            }  
        }
    }

    function createMenuBar () {
        menuElement = document.createElement('DIV');

        menuElement.id = 'ppc-custom-menubar';
        menuElement.innerHTML = `
            <style>
                #ppc-custom-menubar {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    min-height: ${MENU_BAR_HEIGHT}px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #f8f8f8;
                }
                #ppc-custom-menubar ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    display: flex;
                }
                #ppc-custom-menubar ul li a {
                    display: block;
                    padding: 10px 20px;
                    font-size: 16px;
                    margin: 0 10px;
                    color: #40b058;
                    box-shadow: 0 2px 0 rgba(0,0,0,0);
                    transition: box-shadow 0.3s linear;
                }
                #ppc-custom-menubar ul li a:hover {
                    box-shadow: 0 2px 0 #40b058;
                }
            </style>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
            </ul>`;
    
        document.body.appendChild(menuElement);
    }


    function pushTopBar (amount) {
        amount = amount + 'px';

        if(headerElement) {
            //headerElement.style.marginTop = amount;
            document.body.style.marginTop = amount;
        }
    }

    function runBar () {
        pushTopBar(MENU_BAR_HEIGHT);
        createMenuBar();
        window.onresize = hideOnMobile;
        window.scrollTo(0, 1); // Force topbar component to repaint properly
    }

    return runBar();
})(window)