https://palermo-huila.gov.co/SiteAssets/V3/NavMenu/dropmenu.js

1const menuToggle = document.getElementById('menuToggle');
2const dropdownMenu = document.getElementById('dropdownMenu');
3const menuOverlay = document.getElementById('menuOverlay');
4const navBar = document.querySelector('.navbar');
5let y = 0;
6
7menuToggle.addEventListener('click', function () {
8	const isActive = menuToggle.classList.contains('active');
9
10	if (isActive) {
11		// Cerrar menú
12		menuToggle.classList.remove('active');
13		dropdownMenu.classList.remove('show');
14		menuOverlay.classList.remove('show');
15
16		y = 0;
17	} else {
18		// Abrir menú
19		menuToggle.classList.add('active');
20		dropdownMenu.classList.add('show', 'manual-scroll');
21		menuOverlay.classList.add('show');
22		dropdownMenu.classList.add('translate-custom');
23		navBar.style.setProperty('--scroll-y', `${y}px`);
24	}
25});
26
27// Cerrar menú al hacer clic en el overlay
28menuOverlay.addEventListener('click', function () {
29	menuToggle.classList.remove('active');
30	dropdownMenu.classList.remove('show');
31	menuOverlay.classList.remove('show');
32});
33
34// Cerrar menú al presionar Escape

35document.addEventListener('keydown', function (e) {
36	if (e.key === 'Escape') {
37		menuToggle.classList.remove('active');
38		dropdownMenu.classList.remove('show');
39		menuOverlay.classList.remove('show');
40	}
41});
42
43// Prevenir que el menú se cierre al hacer clic dentro de él
44dropdownMenu.addEventListener('click', function (e) {
45	e.stopPropagation();
46});
47
48// Función para detectar automáticamente la dirección del submenú
49function autoDetectSubmenuDirection() {
50	const autoSubmenus = document.querySelectorAll('.submenu-auto');
51
52	autoSubmenus.forEach((submenu) => {
53		const menuItem = submenu.parentElement;
54
55		menuItem.addEventListener('mouseenter', function () {
56			const rect = submenu.getBoundingClientRect();
57			const viewportWidth = window.innerWidth;
58			const submenuWidth = submenu.offsetWidth;
59
60			// Si el submenú se sale del viewport por la derecha
61			if (rect.left + submenuWidth > viewportWidth) {
62				submenu.classList.add('open-left');
63			} else {
64				submenu.classList.remove('open-left');
65			}
66		});
67	});
68}
69
70// acemos un evento para el scroll del evento
71dropdownMenu.addEventListener(
72	'wheel',
73	function (params) {
74		params.preventDefault();
75		y += params.deltaY;
76		y = Math.max(Math.min(y, 500), -500);
77		navBar.style.setProperty('--scroll-y', `${y}px`);
78	},
79	{ passive: false },
80);
81
82// Ejecutar la detección automática cuando se carga la página
83document.addEventListener('DOMContentLoaded', autoDetectSubmenuDirection);
84
85// Re-ejecutar cuando se redimensiona la ventana
86window.addEventListener('resize', autoDetectSubmenuDirection);