TimeTrack/static/js/user-dropdown.js

// User dropdown context menu functionality
document.addEventListener('DOMContentLoaded', function() {
    const userDropdownToggle = document.getElementById('user-dropdown-toggle');
    const userDropdownModal = document.getElementById('user-dropdown-modal');
    
    // Toggle dropdown context menu
    if (userDropdownToggle && userDropdownModal) {
        userDropdownToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Toggle active class
            const isActive = userDropdownModal.classList.contains('active');
            userDropdownModal.classList.toggle('active');
            
            // Position the dropdown relative to the toggle button
            if (!isActive) {
                const toggleRect = userDropdownToggle.getBoundingClientRect();
                const sidebarHeader = userDropdownToggle.closest('.sidebar-header');
                const sidebarHeaderRect = sidebarHeader.getBoundingClientRect();
                
                // Position relative to sidebar header
                userDropdownModal.style.position = 'absolute';
                userDropdownModal.style.top = (toggleRect.bottom - sidebarHeaderRect.top + 5) + 'px';
                userDropdownModal.style.right = '10px';
                userDropdownModal.style.left = 'auto';
            }
        });
    }
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (userDropdownModal && !userDropdownModal.contains(e.target) && !userDropdownToggle.contains(e.target)) {
            // Don't close if we're clicking on the mobile overlay
            if (e.target.id === 'mobile-nav-overlay' || e.target.classList.contains('mobile-overlay')) {
                return;
            }
            userDropdownModal.classList.remove('active');
        }
    });
    
    // Close dropdown when pressing Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && userDropdownModal && userDropdownModal.classList.contains('active')) {
            userDropdownModal.classList.remove('active');
        }
    });
    
    // Close dropdown when clicking on menu items
    if (userDropdownModal) {
        const menuLinks = userDropdownModal.querySelectorAll('a');
        menuLinks.forEach(link => {
            link.addEventListener('click', function() {
                userDropdownModal.classList.remove('active');
            });
        });
    }
});