feat: mobile usability - #2
Conversation
ThiagoDeMattiaScoti
left a comment
ThiagoDeMattiaScoti
left a comment
There was a problem hiding this comment.
A princípio tudo certo e nos conformes
| top: calc(100% - 0.2rem); | ||
| right: 0; | ||
| left: 0; | ||
| display: none; |
There was a problem hiding this comment.
Aqui a navegação mobile passa a ficar totalmente escondida por padrão e só volta quando o Alpine aplica nav--open. Isso melhora o visual, mas cria uma regressão de fallback: se o JS/CDN falhar ou for bloqueado, o botão aparece e os links ficam inacessíveis. Sugiro deixar um fallback sem JS, por exemplo com <details>/<summary>, ou manter a nav acessível por padrão e só esconder depois que JS inicializar.
| <link rel="preconnect" href="https://fonts.googleapis.com"/> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet"/> | ||
| <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> |
There was a problem hiding this comment.
Como o menu mobile passa a depender desse script, eu evitaria usar uma versão flutuante (@3.x.x). Uma atualização futura dentro do 3.x pode mudar comportamento sem alteração no repo. Se Alpine continuar aqui, melhor fixar uma versão exata ou considerar um script local pequeno para esse toggle.
| x-on:click="navOpen = !navOpen" | ||
| x-bind:aria-expanded="navOpen.toString()" | ||
| aria-controls="site-nav" | ||
| aria-label="Abrir navegação" |
There was a problem hiding this comment.
Pequeno ajuste de acessibilidade: o label fica sempre Abrir navegação, mesmo quando o menu já está aberto. Também seria bom renderizar aria-expanded="false" no HTML inicial, antes do Alpine inicializar, e marcar os três spans decorativos do ícone com aria-hidden="true".
| @media (max-width: 640px) { | ||
| .shell { | ||
| width: min(var(--shell), calc(100vw - 1.5rem)); | ||
| width: min(var(--shell), calc(100vw - 4rem)); |
There was a problem hiding this comment.
Esse calc(100vw - 4rem) deixa 2rem de margem de cada lado em telas pequenas. Em celulares estreitos, o conteúdo útil fica bem reduzido e isso pode piorar leitura/CTAs/cards. Eu manteria algo mais próximo do anterior (calc(100vw - 1.5rem)) ou no máximo calc(100vw - 2rem), corrigindo qualquer overflow no elemento específico.
| return fallback | ||
| } | ||
|
|
||
| func displayURL(addr string) string { |
There was a problem hiding this comment.
A função é simples e útil, mas mexe com alguns formatos sensíveis de endereço. Valeria adicionar um teste table-driven para proteger casos como :8080, 0.0.0.0:8080, [::]:8080, 127.0.0.1:3000 e localhost:8080. Não vejo como bloqueador forte, mas ajuda a evitar regressões.
|
fiz os ajustes comentados aqui, oq foi recomendado no whatsapp eu abri uma issue |
4 participants
adicina toggle button no nav