UniFECAF DS — Components Navigation

Shell Completo

Estrutura unificada: Topbar → Header → Sidebar + Conteúdo. Interativo — clique nos itens da sidebar.

Meus cursos

Portal acadêmico

Em Dia

Conquistas

Regras do shell: Topbar sempre --color-neutral-900 + link ativo em --color-green-400. Header sempre branco, logo centralizado. Sidebar --color-navy-900, item ativo com borda esquerda --color-green-400. Hamburguer colapsa a sidebar. Proibido: sidebar com item ativo em rosa ou verde sólido.

Topbar

44px, fundo neutral-900. Links cross-plataforma. Ativo em green-400.

Cada plataforma só mostra os links relevantes para ela. O link da plataforma atual fica em active. Padding horizontal --space-6. Links centralizados com margin: 0 auto no grupo de nav.

Header

64px, branco. Logo centralizado. Ações à direita. Hamburguer/ícone à esquerda conforme contexto.

Com sidebar (One / plataformas com nav lateral)

Sem sidebar (Conquistas / plataformas com navbar horizontal)

Regra: Logo sempre centralizado com position: absolute; left: 50%; transform: translateX(-50%). Plataformas sem sidebar podem incluir o nome da plataforma em verde ao lado do logo. Ações à direita nunca ultrapassam 3 itens.

Sidebar

navy-900, 220px expandida / 56px colapsada. Item ativo com borda esquerda green-400.

Expandida — 220px, labels visíveis

Colapsada — 56px, só ícones

Item ativo: borda esquerda 3px green-400 + bg rgba(white,8%) + texto e ícone brancos. Badge amarelo para notificações pendentes.

Proibido: item ativo com background rosa #FF2B5F (atual em One) ou verde sólido (atual em Estágios). Padrão único: borda esquerda --color-green-400 + rgba(255,255,255,0.08) de background.

Navbar Horizontal

Para plataformas sem sidebar: Eventos, Conquistas, Carreiras. Logo à esquerda, links à direita.

Eventos

Carreiras

Regra: Navbar horizontal para plataformas sem hierarquia profunda. Logo à esquerda (nunca centralizado neste padrão). Links à direita. No máximo 4 links + avatar.

Tabs

Três variantes com usos bem definidos. Nunca misturar estilos na mesma plataforma.

Underline — navegação de seções dentro de uma página

Conteúdo da aba selecionada aparece abaixo.

Uso: Meus Cursos (Extensão / Graduação / Pós), Documentos (Extensão / Graduação / Pós), Relatórios (tipos de documento).

Pill — filtros e categorias

Uso: Meus Eventos (inscritos/realizados/favoritos), filtros de Vagas, filtros de Conquistas.

Segmented — toggle entre 2-3 opções compactas

Uso: Calendário (semana/mês), visualização de listas (grade/lista), filtro de modalidade compacto.

Breadcrumb

Contexto de localização em páginas de detalhe. Máximo 4 níveis.

Use em páginas de detalhe para permitir navegação rápida. O item atual não é clicável. Separador / em neutral-300.

Pagination

Para listas longas de vagas e eventos. Centralizada, com setas e ellipsis.

Simples (poucos resultados)

Com ellipsis (muitos resultados)

… …

Minimalista (formulários multi-etapa)

1 de 3

Dropdown

Menu contextual. Usado no user dropdown do header e em ações de card.

User dropdown

Ações de card / item

Regra: border-radius --radius-xl, shadow-lg, animação de entrada. Item danger sempre último, separado por divider. Ícones opcionais mas consistentes — se usar em um item, usar em todos.

Search

Barra de busca global. Pill shape. Usada em Vagas e Eventos.

Default

⌘ K

Com valor e botão

Section Headers

Hierarquia de títulos padronizada para todas as plataformas.

Page Header (H1)

Section Row Header (H2 + link)

Próximos eventos Ver tudo →

Vagas em destaque Ver todas as vagas →

H1 página Meus cursos

H2 seção (uppercase) PRÓXIMOS EVENTOS

H3 card title Semana da Enfermagem

Body / subtitle Acesse o ambiente virtual e acompanhe suas notas e faltas

Proibido: H2 de seção em --color-navy-600 azul (atual em Conquistas). Todos os títulos de seção devem ser --color-navy-800 com uppercase + --tracking-widest.