init projectmycelium

src/static/js/marketplace_layout.js

@@ -0,0 +1,60 @@
+// marketplace_layout.js
+// Handles marketplace sidebar toggle and backdrop interactions (CSP-compliant)
+
+(function () {
+  document.addEventListener('DOMContentLoaded', function () {
+    const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
+    const sidebar = document.getElementById('sidebar');
+    const sidebarBackdrop = document.getElementById('sidebarBackdrop');
+
+    if (!sidebarToggleBtn || !sidebar || !sidebarBackdrop) {
+      // Elements not present on this page; nothing to bind
+      return;
+    }
+
+    // Ensure clean state on page load
+    sidebar.classList.remove('show');
+    sidebarBackdrop.classList.remove('show');
+    sidebarToggleBtn.setAttribute('aria-expanded', 'false');
+
+    // Toggle sidebar visibility
+    sidebarToggleBtn.addEventListener('click', function (event) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      // Toggle visibility
+      sidebar.classList.toggle('show');
+      sidebarBackdrop.classList.toggle('show');
+
+      // Set aria-expanded for accessibility
+      const isExpanded = sidebar.classList.contains('show');
+      sidebarToggleBtn.setAttribute('aria-expanded', String(isExpanded));
+    });
+
+    // Close sidebar when clicking on backdrop
+    sidebarBackdrop.addEventListener('click', function (event) {
+      event.stopPropagation();
+      sidebar.classList.remove('show');
+      sidebarBackdrop.classList.remove('show');
+      sidebarToggleBtn.setAttribute('aria-expanded', 'false');
+    });
+
+    // Close sidebar when clicking on any link inside it
+    const sidebarLinks = sidebar.querySelectorAll('a.nav-link');
+    sidebarLinks.forEach((link) => {
+      link.addEventListener('click', function () {
+        // Small delay to ensure the link click happens
+        setTimeout(function () {
+          sidebar.classList.remove('show');
+          sidebarBackdrop.classList.remove('show');
+          sidebarToggleBtn.setAttribute('aria-expanded', 'false');
+        }, 100);
+      });
+    });
+
+    // Ensure links are clickable
+    sidebar.addEventListener('click', function (event) {
+      event.stopPropagation();
+    });
+  });
+})();