[Sugestão] resolvendo desafio | JavaScript: consumindo e tratando dados de uma API

Minha resolução do desfio: Em index.html adicionei

        <section class="corpo__menu">
            <div class="corpo__menu-link">
                <a href="#" class="menu-link__item">  <img src="./img/sidebar/home.png" alt="icone de casa" class="menu-link__logo"> <p>Início</p> </a>
                <a href="#" class="menu-link__item"> <img src="./img/sidebar/explore.png" alt="icone de explorar" class="menu-link__logo"> <p>Explorar</p> </a>
                <a href="#" class="menu-link__item"> <img src="./img/sidebar/airplay.png" alt="icone de shorts" class="menu-link__logo"> <p>Shorts</p> </a>
                <a href="#" class="menu-link__item"> <img src="./img/sidebar/subscriptions.png" alt="icone de Inscricoes" class="menu-link__logo">  <p>Inscrições</p>  </a>
                <p class="menu-link__borda"></p>
            </div>
            <div class="corpo__menu-link">
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/video_library.png" alt="icone de biblioteca" class="menu-link__logo">
                    <p>Biblioteca</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/history.png" alt="icone de historico" class="menu-link__logo">
                    <p>Histórico</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/history_toggle_off.png" alt="icone de relogio" class="menu-link__logo">
                    <p>Assistir mais tarde</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/thumb_up_alt.png" alt="icone de Like" class="menu-link__logo">
                    <p>Marcados como com like</p>
                </a>
                <p class="menu-link__borda"></p>
            </div>
            <div class="corpo__menu-link">
                <h2 class="corpo__menu-titulo">INSCRIÇÕES</h2>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/Avatar_Alura.png" alt="ava de Alura" class="menu-link__ava">
                    <p>Alura</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/Avatar_Gaveta.png" alt="ava de Gaveta" class="menu-link__ava">
                    <p>Gaveta</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/Avatar_Rafa.png" alt="ava de Rafaella Ballerini" class="menu-link__ava">
                    <p>Rafaella Ballerini</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/Avatar_Atila.png" alt="ava de Atila Iamarino" class="menu-link__ava">
                    <p>Atila Iamarino</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/Avatar_Souto.png" alt="ava de Mario Souto" class="menu-link__ava">
                    <p>Mario Souto</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/Avatar_Jovem_Nerd.png" alt="ava de Jovem Nerd" class="menu-link__ava">
                    <p>Jovem Nerd</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/Avatar_Deschamps.png" alt="ava de Felipe Deschamps" class="menu-link__ava">
                    <p>Felipe Deschamps</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/keyboard_arrow_down.png" alt="icone de seta pra baixo" class="menu-link__ava-logo">
                    <p>Mostrar mais 2</p>
                </a>
                <p class="menu-link__borda"></p>
            </div>
            <div class="corpo__menu-link">
                <h2 class="corpo__menu-titulo">MAIS DA PÁGINA</h2>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/ondemand_video.png" alt="icone de video" class="menu-link__logo">
                    <p>Vídeos Premium</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/movie.png" alt="icone de filme" class="menu-link__logo">
                    <p>Filmes</p>
                </a>
                <a href="#" class="menu-link__item">
                    <img src="./img/sidebar/sports_esports.png" alt="icone de jogo" class="menu-link__logo">
                    <p>Jogos</p>
                </a>
            </div>
        </section>
        <section class="corpo__conteudo">
        </section>
    </main>

Continuação em comentarios

Em flexbox.css adicionei

/*SEÇÃO SIDEBAR*/
  .corpo__conteiner {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 6%;
  }
  
  .corpo__menu {
    display: flex;
    flex-direction: column;
    width: 239px;
    padding: 16px;
    gap: 16px
  }

  .corpo__menu-link {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 16px
  }
  .menu-link__item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 16px;
  }

Em estilos.css adicionei

/*SEÇÃO SIDEBAR*/

.corpo__menu-link {
    font-size: 14px;
    font-weight: 500;
}

.menu-link__ava {
    width: 24px;
    height: 24px;
}
.menu-link__logo {
padding: 2px 1px;
width: 24px;
height: 24px;
}

.menu-link__ava-logo {
    padding: 6px;
    width: 24px;
    height: 24px;
}

.menu-link__borda {
    border-bottom: 1px solid var(--azul-medio);
}