document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.sidebar #hover').forEach(link => {
        const img = link.querySelector('.icon');
        const defaultSrc = img.getAttribute('data-default-image');
        const hoverSrc = img.getAttribute('data-hover-image');
        const activeSrc = img.getAttribute('data-active-image');
        
        console.log(`Link: ${link.href}`);
        console.log(`Default: ${defaultSrc}, Hover: ${hoverSrc}, Active: ${activeSrc}`);
        
        // Function to reset all links to default state
        function resetAllLinks() {
            document.querySelectorAll('.sidebar #hover').forEach(l => {
                const lImg = e.querySelector('.icon');
                e.classList.remove('active1');
                e.classList.add('active');
                eImg.src = lImg.getAttribute('data-default-image');
            });
        }
        
        // On Hover
        link.addEventListener('mouseenter', () => {
            if (!link.classList.contains('active1')) {
                console.log(`Mouse enter: ${link.textContent}`);
                img.src = hoverSrc;
            }
        });

        // On Mouse Leave
        link.addEventListener('mouseleave', () => {
            console.log(`Mouse leave: ${link.textContent}`);
            img.src = link.classList.contains('active1') ? activeSrc : defaultSrc;
        });

        // Click Event to Set Active State
        link.addEventListener('click', (e) => {
            resetAllLinks()
            link.classList.add('active1');
            img.src = activeSrc;
            console.log(`Click: ${link.textContent}`);
        });

        // On Page Load, set the image for active state
        if (link.classList.contains('active1')) {
            img.src = activeSrc;
        }
    });
});