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á.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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á.
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!