Highlight active Overview, Transfer, or Preview tab

[globus]

Highlight active Overview, Transfer, or Preview tab

[NickolausDS]

Adding this via bootstrap is actually trivially easy, and only requires the active class to the tab that needs highlighting. The part I struggled with was how to do this in a way that didn't require adding contexts to each view as most internet answers suggest:

def my_page(request):
    context = {'my_page_nav_tab_is_active': 'active'}
    return render(request, 'mypage.html', context)

<li class="nav-tab {{my_page_nav_tab_is_active}}"><a href="/my_page/">My Page</a></li>

This can quickly get out of hand when other one-off items need to be added to pages, and views end up like:

def my_page(request):
    context = {'my_page_nav_tab_is_active': 'active'}
    context['my_other_active_subnav_element'] = 'active'
    context['thingy_only_active_on_my_page_and_my_other_page'] = 'active'
    return render(request, 'mypage.html', context)

def my_other_page(request):
    context = {'my_other_page_nav_tab_is_active': 'active'}
    context['thingy_only_active_on_my_page_and_my_other_page'] = 'active'
    return render(request, 'myotherpage.html', context)

I found this answer that adds a custom template tag is_active, that solves this problem without adding any code to the views or relying on global contexts, and can be reused on every template.

TLDR: The common naive Django solution is bad, let's use a custom template tag instead.