MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 498: / Line 498: @@
      init();
    }
+  /* ── Inject "About" link into the header navigation ──────────────────
+   * Adds a clean "About" link into the Vector 2022 header, positioned
+   * after the site title/logo area. Uses the existing header link style. */
+  document.addEventListener( 'DOMContentLoaded', function () {
+    /* Only inject once */
+    if ( document.getElementById( 'gr-about-link' ) ) return;
+    /* Target: the end of the header start container */
+    var headerEnd = document.querySelector( '.vector-header-end' ) ||
+                    document.querySelector( '#vector-user-links' ) ||
+                    document.querySelector( '.mw-header' );
+    if ( !headerEnd ) return;
+    var aboutLink = document.createElement( 'a' );
+    aboutLink.id        = 'gr-about-link';
+    aboutLink.href      = ( window.mw
+      ? mw.util.getUrl( 'Grantha:About' )
+      : '/wiki/Grantha:About' );
+    aboutLink.textContent = 'About';
+    aboutLink.style.cssText = [
+      'color: rgba(255,255,255,0.88)',
+      'font-size: 0.88em',
+      'font-family: system-ui, sans-serif',
+      'font-weight: 500',
+      'text-decoration: none',
+      'padding: 4px 10px',
+      'border-radius: 4px',
+      'margin-right: 6px',
+      'transition: color 0.15s, background 0.15s',
+      'white-space: nowrap',
+    ].join(';');
+    aboutLink.addEventListener( 'mouseover', function () {
+      this.style.color = '#fff';
+      this.style.background = 'rgba(255,255,255,0.12)';
+    } );
+    aboutLink.addEventListener( 'mouseout', function () {
+      this.style.color = 'rgba(255,255,255,0.88)';
+      this.style.background = 'transparent';
+    } );
+    /* Insert before the user-links block so it sits left of the username */
+    var userLinks = document.querySelector( '.vector-user-links' ) ||
+                    document.querySelector( '#pt-userpage' );
+    if ( userLinks && userLinks.parentNode === headerEnd ) {
+      headerEnd.insertBefore( aboutLink, userLinks );
+    } else {
+      headerEnd.appendChild( aboutLink );
+    }
 }() );