No title
document.addEventListener('DOMContentLoaded', () => {
const hamburgerMenu = document.querySelector('.hamburger-menu');
const sidebar = document.querySelector('.sidebar');
const body = document.body;
// Toggle sidebar on hamburger menu click
hamburgerMenu.addEventListener('click', () => {
sidebar.classList.toggle('active');
hamburgerMenu.classList.toggle('active');
body.classList.toggle('sidebar-open'); // Add class to body for overlay
});
// Close sidebar when clicking outside on mobile (overlay)
body.addEventListener('click', (event) => {
if (body.classList.contains('sidebar-open') &&
!sidebar.contains(event.target) &&
!hamburgerMenu.contains(event.target)) {
sidebar.classList.remove('active');
hamburgerMenu.classList.remove('active');
body.classList.remove('sidebar-open');
}
});
// Optional: Close sidebar when a sidebar link is clicked (for better UX on mobile)
const sidebarLinks = document.querySelectorAll('.sidebar-link');
sidebarLinks.forEach(link => {
link.addEventListener('click', () => {
if (window.innerWidth <= 768) { // Only on mobile
sidebar.classList.remove('active');
hamburgerMenu.classList.remove('active');
body.classList.remove('sidebar-open');
}
// Remove active class from all sidebar links
sidebarLinks.forEach(l => l.classList.remove('active-sidebar-link'));
// Add active class to the clicked link
link.classList.add('active-sidebar-link');
});
});
// Handle tool card button clicks (placeholder for actual tool functionality)
const toolButtons = document.querySelectorAll('.glow-button');
toolButtons.forEach(button => {
button.addEventListener('click', (event) => {
const card = event.target.closest('.tool-card');
const toolName = card.dataset.tool;
alert(`Launching ${toolName.replace(/-/g, ' ')}! (This is a placeholder action)`);
// Here you would typically load the tool's UI or navigate to its page
});
});
});