Дмитрий Екотов

Решение моей проблемы, было вполне легкое. Но из за плохого знания CSS, я сделал все не так.

Нужно было написать вместо:

.menu-item__link,
.active.menu-module__text {
    color: #fff;
}

Написать так:

.active .item-link__text {color:#fff;} /* Нужен был пробел перед active. Поэтому он не окрасил div внутри </a>*/

По итогу - сам JavaScript работает на ура, и правильно. Проблема была в CSS.

Также, рекомендую, использовать такой скрипт:

const currentLocation = location.href;
const menuItem = document.querySelectorAll('.menu-item__link');
const menuLenght = menuItem.length
for (let i = 0; i<menuLenght; i++) {
    if (menuItem[i].href === currentLocation) {
        menuItem[i].className = "active menu-item__link";
    }
}

Плюс именно такого подхода в том, что (по крайне мере у меня) он не отображается с задержкой, при обновлении страницы.