// 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();
    });
  });
})();