highlight current page

Author: mominur-helios

apps/charts/views.py

@@ -4,4 +4,8 @@
 # Create your views here.
 
 def index(request):
-    return render(request, 'pages/apps/charts.html')
+    context = {
+        'segment'  : 'charts',
+        'parent'   : 'apps',
+    }
+    return render(request, 'pages/apps/charts.html', context)

apps/tables/views.py

@@ -4,4 +4,8 @@
 # Create your views here.
 
 def datatables(request):
-  return render(request, 'pages/apps/datatables.html')
+  context = {
+    'segment'  : 'datatables',
+    'parent'   : 'apps',
+  }
+  return render(request, 'pages/apps/datatables.html', context)

apps/tasks/views.py

@@ -33,7 +33,8 @@ def tasks(request):
             'cfgError' : ErrInfo,
             'tasks'    : get_celery_all_tasks(),
             'scripts'  : scripts,
-            'segment'  : 'tasks'
+            'segment'  : 'tasks',
+            'parent'   : 'apps',
         }
 
     # django_celery_results_task_result

apps/users/views.py

@@ -65,6 +65,7 @@ def profile(request):
 
     context = {
         'form': form,
+        'segment': 'profile',
     }
     return render(request, 'pages/dashboard/profile.html', context)
 

home/views.py

@@ -5,7 +5,9 @@
 
 def index(request):
 
-  context = {}
+  context = {
+    'segment': 'dashboard',
+  }
   return render(request, "pages/dashboard/index.html", context)
 
 def starter(request):

templates/includes/sidebar.html

@@ -26,7 +26,7 @@
                     </li>
                     <li>
                         <a href="/"
-                            class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700 ">
+                            class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700 {% if 'dashboard' in segment %} bg-gray-100 dark:bg-gray-700 {% endif %}">
                             <svg class="w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
                                 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
@@ -52,7 +52,7 @@
                     {% else %}
                     <li>
                         <a href="{% url 'profile' %}"
-                            class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700 ">
+                            class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700 {% if 'profile' in segment %} bg-gray-100 dark:bg-gray-700 {% endif %}">
                             <svg class="w-6 h-6 text-gray-500 dark:text-white" aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                 <path
@@ -66,7 +66,7 @@
                     {% endif %}
                     <li>
                         <button type="button"
-                            class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+                            class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700 {% if 'apps' in parent %} bg-gray-100 dark:bg-gray-700 {% endif %}"
                             aria-controls="dropdown-dashboard" data-collapse-toggle="dropdown-dashboard">
                             <svg class="w-6 h-6 text-gray-500 dark:text-white" aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
@@ -82,18 +82,18 @@
                                     clip-rule="evenodd"></path>
                             </svg>
                         </button>
-                        <ul id="dropdown-dashboard" class="hidden py-2 space-y-2">
+                        <ul id="dropdown-dashboard" class="py-2 space-y-2 {% if 'apps' in parent %}block {% else %} hidden {% endif %}">
                             <li>
                                 <a href="{% url 'tasks' %}"
-                                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">Tasks</a>
+                                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700 {% if 'tasks' in segment %} bg-gray-100 dark:bg-gray-700 {% endif %}">Tasks</a>
                             </li>
                             <li>
                                 <a href="{% url 'charts' %}"
-                                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">Charts</a>
+                                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700 {% if 'charts' in segment %} bg-gray-100 dark:bg-gray-700 {% endif %}">Charts</a>
                             </li>
                             <li>
                                 <a href="{% url 'datatables' %}"
-                                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">Datatables</a>
+                                    class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700 {% if 'datatables' in segment %} bg-gray-100 dark:bg-gray-700 {% endif %}">Datatables</a>
                             </li>
                             <li>
                                 <a href="/api/product/"