document.addEventListener('DOMContentLoaded', function() {
        const toggleSwitcher = document.getElementById('toggle-switcher');
        const styleSwitcher = document.getElementById('style-switcher');
        const themeLink = document.getElementById('theme');
        const navbarBrandImg = document.querySelector('.navbar-brand img');
    
        toggleSwitcher.addEventListener('click', function() {
            if (this.classList.contains('opened')) {
                this.classList.remove('opened');
                styleSwitcher.style.right = '-175px';  // Use style directly for animation
            } else {
                this.classList.add('opened');
                styleSwitcher.style.right = '-15px';
            }
            });
        
            const themeButtons = document.querySelectorAll('[id^="theme-"]');
            themeButtons.forEach(function(button) {
            button.addEventListener('click', function(event) {

                event.preventDefault();
                let theme = button.id.replace('theme-', '');
                if(theme == 'blue')
                {
                    themeLink.href = `assets/css/main.css`;
                    navbarBrandImg.src = `assets/img/logo.png`;
                }
                else
                {
                    themeLink.href = `assets/css/main-${theme}.css`;
                    navbarBrandImg.src = `assets/img/logo-${theme}.png`;
                }
            });
        });
});