Упрощение Javascript, которое добавляет «активный» класс по URL (DRY)

Question

Я обычно пишу в Python на бэк-энде и не приправлен JS. Этот код выглядит довольно неприятно для меня, поскольку он повторяется много раз. Если бы я писал в Python, думаю, я бы составил список объектов, затем l oop поверх списка объектов, чтобы добавить активный класс, если один из объектов соответствует URL.

Могу ли я сделать что с JS? Или какой хороший способ оптимизировать это от кого-то, кто пишет на внешнем интерфейсе нормально?

JS:

var url = window.location.pathname;

var overview = document.getElementById("overview");
var cats = document.getElementById("categories");
var videos = document.getElementById("videos");
var tests = document.getElementById("tests");
var memos = document.getElementById("memos");

var overviewBtm = document.getElementById("overview-btm");
var videosBtm = document.getElementById("videos-btm");
var testsBtm = document.getElementById("tests-btm");
var memosBtm = document.getElementById("memos-btm");
var profileBtm = document.getElementById("profile-btm");

var superUsersBtm = document.getElementById("super-users-btm");
var superResultsBtm = document.getElementById("super-results-btm");
var superNewBtm = document.getElementById("super-new-btm");
var superInviteBtm = document.getElementById("super-invite-btm");
var superProfileBtm = document.getElementById("super-profile-btm");

if (url == '/overview/'){
    console.log(url);
    if (overview){
    overview.classList.add('nav-active');
    } else if (overviewBtm){
    overviewBtm.classList.add('nav-active');
    }
} else if (url == '/categories/'){
    console.log(url);
    if (cats){
    cats.classList.add('nav-active');
    }
} else if (url == '/videos/'){
    console.log(url);
    if (videos){
    videos.classList.add('nav-active');
    } else if (videosBtm){
    videosBtm.classList.add('nav-active');
    }
} else if (url == '/tests/'){
    console.log(url);
    if (tests){
    tests.classList.add('nav-active');
    } else if(testsBtm){
    testsBtm.classList.add('nav-active');
    }
} else if (url == '/memos/'){
    console.log(url);
    if (memos){
    memos.classList.add('nav-active');
    } else if (memosBtm){
    memosBtm.classList.add('nav-active');
    }
} else if (url == '/profile/'){
    console.log(url);
    if (profileBtm){
    profileBtm.classList.add('nav-active');
    } else if (superProfileBtm){
    superProfileBtm.classList.add('nav-active');
    }
} else if (url == '/tests/results/'){
    console.log(url);
    if (superResultsBtm){
    superResultsBtm.classList.add('nav-active');
    }
} else if (url == '/accounts/'){
    console.log(url);
    if (superUsersBtm){
    superUsersBtm.classList.add('nav-active');
    }
} else if (url == '/invite/'){
    console.log(url);
    if (superInviteBtm){
    superInviteBtm.classList.add('nav-active');
    }
} else if (url == null){
    // pass
}

Редактировать: Фрагмент HTML в основании. html:

<div class="header-icon-container d-xs-none">
    <a class="nav-item nav-link d-xs-none" href="{% url 'overview' %}" id="
        <i class="fas fa-home fa-2x"></i>
        <span>Home</span>
    </a>
</div>
<div class="header-icon-container">
    <a class="nav-item nav-link" href="#" id="drills">
        <i class="fas fa-dumbbell fa-2x"></i>
        <span>Drills</span>
    </a>
</div>
<div class="header-icon-container d-xs-none">
    <a class="nav-item nav-link" href="{% url 'tests' %}" id="tests">
        <i class="fas fa-graduation-cap fa-2x"></i>
        <span>Testing</span>
    </a>
</div>
<div class="header-icon-container">
    <a class="nav-item nav-link" href="{% url 'videos' %}" id="videos">
        <i class="fas fa-video fa-2x"></i>
        <span>Videos</span>
    </a>
</div>
<div class="header-icon-container">
    <a class="nav-item nav-link" href="{% url 'memos' %}" id="memos">
        <i class="fas fa-paper-plane fa-2x"></i>
        <span>Memos</span>
    </a>
</div>

Answer 1

Ну, я не уверен, что это за overview-btm, super-profile-btm и все такое. Но по ссылкам все просто:

const links = document.querySelectorAll('.nav-item.nav-link');
links.forEach((link) => {
    if (link.pathname === window.location.pathname) {
        link.classList.add('nav-active');
    }
})