BETTER

assets/templates/base.njk

@@ -76,6 +76,29 @@
      data-bs-theme="dark">
   <div class="container-xl">
     <a class="navbar-brand" href="./">Bible</a>
+    {# The reference picker: which book you are in, and where in it to go.
+       Outside the collapse deliberately -- it is the main way of moving around
+       a book now that the chapter list is gone from the page, and a chapter
+       picker behind a hamburger is no use on a phone.
+
+       Empty here and filled by app.js from the book on the page. The verse
+       list has to be rebuilt in the browser every time the chapter changes, so
+       there is nothing for a template to usefully render first.
+
+       d-none for the empty state rather than the hidden attribute: Bootstrap
+       declares .d-flex after Reboot's [hidden] rule, both !important and at
+       the same specificity, so the utility would win. #}
+    <div class="reference navbar-text d-none align-items-center gap-1 ms-3"
+         id="reference">
+      <span class="reference-book text-light fw-semibold" id="reference-book"></span>
+      <label class="visually-hidden" for="reference-chapter">Chapter</label>
+      <select class="reference-chapter form-select form-select-sm"
+              id="reference-chapter"></select>
+      <span class="reference-sep text-light">:</span>
+      <label class="visually-hidden" for="reference-verse">Verse</label>
+      <select class="reference-verse form-select form-select-sm"
+              id="reference-verse"></select>
+    </div>
     <button class="navbar-toggler" type="button"
             data-bs-toggle="collapse" data-bs-target="#site-nav"
             aria-controls="site-nav" aria-expanded="false"