3ba4bed1c4
Substituída sidebar comprimida por overlay slide-in moderna: MOBILE (<768px): - Sidebar ESCONDIDA por padrão (left: -100%) - Conteúdo em tela cheia (app-main margin-left: 0, width: 100%) - Hamburger menu (☰) 44x44px no header - Click hamburger: sidebar slide-in de 280px sobre conteúdo - Backdrop escuro (rgba(0,0,0,0.5)) para fechar ao clicar fora - Animação: cubic-bezier(0.4, 0, 0.2, 1) 0.3s - Shadow: 4px 0 12px rgba(0,0,0,0.5) quando aberta - Classe .mobile-open para estado aberto - Auto-close ao redimensionar para desktop DESKTOP (>=769px): - Mantém comportamento atual (sidebar fixa colapsável) - Hamburger e backdrop escondidos - Toggle colapsa/expande (não esconde) COMPONENTE (Layout.jsx): - Estado sidebarOpen (mobile) separado de sidebarCollapsed (desktop) - isMobile() helper para detectar <768px - toggleSidebar() inteligente (mobile: open/close | desktop: collapse/expand) - handleBackdropClick() fecha sidebar mobile - useEffect cleanup ao resize CSS: - @media (max-width: 768px) com sidebar overlay - @media (min-width: 769px) esconde mobile-only elements - Removidas regras conflitantes de sidebar 56px/50px - Safe area: padding-left/right 0 em body para permitir overlay - Touch target hamburger: 44x44px com hover effect Deploy: frontend/dist |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| deploy.ps1 | ||
| deploy.sh | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| vite.config.js | ||
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.