Questão 09

Tarefa 9 Componente Menu Responsivo em React com Estilização por Class

Utilizando a ferramenta CodeSandbox e o template React, crie um componente que é um menu.

Este menu deve ser do tipo expande/colapsa, possuir um elemento sempre visível que é o logo ou a marca do App e um outro elemento, também sempre visível, que é o botão para expandir/colapsar o menu.

Os outros itens do menu, a saber: Home, Serviços, Produtos, Sobre nós e Contatos, ficarão escondidos no menu.

Caso o dispositivo seja capaz de exibir todos os itens do menu na página (ou seja, caso ele tenha uma largura suficiente para isso), então o menu deve se adaptar a esta condição e se apresentar em um modelo de menu horizontal, exibindo todos os ítens, sem a mecânica de expandir/colapsar. Neste caso, o elemento que permite expandir/colapsar o menu, deve estar invisível.

Faça isso utilizando apenas estilização por classes CSS, exemplo:

Arquivo CSS:

.container { /* estilo */ }

Pense Mobile-First.