Tornar Navbar Dinâmica com base no Perfil de Usuário

[EduKaique]

🕵️ Descrição do Problema

Atualmente, o componente de Navbar/Header no módulo do Cliente possui links estáticos que apontam apenas para as funcionalidades de autoatendimento. Como o sistema Bantads é multiperfil (Cliente, Gerente e Administrador), a navegação atual não atende aos outros módulos, resultando em ausência de menu ou menus incorretos ao navegar entre diferentes áreas do sistema.

🎯 Objetivo

Transformar a Navbar em um componente inteligente que renderiza as opções de menu dinamicamente, baseando-se no role (papel) do usuário autenticado.

📋 Critérios de Aceite

• Criar uma interface ou modelo de dados para os itens de menu (Ex: MenuItem { label: string, route: string }).
• Utilize o AuthService existente para identificar o tipo de usuário logado.
• Definir as listas de navegação para cada perfil:
  • Cliente: Home, Depósito, Sacar, Transferir, Extrato.
  • Gerente: Home, Pedidos de Autocadastro, Listar Clientes, Consultar Cliente.
  • Admin: Home, Relatório de Clientes, Lista de gerentes.
• Utilizar a diretiva @for na Navbar para renderizar os itens conforme o array correspondente ao perfil.
• Garantir que ao fazer "Logout", o menu seja limpo e redirecionado para o login.

🛠️ Sugestão Técnica

Tip

Para manter o código limpo, você pode definir as rotas em um arquivo de configuração ou dentro do próprio serviço de permissões:
(Avalia se isso realmente é a melhor forma)

const MENU_OPTIONS = {
 CLIENTE: [{ label: 'Extrato', route: '/cliente/extrato' }, ...],
 GERENTE: [{ label: 'Aprovações', route: '/gerente/aprovacoes' }, ...],
 ADMIN: [{ label: 'Gerentes', route: '/admin/gerentes' }, ...]
};

🔗 Contexto Adicional

Esta tarefa é fundamental para a integração dos módulos desenvolvidos em Angular na disciplina de DAC, garantindo a consistência da UI/UX em toda a aplicação Bantads.