Dynamic active Bootstrap class for Navbar || Django

একটা ওয়েব সাইটে Navbar একটি গুরুত্বপূর্ণ অংশ। আজ আমরা দেখবো আমাদের Django প্রজেক্টে একটি Navbar এ Bootstrap এর  active ক্লাসটি কিভাবে ডাইনামিক ভাবে ইমপ্লিমেন্ট করতে পারি। 

উপরের ২টা ছবিতে যদি আমরা খেয়াল করি, আমরা যখন Home এ ছিলাম তখন Home লিঙ্কটা হাইলাইটেড হয়ে ছিল আবার যখন Projects লিঙ্কে ছিলাম তখন সেটা হাইলাইটেদ হয়ে ছিল। এই কাজটাই কিভাবে করতে হয় সেটাই আজ আমরা দেখবো

<ul>
    <li class="nav-item active">
       <a class="nav-link" href="https://www.google.com/">Home </a>
    </li>

    <li class="nav-item active">
       <a class="nav-link" href="http://fb.com/">Projects</a>
    </li>
</ul>

Navbar এর ভিতরে এইযে ul ট্যাগের ভিতরে যে li ট্যাগ থাকে এখানেই আমাদের কিছু কাজকর্ম করতে হবে। এর জন্য আমাদের প্রজেক্টের urls.py ফাইল টা আমাদের লাগবে। 

from django.urls import path
from . import views


urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('projects/', views.projects, name='projects'),
]

এই হচ্ছে আমাদের urls.py। আমাদের home পেজটা localhost:8000 এই লিঙ্কে ডিসপ্লে হবে যেহেতু path এর মধ্যে আমরা এম্পটি স্ট্রিং ব্যবহার করেছি। আবার contact পেজটি localhost:8000/contact এই লিঙ্কে ডিসপ্লে হবে। এইযে স্ট্রিং গুলো আমরা আমাদের পাথে ব্যবহার করেছি এটার সাহায্যে আমরা ডাইনামিক ভাবে active ক্লাসকে ডিফাইন করতে পারবো।  li ট্যাগের মধ্যে আমরা একটা if else কন্ডিশন ব্যাবহার করবো।

<li 
    {% if 'contact' in request.path %} 
        class="navar-item mr-3 active" 
    {% else %} 
        class="navar-item mr-3"
    {% endif %}
>

এখানে string টা হবে আমাদের urls.py এ যে string ব্যবহার করেছি। যদি হোম পেজের জন্য এম্পটি স্ট্রিং ইউস করে সেক্ষেত্রে কন্ডিশনটা হবে। 

<li 
    {% if '/' == request.path %} 
        class="navar-item mr-3 active" 
    {% else %}  
        class="navar-item mr-3"
    {% endif %}
>

এভাবে li ট্যাগ এর ভিতরে এই কয়েক লাইন কোড ইউস করলে আমরা আমাদের কাঙ্ক্ষিত ফলাফল পেয়ে যাবো।

সম্পূর্ণ কোডটি এখানে আছে। Navbar