GitLab

Objetivo

Implementado o header com todos os botões / ícones (a qualidade do SVG do profile está meio duvidosa) Implementada função de slider quando o botão de profile é clicado Implementada a responsividade para mobile, assim como um botão para fechar.

Header completo:

Profile slider web:

Header completo web:

Profile slider mobile:

Como testar

1. Faça o checkout da branch.
2. Execute npm install para instalar as dependências.
3. Inicie o servidor com npm run dev.

Comportamento esperado

Para Web:

1. Clique no botão profile e o slider deverá abrir da direita para a esquerda caso esteja com width > 768.
2. Clicando no overlay (telinha mais escura ao lado do slider), deverá fechar o slider.
3. Quando fechar, ele deve deslizar de volta para a direita.

Para Mobile

1. Clique no botão profile e o slider deverá abrir de cima para baixo caso esteja com width < 768.
2. Deverá ter um botão "x" no canto superior direito, com a função de fechar o slider.
3. Quando fechado, deverá deslizar de baixo para cima.

Observações:

1. Errei o nome da branch e só percebi agora, perdão.
2. Acho que poderiamos usar um componente header apenas e colocar uma funcionalidade para verificar se o usuario está autenticado. Caso não esteja, não executar a parte dos ícones.
3. Não quis colocar mais SVG's no projeto só para mockar os dados, caso seja necessário posso providenciar.