MediaWiki:Common.js

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

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

    // 2. Remove all Vector/mobile headers outright
    [
      'header#mw-head',
      '#mw-head-base',
      '#mw-navigation',
      '#p-logo',
      '#mw-panel',
      '[id^="mw-mf-"]'
    ].forEach(sel => document.querySelectorAll(sel).forEach(el => el.remove()));

    // 3. Build user area
    const userName = mw.config.get('wgUserName');
    let userArea = '';
    if ( userName ) {
      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>`;
    }

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

    // 5. Inject
    $('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);
});