Novo menu responsivo, esconde apenas submenus

Bugs
#1

Primeiramente, queria elogiar o novo menu responsivo, que ficou muito bonito e agora de fato um menu muito bacana para uso mobile.

Estou alterando um aplicativo aqui para o novo menu, e percebi a seguinte situação:

Se marcarmos a opção Esconder itens de Menu usando o esquema de segurança, o menu realmente esconde as opções (submenus) que não estão no esquema de segurança do grupo do usuário, porém as opções principais do menu, se não tiverem nenhuma opção de submenu ativa, ainda permanecem sendo exibidas.

Isso polui bastante a tela para usuários com opções bem específicas e não fica legal para substituição de aplicações que usavam o menu anterior. Não interessa aos usuários visualizarem opções que não podem acessar.

Opções de menu (principais) que não tenham nenhum submenu para exibir também deveriam ser escondidas. Realmente não encontrei opção no novo menu que permita isso.

Att.,
Renato Martins

2 Curtidas
#2

A alteração diretamente pelo ScriptCase na hora de renderizar os itens de menu com certeza é a opção mais acertada, mas enquanto não encontro a opção ou a mesma não exista, segue código CSS e JavaScript para contornar a situação.

Segue como realizar:

No evento onApplicationInit do novo menu, crie o estilo e JavaScript abaixo:

echo '

<style>
   /* Oculta os elementos <li> do menu*/
   .wrapper-navigation > ul > li {
      display: none;
   }
   /* Exibir os elementos <li> que têm submenus */
   .wrapper-navigation > ul > li:has(.submenu) {
      display: block;
   }
</style>’;
echo ’
<script>
   document.addEventListener(“DOMContentLoaded”, function() {
      setTimeout(function() {
         // Selecione todos os elementos <a> dentro de <li> com a classe “wrapper”
         var links = document.querySelectorAll(’."’".‘li.wrapper a’."’".’);
         // Itere sobre os links para encontrar as opções de menu com os textos que você quer encontrar
         // No exemplo abaixo estou reativando a opção “Sair” do menu
         links.forEach(function(link) {
            if (link.textContent.trim() === “Sair”) {
               // Se encontrado, acha o elemento <li> correspondente e define o estilo como block
               var liElement = link.closest(’."’".‘li.wrapper’."’".’);
               if (liElement) {
                  liElement.style.display = “block”;
               }
            }
         });
      }, 500); // Aguarda 1/2 segundo antes de executar o código. Ajuste o tempo de acordo com sua necessidade
   });
</script>
';

Explicando:

O CSS vai ocultar todos os elementos e voltar exibindo apenas os elementos que tenham submenus ativos.
E caso existam opções com acessos diretos, como por exemplo a opção Sair do exemplo acima, ativamos através do JavaScript, criando as condicionais com a descrição da opção de menu.

Em alguns casos o JavaScript pode ser desnecessário e existem outras formas de realizar essa operação, mas por hora a solução acima atendeu a minha necessidade.

Att.,
Renato Martins

#3

Olá, agradecemos seu retorno. Passamos para nossa equipe de desenvolvimento em breve retornaremos um feedback sobre a solução do caso.

#4

concordo com você @renmargom, mas quero colocar mais uma coisa, o novo menu não está funcionado para IOS (apple) o frame da parte de fica todo estourado! Será que é só comigo? É um erro meu? ou bugs mesmo? Veja na imagem em anexo.

#5

Reduzi o código do evento onApplicationInit para:

echo "<style>
		li.wrapper[disabled='disabled'] {
		  display: none;
	   }
	  </style>
	  
	  <script>
	  document.addEventListener('DOMContentLoaded', function() {
	  	  setTimeout(function() {
			  document.querySelectorAll('li.wrapper[disabled]').forEach(a => {
				  var b = a.parentElement.parentElement.parentElement;
				  b.style.display = 'none';
			  });
		  }, 200);
	  });
	  </script>";