mcp-quiz-server/public/dist/components/SidebarToggle.js

🧠 AI-Powered Quiz Management via Model Context Protocol (MCP) - Create, manage, and take quizzes directly from VS Code, Claude, and other AI agents.

import { SettingsService } from '../services/SettingsService';
import { Component } from './Component';
export class SidebarToggle extends Component {
    constructor() {
        super('#sidebar');
        this.expanded = true;
        this.eventsbound = false;
        this.isToggling = false;
        this.settingsService = SettingsService.getInstance();
        SidebarToggle.instance = this;
        this.sidebar = document.querySelector('#sidebar');
        this.mainContent = document.querySelector('#main-content');
        this.floatingToggle = document.querySelector('#floating-sidebar-toggle');
        this.sidebarToggleBtn = document.querySelector('#sidebar-toggle');
        this.sidebarToggleIcon = this.sidebarToggleBtn?.querySelector('i[data-lucide]');
        console.log('SidebarToggle Debug:', {
            sidebar: !!this.sidebar,
            mainContent: !!this.mainContent,
            toggleBtn: !!this.sidebarToggleBtn,
            floatingToggle: !!this.floatingToggle,
            sidebarClasses: this.sidebar?.className,
        });
    }
    static getInstance() {
        return SidebarToggle.instance || null;
    }
    isMobileViewport() {
        return window.innerWidth < 768;
    }
    autoHideOnMobileForQuiz() {
        if (this.isMobileViewport() && this.expanded) {
            console.log('🔀 Auto-hiding sidebar on mobile for quiz start');
            this.setSidebarState(false);
        }
    }
    render() {
    }
    onMount() {
        this.initializeSidebarState();
        this.bindEvents();
    }
    bindEvents() {
        if (this.eventsbound)
            return;
        this.eventsbound = true;
        this.sidebarToggleBtn?.addEventListener('click', e => {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            console.log('Sidebar toggle button clicked');
            this.handleToggleClick();
        });
        this.floatingToggle?.addEventListener('click', e => {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            console.log('Floating toggle button clicked');
            this.handleToggleClick();
        });
        document.addEventListener('keydown', e => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
                e.preventDefault();
                e.stopPropagation();
                console.log('Keyboard shortcut triggered');
                this.handleToggleClick();
            }
        });
    }
    handleToggleClick() {
        if (this.isToggling) {
            console.log('Toggle already in progress, ignoring click');
            return;
        }
        this.isToggling = true;
        this.toggleSidebar();
        setTimeout(() => {
            this.isToggling = false;
        }, 100);
    }
    initializeSidebarState() {
        const settings = this.settingsService.getSettings();
        this.expanded = settings.ui.sidebarExpanded !== false;
        this.updateUI();
    }
    toggleSidebar() {
        console.log('🔄 toggleSidebar called, current expanded:', this.expanded);
        this.expanded = !this.expanded;
        console.log('🔄 toggleSidebar new expanded:', this.expanded);
        this.setSidebarState(this.expanded);
    }
    setSidebarState(expanded) {
        this.expanded = expanded;
        this.settingsService.updateUISettings({ sidebarExpanded: expanded });
        this.updateUI();
    }
    updateUI() {
        console.log('updateUI called, expanded:', this.expanded);
        console.log('DOM elements:', {
            sidebar: !!this.sidebar,
            mainContent: !!this.mainContent,
            sidebarClasses: this.sidebar?.className,
        });
        if (!this.sidebar || !this.mainContent) {
            console.error('Critical: Sidebar or main content elements not found!');
            return;
        }
        if (this.expanded) {
            console.log('Setting expanded state...');
            this.sidebar.classList.remove('hidden');
            console.log('After setting expanded - Sidebar classes:', this.sidebar.className);
            this.mainContent.classList.remove('main-sidebar-collapsed');
            this.mainContent.classList.add('main-sidebar-expanded');
            console.log('After setting expanded - Main content classes:', this.mainContent.className);
            if (this.floatingToggle) {
                this.floatingToggle.classList.add('hidden');
            }
            if (this.sidebarToggleIcon) {
                this.sidebarToggleIcon.setAttribute('data-lucide', 'panel-left-close');
            }
            if (this.sidebarToggleBtn) {
                this.sidebarToggleBtn.title = 'Hide sidebar (Ctrl+B)';
            }
        }
        else {
            console.log('Setting collapsed state...');
            this.sidebar.classList.add('hidden');
            console.log('After setting collapsed - Sidebar classes:', this.sidebar.className);
            this.mainContent.classList.remove('main-sidebar-expanded');
            this.mainContent.classList.add('main-sidebar-collapsed');
            console.log('After setting collapsed - Main content classes:', this.mainContent.className);
            if (this.floatingToggle) {
                this.floatingToggle.classList.remove('hidden');
            }
            if (this.sidebarToggleIcon) {
                this.sidebarToggleIcon.setAttribute('data-lucide', 'panel-left-open');
            }
            if (this.sidebarToggleBtn) {
                this.sidebarToggleBtn.title = 'Show sidebar (Ctrl+B)';
            }
        }
        if (window.lucide) {
            window.lucide.createIcons();
        }
        const isWideMode = this.mainContent.classList.contains('wide-mode');
        if (isWideMode && this.expanded) {
            this.mainContent.classList.add('sidebar-expanded');
        }
        else {
            this.mainContent.classList.remove('sidebar-expanded');
        }
    }
    getSidebarExpanded() {
        return this.expanded;
    }
    setSidebar(expanded) {
        this.setSidebarState(expanded);
    }
}
//# sourceMappingURL=SidebarToggle.js.map