Replace hamburger auto-close with in-place loading feedback

Pressing a menu link no longer closes the drawer. Instead the pressed row
holds full opacity while the rest of the menu dims and a spinner shows at
its trailing edge — mirroring the search modal's result loading treatment —
so the drawer stays open until the new page takes over. Modified/new-tab
clicks are left untreated, and the state is cleared on bfcache restore.

Author: lokesh

openlibrary/templates/lib/nav_head.html

@@ -174,10 +174,36 @@
       drawer.addEventListener('ol-drawer-after-hide', function() {
         trigger.setAttribute('aria-expanded', 'false');
       });
+
+      // Pressing a menu link navigates the whole window; the next page can take
+      // a beat to start painting. Flag the pressed row so it shows a spinner
+      // and the rest dim back (mirrors the search modal's result loading
+      // treatment) — the drawer stays open until the new page takes over.
       drawer.addEventListener('click', function(e) {
-        if (e.target.closest('a[href], button[type="submit"], button:not([type])')) {
-          drawer.open = false;
-        }
+        var el = e.target.closest('a[href], button[type="submit"], button:not([type])');
+        if (!el) return;
+        // New-tab / modified / non-left clicks don't navigate this window.
+        if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+        if (el.tagName === 'A' && el.target === '_blank') return;
+        var menu = drawer.querySelector('.drawer-menu');
+        if (menu) menu.classList.add('is-navigating');
+        el.classList.add('is-target');
+        // Mark the row too, so it stays lit while its siblings dim.
+        var row = el.closest('li');
+        if (row) row.classList.add('is-target-row');
+      });
+
+      // Restoring from bfcache (back/forward) reuses this DOM with the spinner
+      // still on the pressed row — clear it so the menu looks idle again.
+      window.addEventListener('pageshow', function(e) {
+        if (!e.persisted) return;
+        var menu = drawer.querySelector('.drawer-menu');
+        if (!menu) return;
+        menu.classList.remove('is-navigating');
+        Array.prototype.forEach.call(menu.querySelectorAll('.is-target, .is-target-row'), function(t) {
+          t.classList.remove('is-target');
+          t.classList.remove('is-target-row');
+        });
       });
     }
   })();

static/css/components/header-bar.css

@@ -837,3 +837,59 @@
     background-color: var(--white);
   }
 }
+
+/**
+ * Navigating (pressed menu link → page loading)
+ * When a link is pressed the whole window navigates, and the next page can
+ * take a beat to paint. During that gap the pressed row holds full opacity
+ * while the rest dim back and a spinner shows at its trailing edge. Mirrors
+ * the search modal's result loading treatment. The `is-navigating` /
+ * `is-target` classes are toggled by the inline script in nav_head.html.
+ */
+.drawer-menu.is-navigating .drawer-menu__subsection,
+.drawer-menu.is-navigating .drawer-menu__item,
+.drawer-menu.is-navigating .drawer-menu__login-links {
+  opacity: 0.4;
+}
+
+/* The row holding the pressed link stays lit. `is-target-row` is set on the
+   <li> (not the link) because opacity on the row compounds onto its children,
+   so lifting the link alone can't undo a dimmed parent. */
+.drawer-menu.is-navigating .is-target-row {
+  opacity: 1;
+}
+
+.drawer-menu .is-target {
+  position: relative;
+  /* Reserve room at the trailing edge so the spinner never overlaps the label. */
+  padding-right: var(--spacing-2xl);
+}
+
+/* Spinner: a currentcolor ring with one transparent edge, spun by keyframes
+   (the same construction as the <ol-button> loading spinner). */
+.drawer-menu .is-target::after {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-inset-sm);
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--border-radius-circle);
+  animation: ol-drawer-menu-spin 0.7s linear infinite;
+}
+
+@keyframes ol-drawer-menu-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-menu .is-target::after {
+    animation-duration: 2s;
+  }
+}