[Sugestão] Forma mais fácil

Eu fiz de uma forma mais fácil que a do professor eu acho. No html eu so criei uma div nova para organizar melhor os links

<nav class="menu-lateral">
        <img src="/assets/img/logo.svg" alt="Logotipo da HZC" class="menu-lateral__logo">
        <div class="links">
            <a href="#" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Início</a>
            <a href="#" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
            <a href="#" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
            <a href="#" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
            <a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
            <a href="#" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
        </div>
    </nav>

/* Fica um menu abaixo do outro */
.links {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    height: auto;
}

.menu-lateral {
    display: flex;
    flex-direction: column;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;
}

.menu-lateral__logo {
    width: 118px;
    padding: 16px;
    align-self: center;
}

.menu-lateral__link {
    /* espacando os links, dando um respiro */
    padding: 20px;
}

.menu-lateral__link--ativo {
    color: #FFFFFF;
    /* eu tiro os 8px da borda para nao ficar torto, como todo mundo tem 20px, eu faço 20 - 8 = 12px */
    border-left: 8px solid #FFFFFF;
    padding-left: 12px;
}

.menu-lateral__link::before {
    content: "/";
    /* espacamento entre o icone e o texto */
    padding: 20px;
    font-size: 20px;
}

/* So estilizando quando passa o mouse em cima */
.menu-lateral__link:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transition: .5s;
}

.menu-lateral__link--inicio::before {
    content: "\e902";
}

.menu-lateral__link--videos::before {
    content: "\e90e";
}

.menu-lateral__link--picos::before {
    content: "\e909";
}

.menu-lateral__link--integrantes::before {
    content: "\e903";
}

.menu-lateral__link--camisas::before {
    content: "\e900";
}

.menu-lateral__link--pinturas::before {
    content: "\e90a";
}