Vermelho-Rosas-DS/What-Should-I-Pick

Adaptar `navbar` para o projeto

Closed this issue · 0 comments

VictorJorgeFGA commented

Descrição

O web-site precisa de uma navbar (barra superior) para que o usuário consiga navegar pelo site.

Detalhes

Alterar navbar no projeto

  • Remover a atual navbar do layout application e criar um partial _navbar.html.erb na pasta layouts colocando a navbar lá.
  • Renderizar o partial no layout application
  • Tornar a navbar dark
  • Colocar o fundo da navbar para indigo-900
  • Adicionar logo
  • Adicionar links para Home, recomendações, campeões e idiomas

Logo do projeto

<svg width="88" height="78" viewBox="0 0 88 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="15.8998" height="54.5059" transform="matrix(0.946302 0.323284 -0.361543 0.932356 36.4596 18.4565)" fill="#573C82"/>
<rect x="36.4803" y="18.2802" width="15.03" height="5.99564" fill="#6F4FA3"/>
<rect width="17.8781" height="75.8244" transform="matrix(0.986579 -0.163282 0.184629 0.982808 0 2.91919)" fill="#A473F5"/>
<rect width="15.8998" height="54.5059" transform="matrix(0.946302 -0.323284 0.361543 0.932356 36.4912 23.6178)" fill="#6F4FA3"/>
<rect width="17.8781" height="75.8244" transform="matrix(0.986579 0.163282 -0.184629 0.982808 70.3618 0)" fill="#A473F5"/>
</svg>

Veja como funciona partials nesse vídeo ou nesse guia

Veja como funciona as navbars no bootstrap 5 aqui

Referencia de como a navbar se parecerá no final

Obs.: Não precisa se ater às cores em si, basta que a navbar tenha o conteúdo correto, isto é: os links e a logo

image