Auto-hide navigation on link click

[sunblaze]

Hide navigation sidebar when clicking anchor links on mobile devices. Previously, anchor links would change the page but the navigation sidebar would block the view.

[st0012]

I think we can simplify the implementation to this:

--- a/lib/rdoc/generator/template/darkfish/js/darkfish.js
+++ b/lib/rdoc/generator/template/darkfish/js/darkfish.js
@@ -103,19 +103,18 @@ function hookSidebar() {
   if (isSmallViewport) {
     navigation.hidden = true;
     navigationToggle.ariaExpanded = false;
-  }
-}
 
-function hookAnchorLinks() {
-  document.addEventListener('click', (e) => {
-    const anchor = e.target.closest('#navigation a[href^="#"]');
-    if (anchor && window.matchMedia("(max-width: 1023px)").matches) {
-      const navigation = document.querySelector('#navigation');
-      const navigationToggle = document.querySelector('#navigation-toggle');
-      navigation.hidden = true;
-      navigationToggle.ariaExpanded = false;
-    }
-  });
+    // hide navigation on link click when on small viewport
+    // this saves the user from having to click the toggle button again to hide the navigation
+    document.addEventListener('click', (e) => {
+      if (e.target.closest('#navigation a[href]')) {
+        const navigation = document.querySelector('#navigation');
+        const navigationToggle = document.querySelector('#navigation-toggle');
+        navigation.hidden = true;
+        navigationToggle.ariaExpanded = false;
+      }
+    });
+  }
 }
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -123,5 +122,4 @@ document.addEventListener('DOMContentLoaded', function() {
   hookSearch();
   hookFocus();
   hookSidebar();
-  hookAnchorLinks();
 });

Basically, we can register the event using the same small viewport check to make sure the condition is shared. WDYT?

[sunblaze]

Yes, your simplification should work too. But you can also get rid of these lines as well since they're already defined

const navigation = document.querySelector('#navigation');
const navigationToggle = document.querySelector('#navigation-toggle');

[st0012]

This is a great quality-of-life improvement. Thank you!