61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
// 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();
|
|
});
|
|
});
|
|
})();
|