https://portalidea.com.br/assets/js/main-header.js

1document.addEventListener('DOMContentLoaded', function() {
2  const categoriasButton = document.querySelector('.mainHeader .mainHeader__nav>button.dropdown:nth-of-type(2)');
3  const categoriasMenu = categoriasButton ? categoriasButton.querySelector(':scope>.dropdown-menu') : null;
4
5  if (!categoriasButton || !categoriasMenu) {
6    return;
7  }
8
9  const categorias = Array.from(categoriasMenu.querySelectorAll(':scope>li'));
10  const painelCursos = document.createElement('ul');
11  let timerFecharMenu = null;
12
13  painelCursos.className = 'mainHeader__categoryPanel';
14  categoriasMenu.appendChild(painelCursos);
15
16  function abrirMenu() {
17    clearTimeout(timerFecharMenu);
18    categoriasButton.classList.add('is-open');
19  }
20
21  function fecharMenuComEspera() {
22    clearTimeout(timerFecharMenu);
23
24    timerFecharMenu = setTimeout(function() {
25      if (!categoriasButton.matches(':hover') && !categoriasMenu.matches(':hover')) {
26        categoriasButton.classList.remove('is-open');
27      }
28    }, 180);
29  }
30
31  function ativarCategoria(categoriaAtiva) {
32    const branch = categoriaAtiva.querySelector(':scope>.dropdown>.branch');
33
34    categorias.forEach(function(categoria) {
35      categoria.classList.toggle('is-active', categoria === categoriaAtiva);
36    });
37
38    painelCursos.innerHTML = branch ? branch.innerHTML : '';
39  }
40
41  categoriasButton.addEventListener('mouseenter', abrirMenu);
42  categoriasButton.addEventListener('mouseleave', fecharMenuComEspera);
43  categoriasMenu.addEventListener('mouseenter', abrirMenu);
44  categoriasMenu.addEventListener('mouseleave', fecharMenuComEspera);
45  painelCursos.addEventListener('mouseenter', abrirMenu);
46  painelCursos.addEventListener('mouseleave', fecharMenuComEspera);
47
48  categorias.forEach(function(categoria) {
49    categoria.addEventListener('mouseenter', function() {
50      abrirMenu();
51      ativarCategoria(categoria);
52    });
53
54    categoria.addEventListener('focusin', function() {
55      abrirMenu();
56      ativarCategoria(categoria);
57    });
58  });
59
60  ativarCategoria(categorias[0]);
61});