Sites & Landing Pages
ChatGPT / GPT-4o
Navbar Responsiva com Drawer Mobile & Dark Mode em React
Navbar moderna com menu hambúrguer animado em drawer lateral, dark mode e acessibilidade ARIA.
0cópias
0joinhas
0favoritos
O prompt
Crie um componente React completo para a barra de navegação (Navbar) da marca {{nome_marca}}, moderna, acessível e responsiva.
Parâmetros:
- Nome da Marca: {{nome_marca}}
- Links do Menu: {{links_menu}}
Requisitos Técnicos:
1. Desktop: Links horizontais ({{links_menu}}) com indicador de link ativo e animação sutil no hover.
2. Mobile: Botão hambúrguer acessível com transição suave para um Drawer lateral deslizante com backdrop blur.
3. Alternador de Dark Mode integrado com suporte a 'light', 'dark' e detecção automática do sistema ('system') gravado no localStorage.
4. Totalmente acessível com atributos WAI-ARIA (aria-expanded, aria-label, role='navigation' e foco retido no drawer quando aberto).
5. Botão de CTA em destaque para conversão direta na direita.
Como usar
- Substitua {{nome_marca}} e {{links_menu}} (ex.: 'Home, Recursos, Preços, Contato').
- Cole no ChatGPT ou Cursor dentro do seu projeto React — o componente + estilos voltam prontos.
- Monte <Navbar /> no topo do layout: o dark mode persiste em localStorage e respeita a preferência do sistema na primeira visita.
- Teste acessibilidade com teclado (Tab/Shift+Tab): o foco deve permanecer preso dentro do drawer enquanto ele estiver aberto.
Exemplo de saída
Navbar.tsx (~160 linhas): links horizontais com indicador de ativo, hambúrguer animado abrindo drawer lateral com backdrop blur, toggle de dark mode em 3 estados (light/dark/system), WAI-ARIA completo (aria-expanded, role=navigation, focus trap no drawer) e botão CTA à direita.