script.js

// Stake1071 Sidebar Menu JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.getElementById('sidebar');
    const mobileToggle = document.getElementById('mobileToggle');
    const menuItems = document.querySelectorAll('.menu-item');
    
    // Mobile menu toggle functionality
    if (mobileToggle) {
        mobileToggle.addEventListener('click', function() {
            sidebar.classList.toggle('show');
            
            // Toggle mobile overlay
            let overlay = document.querySelector('.mobile-overlay');
            if (!overlay) {
                overlay = document.createElement('div');
                overlay.className = 'mobile-overlay';
                document.body.appendChild(overlay);
                
                // Close menu when overlay is clicked
                overlay.addEventListener('click', function() {
                    sidebar.classList.remove('show');
                    overlay.classList.remove('show');
                });
            }
            
            overlay.classList.toggle('show');
        });
    }
    
    // Add active state to menu items
    menuItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Remove active class from all items
            menuItems.forEach(mi => mi.classList.remove('active'));
            
            // Add active class to clicked item
            this.classList.add('active');
            
            // Close mobile menu after clicking
            if (window.innerWidth < 1024) {
                sidebar.classList.remove('show');
                const overlay = document.querySelector('.mobile-overlay');
                if (overlay) overlay.classList.remove('show');
            }
            
            // Add click animation
            this.style.transform = 'scale(0.98)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
    
    // Handle window resize
    window.addEventListener('resize', function() {
        if (window.innerWidth >= 1024) {
            sidebar.classList.remove('show');
            const overlay = document.querySelector('.mobile-overlay');
            if (overlay) overlay.classList.remove('show');
        }
    });
    
    // Smooth scroll for anchor links
    const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
    smoothScrollLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        // Close mobile menu with Escape key
        if (e.key === 'Escape' && sidebar.classList.contains('show')) {
            sidebar.classList.remove('show');
            const overlay = document.querySelector('.mobile-overlay');
            if (overlay) overlay.classList.remove('show');
        }
        
        // Navigate menu items with arrow keys
        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
            const activeItem = document.querySelector('.menu-item.active');
            let targetItem;
            
            if (e.key === 'ArrowDown') {
                targetItem = activeItem ? activeItem.nextElementSibling : menuItems[0];
                if (!targetItem || !targetItem.classList.contains('menu-item')) {
                    targetItem = menuItems[0];
                }
            } else {
                targetItem = activeItem ? activeItem.previousElementSibling : menuItems[menuItems.length - 1];
                if (!targetItem || !targetItem.classList.contains('menu-item')) {
                    targetItem = menuItems[menuItems.length - 1];
                }
            }
            
            if (targetItem && targetItem.classList.contains('menu-item')) {
                menuItems.forEach(mi => mi.classList.remove('active'));
                targetItem.classList.add('active');
                targetItem.focus();
            }
        }
    });
    
    // Add loading animation completion
    setTimeout(() => {
        sidebar.style.animation = 'none';
    }, 1000);
    
    // Language selector functionality
    const languageSelector = document.querySelector('[data-feather="chevron-down"]').closest('.flex');
    if (languageSelector) {
        languageSelector.addEventListener('click', function() {
            // Here you would typically open a language selection modal or dropdown
            console.log('Language selector clicked');
            
            // Simple animation feedback
            this.style.transform = 'scale(0.98)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    }
    
    // Add hover sound effects (optional)
    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            // Add subtle hover sound if needed
            // This is just a visual feedback enhancement
            this.style.transition = 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)';
        });
    });
    
    // Initialize tooltips for menu items (optional enhancement)
    const tooltipTexts = {
        'gift': 'Узнайте о текущих акциях и бонусах',
        'users': 'Партнерская программа',
        'crown': 'Эксклюзивные привилегии для VIP',
        'book-open': 'Новости и статьи',
        'message-circle': 'Общение с игроками',
        'handshake': 'Спонсорские возможности',
        'shield': 'Безопасная игра',
        'help-circle': 'Получить помощь'
    };
    
    menuItems.forEach(item => {
        const icon = item.querySelector('i');
        const tooltip = document.createElement('div');
        tooltip.className = 'tooltip hidden absolute bg-gray-800 text-white text-xs px-2 py-1 rounded z-50';
        tooltip.textContent = tooltipTexts[icon.getAttribute('data-feather')] || '';
        
        item.style.position = 'relative';
        item.appendChild(tooltip);
        
        item.addEventListener('mouseenter', function() {
            if (tooltip.textContent) {
                tooltip.classList.remove('hidden');
            }
        });
        
        item.addEventListener('mouseleave', function() {
            tooltip.classList.add('hidden');
        });
    });
});

// Utility function to show notifications
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300`;
    
    switch(type) {
        case 'success':
            notification.classList.add('bg-green-600', 'text-white');
            break;
        case 'error':
            notification.classList.add('bg-red-600', 'text-white');
            break;
        case 'warning':
            notification.classList.add('bg-yellow-600', 'text-white');
            break;
        default:
            notification.classList.add('bg-blue-600', 'text-white');
    }
    
    notification.textContent = message;
    document.body.appendChild(notification);
    
    // Animate in
    setTimeout(() => {
        notification.classList.remove('translate-x-full');
    }, 100);
    
    // Animate out and remove
    setTimeout(() => {
        notification.classList.add('translate-x-full');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Export functions for external use
window.StakeSidebar = {
    showNotification,
    openMobileMenu: () => {
        document.getElementById('sidebar').classList.add('show');
    },
    closeMobileMenu: () => {
        document.getElementById('sidebar').classList.remove('show');
        document.querySelector('.mobile-overlay')?.classList.remove('show');
    }
};