Uma reflexão sobre o header na versão mobile

[claromes]

Ocupa quase a metade da tela!

[rghedin]

Pior, né? O cabeçalho ficou meio inchado nos últimos meses e a solução mais comum (ou a que me ocorre) para esses casos é o menu de hambúrguer, o que talvez não caiba no momento.

A menos que a gente reformule o ícone do usuário para ser o menu de hambúrguer em telas pequenas. Algo assim:

[rghedin]

Fiquei pensando nesse assunto, @claromes, e acho que cheguei numa boa solução. O mockup:

Explicando o paradeiro dos itens ausentes:

• Link da newsletter vai para a barrinha do topo e abandonamos o aviso de novos posts às sextas. Dá para colocar isso no Sobre, relembrar na newsletter e, com o tempo, a audiência se acostuma.
• O ícone da aparência (claro/escuro) a gente move para o rodapé. É um negócio raramente usado, então não acho que exista prejuízo em deixá-lo com pouco destaque.
• O ícone do RSS é eliminado. Os clientes de feeds conseguem detectar o feed a partir da URL do site. Pensando assim, o ícone torna-se dispensável. (Já era antes; tinha colocado ele ali mais como um reforço/“publicidade” para o RSS.)

Podemos eliminar toda a segunda parte do menu do usuário, deixando ele, de fato, um menu do usuário. E o mapa do Manual fica destacado logo no início da página Sobre.

A dificuldade aí seria adaptar a busca. Como não teremos dois menus, ao ativá-la o campo de texto se sobreporia ao único menu, então teria que alterar o funcionamento dele para sumir com o campo de texto com um clique/toque fora do campo de texto.

O que acha?

[claromes]

Vi o PR, mas vou seguir com a conversa por aqui... A solução ficou ótima. Mas acho que podemos manter a configuração de aparência no topo, dentro do menu de usuário, já que isso é uma configuração de uso. Mas trocaria o ícone por texto. Ficou perdido no footer.

Minha sugestão seria manter a ordem dos menus (texto e ícones), porém alterando o menu de texto para flex-start a partir de 515px. Diminuir os ícones para 20 ou 22px e colocar o logo no centro (.site-header com justify-content: center;).

[rghedin]

Ótimas ideias, @claromes! Só deixei o breaking point em 529 px porque com 515 px, os ícones “caíam” para a linha de baixo quando o campo da pesquisa era ativado.

Acabei de subir as correções.