Implementar novo menu

[carolinesalib]

Já temos um primeiro mockup no Figma:

Mockup desktop

Mockup phone

TODO:

• [x] Versão web
• [x] Versão mobile
• [x] Ajustar problema com scrollbar que nunca some
  • Identificado que o problema é nos cards de adoção e adicionado a issue #136
• [x] Ajustar fonte roboto
  • A principio ao que pude perceber a fonte está a mesma da CDN do google

Notas:

Por enquanto o menu vai aparecer somente nas páginas novas (no caso somente a página de lista de pets para adoção), as outras páginas vão continuar com o menu velho até que seja feito o novo design e implementação. É normal que a transição de menu velho e novo seja um pouco esquisita até que façamos a migração de todas as páginas.

• Foto do usuário: Sera implementado na issue: #134
• Botão 3 pontinhos/ botão mais: Abre um dropdown com mais opções.
  • Opção Configurações: Sera implementado na issue: #134
  • Opção Área da ONG: Abre uma nova tab para o usuário ir para a área da ONG (apenas admin e usuários da ONG)
  • Opção Sair: Faz logout do usuário.

Imagens versão web:

[anibiamachado]

• Alterar o nome dos menus:

  • De "Home" para "Início";
  • De "NGOs" para "ONGs".

• Quando estou nas páginas com o menu antigo (Sobre, ONGs) não mostra a opção de "Configurações" lá nos três pontinhos;

• Na versão mobile:

  • Só aparece a barra azul com os três risquinhos, sem os nomes dos menus. Ao clicar nos três risquinhos não acontece nada;
  • Os campos para filtrar cidade, ong e sexo ficam com tamanho reduzido, o que impossibilita ler o que tem dentro deles. PS: acontece com todos os tipos de usuários.

• Sugestão:

  • O menu "Área da ONG" não poderia ficar junto com a barra de menus? Penso que se ficar escondido o usuário poderia não achá-lo. Ficaria mais acessível.

[carolinesalib]

@anibiamachado obrigada pela revisão, segue atualizações:

• Alterar o nome dos menus:
  • Alterado
• Quando estou nas páginas com o menu antigo (Sobre, ONGs) não mostra a opção de "Configurações" lá nos três pontinhos;
  • Menu antigo vai deixar de existir em breve, então podemos ignorar.
• Na versão mobile:
  • Ajustado.

Sobre o menu "Área da ONG" estar meio escondigo, é intencional, pra gente não ocupar muito espaço do menu e porque só quem estiver logado como usuário admin ou de ONG vai poder acessar. Mas de qualquer forma pode ser um problema de accessibilidade para os usuários da ONG. Vamos monitorar após o lançamento e coletar feedback.

[anibiamachado]

@carolinesalib testes ok.