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
2 lines
7 B
Plaintext
2 lines
7 B
Plaintext
1.40.0
|