MediaWiki:Common.js

mw.loader.using(['mediawiki.util','mediawiki.user']).then(function () {
    function insertNavbar() {
        if (document.getElementById('drg-navbar')) return;

        const userName = mw.config.get('wgUserName');
        const isLoggedIn = userName !== null;
        let userArea = '';

        if (isLoggedIn) {
            // Clone personal links into dropdown
            const personal = $('#p-personal ul').clone();
            personal.addClass('drg-user-dropdown');
            personal.find('li').css('border','none');
            userArea = `<div class="drg-user"><span>Welcome, ${userName}</span>${personal.prop('outerHTML')}</div>`;
        } else {
            userArea = `<a class="drg-button" href="${mw.util.getUrl('Special:UserLogin')}">Login</a>`;
        }

        // Grab your wiki’s logo (fallback if none)
        const logoSrc = $('#p-logo img').attr('src') || '/images/3/3f/Myriad_logo_icon_transparent.png';

        // Build search form
        const searchForm = `
            <form class="drg-search" action="${mw.util.getUrl('Special:Search')}" method="get">
                <input type="search" name="search" placeholder="Search Disaster Risk Gateway">
                <input type="submit" value="Search">
            </form>`;

        // Inject navbar
        $('body').prepend(`
            <div id="drg-navbar">
                <div class="drg-navbar-container">
                    <a href="${mw.util.getUrl('Main_Page')}" class="drg-navbar-logo">
                        <img src="${logoSrc}" alt="MYRIAD Logo">
                    </a>
                    <nav class="drg-navbar-links">
                        <a href="${mw.util.getUrl('Catalogue')}">Catalogue</a>
                        <a href="${mw.util.getUrl('Definitions')}">Definitions</a>
                        <a href="${mw.util.getUrl('Resources')}">Resources</a>
                        <a href="${mw.util.getUrl('Contribute')}">Contribute</a>
                    </nav>
                    ${searchForm}
                    <div class="drg-navbar-actions">
                        ${userArea}
                    </div>
                </div>
            </div>
        `);
    }

    function insertFooter() {
        const $icons = $('#footer-icons');
        if (!$icons.length) return setTimeout(insertFooter, 100);
        $icons.before(`
            <div id="drg-footer">
                <div class="drg-columns">
                    <div class="drg-column drg-column-left">
                        <a href="${mw.util.getUrl('Disaster_Risk_Gateway')}">About</a>
                        <a href="${mw.util.getUrl('Disaster_Risk_Gateway:Privacy_Notice')}">Privacy Notice</a>
                        <a href="${mw.util.getUrl('Disaster_Risk_Gateway:Terms_of_Use')}">Terms of Use</a>
                        <a href="mailto:DisasterRiskGateway@bgs.ac.uk"><strong>Contact Us</strong></a>
                    </div>
                    <div class="drg-divider"></div>
                    <div class="drg-column drg-column-center">
                        <div class="drg-eu-flag">
                            <img src="/images/e/e3/Normal-reproduction-high-resolution_2.jpg" alt="EU logo">
                        </div>
                        <div class="drg-eu-text">
                            MYRIAD-EU project has received funding from the European Union’s Horizon 2020 Programme under Grant Agreement No. 101003276.
                        </div>
                    </div>
                    <div class="drg-divider"></div>
                    <div class="drg-column drg-column-right">
                        <a href="https://www.myriadproject.eu" target="_blank" rel="noopener">MYRIAD-EU</a>
                        <a href="https://be.linkedin.com/company/myriad-eu-project" target="_blank" rel="noopener">LinkedIn</a>
                        <a href="#" target="_blank" rel="noopener">Dashboard</a>
                    </div>
                </div>
                <div class="drg-disclaimer">
                    Hosted by the British Geological Survey. Content responsibility lies with the MYRIAD-EU project. Comments? <a href="mailto:DisasterRiskGateway@bgs.ac.uk">Email us</a>.
                </div>
            </div>
        `);
    }

    $(insertNavbar);
    $(insertFooter);
});