54 lines
2.3 KiB
JavaScript
54 lines
2.3 KiB
JavaScript
// 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)) {
|
|
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');
|
|
});
|
|
});
|
|
}
|
|
}); |