[TASK][#3] Sidebar: implementação

[mariana-castro-sh3]

Descrição

Essa tarefa contempla a refatoração do componente ToggleSidebar, referente à issue #3.

---

Etapas

Escopo: O componente atualizado deve utilizar os recursos fornecidos pela biblioteca PrimeVue (já instalada na aplicação). Além disso, deve possibilitar que o usuário tenha maior espaço de tela para o conteúdo principal, caso deseje. As etapas são:

• Mapear e resolver bugs relativos à estilização e ao funcionamento do componente;
• Corrigir bugs de responsividade;
• Incluir os recursos do Primevue: button e sidebar (para telas menores);
• Refatorar os subcomponentes da sidebar (alternar menu, versão, etc.)

---

Tarefas

Correção de bugs de funcionamento

• [x] No tabmenu, os menus ficam selecionados após serem clicados. image
• [x] Quando a sidebar é fechada com algum menu aberto, os ícones ficam deslocados. image

Correção de bugs de estilização

• [x] Barra de rolagem sempre aparece, mesmo quando desnecessária. image
• [x] Barra de rolagem persiste na sidebar fechada. image
• [x] Os ícones não estão centralizados na sidebar fechada. image

Implementação: responsividade

• [x] Sidebar deve possuir tamanho fixo até telas de 1024px de largura.
• [ ] Em telas menores, deverá ser substituída pela sidebar overlay (PrimeVue)
• [x] O texto deve se adaptar ao tamanho da sidebar, de maneira a não permitir rolagem horizontal.

Implementação de componente: sh3Button

• Deve ser utilizado nos seguintes componentes
  • [x] Alternar módulo
  • [ ] Competência
  • [x] Abrir e fechar sidebar (toggleSidebar)

Outras tarefas

• [x] Nova feature: inclusão de tooltip nos iconButtons do tabmenu para sidebar fechada informando o nome do Menu.

---

Débitos técnicos

• [ ] #8
• [ ] #9

[mariana-castro-sh3]

Destaque dos menus

Etapas

1. Qual menu colorir com base na rota atual 1.1 Caso rota atual seja um menu root

   • Comparação direta se:

     • o menu está ativo; e
     • se é root retorna a cor ROOT

     1.2 Caso rota atual seja um submenu e possua submenus

   • Comparação direta se:

     • o menu está ativo;
     • NÂO é root; e
     • possui submenu; retorna a cor SUBMENU.

     1.3 Caso a rota atual seja um submenu e NÃO possua submenus (possuindo ou não abas)

   • Comparação direta se:

     • uma das abas do menu está ativa (comparação indireta);
     • NÃO é root; e
     • NÃO possui submenu retorna font-color ACTIVE (fonte colorida)

     1.4 Caso rota atual seja uma aba

   • Comparação direta se:
     • a aba está ativa (comparação direta);
     • NÃO é root; e
     • NÃO possui submenu retorna font-color ACTIVE (fonte colorida)

Estratégia

• Estratégia é informar a cada menu-item se ele tem tabs e quem são elas
  • Como é a chave identificadora de um menu-item? dptoPessoalCadastro_dptoPessoalOrgao
  • Como é o objeto que contém a informação sobre todas as tabs?

 {
        dptoPessoalCadastro: {
          dptoPessoalOrgao: {
            dptoPessoalOrgaoEsocial: { meta: { isTab: true } }
          },
          dptoPessoalEstabelecimento: {
            ...
          }
        }
      }

Como obter as tabs de um menu-item?

1. Quebra da chave utilizando o marcador _ Exemplo 1. key -> dptoPessoalCadastro

   • Ao realizar operação de split pelo separador '_': Retorno ['dptoPessoalCadastro']
   • Ao acessar o objeto de todas as tabs com a chave splitada, qual o retorno? Retorno { dptoPessoalOrgao: { ... }, dptoPessoalEstabelecimento: { ... } }

   Exemplo 2. key -> dptoPessoalCadastro_dptoPessoalOrgao

   • Ao realizar operação de split pelo separador '_': Retorno ['dptoPessoalCadastro', 'dptoPessoalOrgao']

   • Ao acessar o objeto de todas as tabs com a chave splitada, qual o retorno? O acesso precisa ser por via de um algoritmo que tenta utilizar o array de chaves splitadas para descer na árvore/objeto de todas as tabs Algoritmo desce na árvore chave a chave 1 retorno com a chave 'dptoPessoalCadastro' { dptoPessoalOrgao: { ... }, dptoPessoalEstabelecimento: { ... } }

     2 retorno com a chave 'dptoPessoalOrgao' { dptoPessoalOrgaoEsocial: { meta: { isTab: true } } // dptoPessoalOrgaoEsocial: true }