small fixes

assets/views/base.html

@@ -29,14 +29,29 @@
         if (currentTheme() === 'system') applyTheme('system');
       });
       // Mark the active top-nav link via aria-current (styled with Tailwind).
+      //
+      // Pages that live under a category but not at its URL (a product detail
+      // page) declare it via <main data-active-category>; without that the
+      // category sidebar would show nothing selected the moment you open a
+      // product. `window.activeCategory` is read by the sidebar's accordion
+      // groups, which are hx-preserve'd and so initialise only once — the
+      // `nav-category` event is what reaches them on later navigations.
       function markActiveNav() {
         var path = location.pathname;
+        var main = document.querySelector('main[data-active-category]');
+        var cat = main ? main.getAttribute('data-active-category') : '';
+        var catPath = cat ? '/category/' + cat : null;
+        window.activeCategory = cat;
         document.querySelectorAll('a[data-nav]').forEach(function (a) {
           var h = a.getAttribute('data-nav');
-          var on = h === path || (h !== '/' && path.indexOf(h) === 0);
+          // A declared category wins outright: on /shop/{slug} the prefix rule
+          // would otherwise light up "all products" alongside the category.
+          var on = h === path || h === catPath
+            || (!catPath && h !== '/' && path.indexOf(h) === 0);
           if (on) a.setAttribute('aria-current', 'page');
           else a.removeAttribute('aria-current');
         });
+        if (cat) window.dispatchEvent(new CustomEvent('nav-category', { detail: cat }));
       }
       document.addEventListener('DOMContentLoaded', markActiveNav);
       document.addEventListener('htmx:afterSwap', markActiveNav);
@@ -250,7 +265,7 @@
       </aside>
       {% endif %}
 
-      <main class="min-w-0 flex-1">
+      <main data-active-category="{% block nav_category %}{% endblock nav_category %}" class="min-w-0 flex-1">
         {% block content %}{% endblock content %}
       </main>
       </div>