Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Nav menu com estilo diferente

Olá,

Meu menu de navegação apresenta um estilo diferente do apresentado em aula. Poderia me ajudar a entender o que está acontecendo?

Segue imagem do código do meu componente BarraLateral e de como meu projeto está. Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 respostas
solução!

Olá, Eduardap!

Um primeiro ponto que pode estar causando essa pequena diferença é que falta um espaço entre a tag <i> e o texto (tarefas / projetos). Por isso eles estão coladinhos.

E me parece ter algum outro CSS influenciando os seus estilos, pois algum lugar fez o seu texto ficar todo maiusculo: text-transform: uppercase;.

Consegue verificar?

Oi Marcos,

Realmente, a questão dos espaços estava errada. Agora quanto a transformação do texto em maiúsculo, não encontrei em nenhum lugar do meu código, não sei o que pode estar influenciando isso.

Vou deixar aqui o link do meu repo no github https://github.com/pinheiroduda/alura-tracker

Encontrei! :)

Você colocou o texto dos itens de menu dentro da tag <i>, mas precisa ser fora. Desse jeito:

    <nav class="panel mt-5">
      <ul>
        <li>
          <router-link to="/" class="link">
            <i class="fas fa-tasks"></i> tarefas
          </router-link>
        </li>
        <li>
          <router-link to="/projetos" class="link">
            <i class="fas fa-project-diagram"></i> projetos
          </router-link>
        </li>
      </ul>
    </nav>

Clonei aqui seu repositório e consegui descobrir, ajustei e funcionou como o esperado. Consegue testar daí?

Bons estudos!

Muito obrigada, Marcos! Tudo resolvido por aqui.

Conte sempre com o fórum pra tirar as dúvidas, Eduarda!

Espero que esteja gostando dos cursos novos de Vue, e bons estudos!