How to make element active in sidebar which is in django include tag through javascript?

user_15045503 0
Viewed 223

I have made sidebar in sidebar.html and had include it in main.html as well as dashboard.html through django include tag to reduce data reduntancy->

         {% include 'employee/sidebar.html' %}

         {% block content %}
 
         {% endblock %}

Now how do I make different elements (in sidebar) active according to the different pages? Like for example, When I am on dashboard.html , dashboard should be active in sidebar.

Here is sidebar.html

  <ul>

    <li class="nav-item">
    <a class="nav-link" href="admin_dashboard.html">
        <span>Dashboard</span></a>
   </li>


    <li class="nav-item">
    <a class="nav-link" href="main.html">
        <span>Create</span></a>
   </li>


 </ul>
include django html javascript
1 Answers

You should use the url tag for getting the path to your other views/urls, this tag takes an argument as that stores the result of the tag as a variable, this variable can be used to add classes if the current path matches the URL

<ul>
  {% url 'dashboard' as dashboard_url %}
  <li class="nav-item {% if request.path == dashboard_url %}active{% endif %}">
    <a class="nav-link" href="{{ dashboard_url }}"><span>Dashboard</span></a>
  </li>
  {% url 'main' as main_url %}
  <li class="nav-item {% if request.path == main_url %}active{% endif %}">
    <a class="nav-link" href="{{ main_url }}"><span>Create</span></a>
  </li>
</ul>
user_5485620
Related