1
resposta

Cor do icone Feed

Quando eu repito os passos da professora a cor do meu ícone da navbar nao é alterada, apenas do texto abaixo do ícone. Ela aplica a cor na tag , que teoricamente nao deveria mudar a cor do icone contido dentro da tag e não está mudando no meu caso.

import Logo from './assets/Logo.svg';
import Feed from './assets/feed.svg';
import Account from './assets/account_circle.svg';
import Info from './assets/info.svg';
import Logout from './assets/logout.svg';
import './styles.css'

export default function Sidebar() {
    return (
        <aside>
            <img src={Logo} alt='Logo do CodeConnect' />
            <nav>
                <ul className='lista-sidebar'>
                    <li>
                        <a href='#'>Publicar</a>
                    </li>
                    <li>
                        <a href='#' className='item__link item__link--ativo'>
                            <img src={Feed} alt='' />
                            <span>Feed</span>
                        </a>
                    </li>
                    <li>
                        <a href='#' className='item__link'>
                            <img src={Account} alt='' />
                            <span>Perfil</span>
                        </a>
                    </li>
                    <li>
                        <a href='#' className='item__link'>
                            <img src={Info} alt='' />
                            <span>Sobre nós</span>
                        </a>
                    </li>
                    <li>
                        <a href='#' className='item__link'>
                            <img src={Logout} alt='' />
                            <span>Sair</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside >
    )
}
`aside{
    background-color: var(--cinza-escuro);
    padding: 2.5em 1em;
    width: 177px;
    border-radius: 8px;
}

.lista-sidebar{
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    margin-top: 5em;
}

.lista-sidebar li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    gap: 10px;
}

.item__link{
    text-decoration: none;
    color: var(--cinza-claro);
}

.item__link--ativo{
    color: var(--branco);
}
`
1 resposta

Oi, Pedro, tudo bem?

Peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Fico no aguardo!