Well, im not sure what are these overview-btm, super-profile-btm and stuff. But for the links, it is simple:

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

I usually write in Python on the back-end and am not seasoned on JS. This code looks pretty nasty to me as it repeats itself a lot. If I were writing in Python I think I would make a list of objects then loop over the list of objects to add the active class if one of the objects matches the URL.

Can I do that with JS? Or what is a good way to optimize this from someone who writes on the front-end normally?

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
}

Edit:
Snippet of HTML in the base.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>