MediaWiki:Common.js

mw.loader.using(['mediawiki.util','mediawiki.user'], function () {
  function insertNavbar() {
    // 1. If we've already injected, bail
    if ( document.getElementById('drg-navbar') ) return;

    // 2. Grab your real logo SRC before we remove headers
    const logoSrc = document.querySelector('#p-logo img')?.src ||
                    '/images/3/3f/Myriad_logo_icon_transparent.png';

    // 3. Remove every Vector / MobileFrontend header element
    //    - body > header (Vector 2022)
    //    - header.vector-header, header#mw-header, nav.vector-header
    //    - MobileFrontend wrappers (#mw-mf-page-header, id^="mw-mf-")
    document.querySelectorAll('body > header').forEach(el => el.remove());
    [
      'header.vector-header',
      'header#mw-header',
      'nav.vector-header',
      '#mw-mf-page-header',
      '[id^="mw-mf-"]'
    ].forEach(sel =>
      document.querySelectorAll(sel).forEach(el => el.remove())
    );

    // 4. Build user area: dropdown if logged in, else Login button
    const userName = mw.config.get('wgUserName');
    let userArea;
    if ( userName ) {
      const personalMenu = $('#p-personal ul').clone();
      personalMenu.addClass('drg-user-dropdown');
      personalMenu.find('li').css('border','none');
      userArea = `<div class="drg-user">
        <span>Welcome, ${userName}</span>
        ${personalMenu.prop('outerHTML')}
      </div>`;
    } else {
      userArea = `<a class="drg-button" href="${
        mw.util.getUrl('Special:UserLogin')
      }">Login</a>`;
    }

    // 5. 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>`;

    // 6. Inject navbar into body
    $('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 = document.getElementById('footer-icons');
    if ( !icons ) return setTimeout(insertFooter, 100);
    $(icons).before(`
      <div id="drg-footer">
        <!-- (your existing footer markup here) -->
      </div>
    `);
  }

  // Run on DOM ready
  $(insertNavbar);
  $(insertFooter);
});