show current page in primary nav

cdhweb/pages/templatetags/core_tags.py

@@ -3,7 +3,12 @@
 from django.template.loader import render_to_string
 from django.utils import timezone
 
-from cdhweb.pages.snippets import Footer, PrimaryNavigation, SecondaryNavigation, SiteAlert
+from cdhweb.pages.snippets import (
+    Footer,
+    PrimaryNavigation,
+    SecondaryNavigation,
+    SiteAlert,
+)
 
 register = template.Library()
 
@@ -77,14 +82,22 @@ def _get_primary_nav_items():
     return l1_menu_items
 
 
-@register.simple_tag()
-def primary_nav_dict():
+@register.simple_tag(takes_context=True)
+def primary_nav_dict(context):
     """
     Return the primary navigation data as a dict, for use with the 'json_script' filter.
     """
     primary_nav_items = _get_primary_nav_items()
     l1_menu_item_data = [_l1_item_to_dict(item) for item in primary_nav_items]
 
+    current_path = context["request"].path
+
+    for item in l1_menu_item_data:
+        if current_path.startswith(item["link_url"]):
+            item["is_current"] = True
+        else:
+            item["is_current"] = False
+
     primary_nav_data = {
         "primary_nav": {
             "l1_menu_items": l1_menu_item_data,
@@ -187,4 +200,14 @@ def site_alerts(context):
         .exclude(display_until__lt=now)
     )
     data = {"site_alerts": site_alerts, "request": context.get("request")}
-    return data
+    return data
+
+
+@register.filter
+def starts_with(value, arg):
+    """
+    Usage, {% if value|starts_with:"arg" %}
+    """
+    if value:
+        return value.startswith(arg)
+    return None

templates/includes/header.html

@@ -38,7 +38,7 @@
                 <ul class="main-nav-desktop__list">
                     {% for item in primary_nav.l1_menu_items %}
                         <li>
-                            <a href="{{ item.link_url }}" class="main-nav-desktop__item">
+                            <a href="{{ item.link_url }}" class="main-nav-desktop__item {% if request.path|starts_with:item.link_url %} active {% endif %}" >
                                 <span>{{ item.title }}</span>
                                 {# Reserve space for dropdown icon, to stop jank when the React version replaces this version. #}
                                 {% if item.l2_items.all %}