Solucionado
Primeiro, para posicionar a barra lateral e demais itens da página de forma correta, criei o arquivo grid.css:
body {
display: grid;
grid-template-rows: 80px 1fr;
grid-template-columns: 15rem 1fr;
}
header {
grid-row: 1;
grid-column: 1 / span 3;
}
aside {
grid-row: 2;
grid-column: 1;
}
main {
grid-row: 2;
grid-column: 2;
}
E então o importei em 'estilos.css' com @import url('./grid.css');
Então criei a barra lateral com o seguinte html:
<aside class="menu-lateral">
<section class="menu-lateral__container">
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/home.svg" alt="" aria-hidden="true">
<span>Início</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/explore.svg" alt="" aria-hidden="true">
<span>Explorar</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/airplay.svg" alt="" aria-hidden="true">
<span>Shorts</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/subscriptions.svg" alt="" aria-hidden="true">
<span>Inscrições</span>
</a>
</section>
<hr class="menu-lateral__divisoria" />
<section class="menu-lateral__container">
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/video_library.svg" alt="" aria-hidden="true">
<span>Biblioteca</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/history.svg" alt="" aria-hidden="true">
<span>Histórico</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/history_toggle_off.svg" alt="" aria-hidden="true">
<span>Assistir mais tarde</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/thumb_up.svg" alt="" aria-hidden="true">
<span>Marcados com like</span>
</a>
</section>
<hr class="menu-lateral__divisoria" />
<section class="menu-lateral__container">
<h2 class="menu-lateral__titulo">inscrições</h2>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Alura.png" alt="" aria-hidden="true">
<span>Alura</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Gaveta.png" alt="" aria-hidden="true">
<span>Gaveta</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Rafa.png" alt="" aria-hidden="true">
<span>Rafaella Ballerini</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Atila.png" alt="" aria-hidden="true">
<span>Átila Iamarino</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Atila.png" alt="" aria-hidden="true">
<span>Átila Iamarino</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Souto.png" alt="" aria-hidden="true">
<span>Mario Souto</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Deschamps.png" alt="" aria-hidden="true">
<span>Felipe Deschamps</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/Avatar_Jovem_Nerd.png" alt="" aria-hidden="true">
<span>Jovem Nerd</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/keyboard_arrow_down.svg" alt="" aria-hidden="true">
<span>Mostrar mais 2</span>
</a>
</section>
<hr class="menu-lateral__divisoria" />
<!--- Continua... ->
<!-- ... continuação -->
<section class="menu-lateral__container">
<h2 class="menu-lateral__titulo">mais da página</h2>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/live_tv.svg" alt="" aria-hidden="true">
<span>Vídeos Premium</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/movie.svg" alt="" aria-hidden="true">
<span>Filmes</span>
</a>
<a class="menu-lateral__item">
<img class="menu-lateral__item__icone" src="./assets/sidebar/sports_esports.svg" alt="" aria-hidden="true">
<span>Jogos</span>
</a>
</section>
</aside>
E os estilos coloquei em aside.css:
.menu-lateral {
padding-inline: 1rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.menu-lateral__divisoria {
width: 100%;
height: 1px;
background-color: var(--azul-medio);
}
.menu-lateral__container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.menu-lateral__item {
display: flex;
gap: .5rem;
align-items: center;
}
.menu-lateral__titulo {
color: var(--Cinza-escuro, #222);
font-weight: 500;
text-transform: uppercase;
text-align: left;
}
Também importei a folha de estilo para estilos.css com @import url('./aside.css').
Por fim, para ter os ícones com melhor resolução e menor tamanho, optei por baixá-los no formato .svg do site https://fonts.google.com/icons
Olá!
Você fez um ótimo trabalho ao criar e posicionar a barra lateral e outros elementos da página. A abordagem que você usou, ficou ótima e pode inspirar muitos ouros alunos, continue explorando e se desafiando cada vez mais!
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!