Highlight active navbar items

Signed-off-by: Keshav Priyadarshi <[email protected]>

Author: keshav-space

vulnerabilities/templates/navbar.html

@@ -1,15 +1,17 @@
+{% load utils %}
+
 <nav class="navbar is-dark mb-5 border-bottom-radius" role="navigation" aria-label="main navigation">
     <div class="navbar-brand ml-3">
-        <a class="navbar-item is-size-4 has-text-weight-bold" href="/">
+        <a class="navbar-item is-size-4 has-text-weight-bold {% active_item 'home' %}" href="{% url 'home' %}">
             VulnerableCode<span class="nexb-orange">.</span>io
         </a>
     </div>
     <div class="navbar-menu">
         <div class="navbar-start">
-            <a class="navbar-item" href="{% url 'package_search' %}">
+            <a class="navbar-item {% active_item 'package_search' %}" href="{% url 'package_search' %}">
                 Packages
             </a>
-            <a class="navbar-item" href="{% url 'vulnerability_search' %}">
+            <a class="navbar-item {% active_item 'vulnerability_search' %}" href="{% url 'vulnerability_search' %}">
                 Vulnerabilities
             </a>
             <a class="navbar-item" href="https://vulnerablecode.readthedocs.io/en/latest/" target="_blank">
@@ -18,7 +20,7 @@
         </div>
     </div>
     <div class="navbar-end mr-3">
-        <a class="navbar-item" href="{% url 'schedule' %}">
+        <a class="navbar-item  {% active_item 'schedule' %}" href="{% url 'schedule' %}">
             Pipeline Schedule
         </a>
         <a class="navbar-item" href="{% url 'api_user_request' %}" target="_blank">

vulnerabilities/templatetags/utils.py

@@ -24,3 +24,13 @@ def strip(value):
 @register.filter
 def humanize_duration(duration):
     return humanize_time(seconds=duration)
+
+
+@register.simple_tag(takes_context=True)
+def active_item(context, url_name):
+    """Return is-active if navbar item is active."""
+    request = context.get("request")
+    if request and getattr(request, "resolver_match"):
+        if request.resolver_match.url_name == url_name:
+            return "is-active"
+    return ""

vulnerablecode/urls.py

@@ -70,7 +70,11 @@ def __init__(self, *args, **kwargs):
         HomePage.as_view(),
         name="home",
     ),
-    path("pipelines/schedule", PipelineScheduleListView.as_view(), name="schedule"),
+    path(
+        "pipelines/schedule/",
+        PipelineScheduleListView.as_view(),
+        name="schedule",
+    ),
     path(
         "pipelines/<str:pipeline_id>/runs/",
         PipelineRunListView.as_view(),
@@ -82,7 +86,7 @@ def __init__(self, *args, **kwargs):
         name="run-details",
     ),
     path(
-        "packages/search",
+        "packages/search/",
         PackageSearch.as_view(),
         name="package_search",
     ),
@@ -92,7 +96,7 @@ def __init__(self, *args, **kwargs):
         name="package_details",
     ),
     path(
-        "vulnerabilities/search",
+        "vulnerabilities/search/",
         VulnerabilitySearch.as_view(),
         name="vulnerability_search",
     ),