Navbar Component এর ব্যবহার

Bulma ফ্রেমওয়ার্কে Navbar কম্পোনেন্ট একটি গুরুত্বপূর্ণ উপাদান, যা ওয়েবসাইটের নেভিগেশন মেনু তৈরি করতে ব্যবহৃত হয়। এটি রেসপনসিভ, অর্থাৎ স্ক্রীনের সাইজ অনুসারে স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট হয় এবং ব্যবহারকারীর জন্য একটি সহজ নেভিগেশন অভিজ্ঞতা প্রদান করে।

১. বেসিক Navbar

Bulma এর navbar কম্পোনেন্টে কিছু প্রাথমিক ক্লাস ব্যবহার করে সহজে একটি নেভিগেশন বার তৈরি করা যেতে পারে। এটি সাধারণত ওয়েবসাইটের শীর্ষে থাকে এবং এতে লোগো, লিঙ্ক বা অন্যান্য উপাদান থাকতে পারে।

উদাহরণ: একটি সাধারণ Navbar

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo" width="112" height="28">
    </a>
    <span class="navbar-burger" data-target="navbarMenu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </div>

  <div id="navbarMenu" class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

২. Navbar এর প্রধান উপাদান

1. navbar-brand:
   • এটি নেভিগেশন বারের ব্র্যান্ড অংশ, সাধারণত ওয়েবসাইটের লোগো বা নাম এখানে রাখা হয়।
   • <a class="navbar-item"> ক্লাসের মাধ্যমে লোগো বা ব্র্যান্ডের লিঙ্ক তৈরি করা হয়।
2. navbar-burger:
   • এটি একটি রেসপনসিভ আইকন (যেমন: হ্যামবার্গার মেনু) যা মোবাইল স্ক্রীনে নেভিগেশন মেনু প্রদর্শন করে।
   • data-target="navbarMenu" ক্লাসের মাধ্যমে এটি নেভিগেশন মেনুর জন্য ট্রিগার হিসেবে কাজ করে।
3. navbar-menu:
   • এই অংশে সমস্ত নেভিগেশন লিঙ্ক থাকে। navbar-end ক্লাস ব্যবহার করে এটিকে সঠিকভাবে সজ্জিত করা হয়।
4. navbar-item:
   • প্রতিটি নেভিগেশন লিঙ্ককে navbar-item ক্লাসের মাধ্যমে আলাদা করা হয়।

৩. রেসপনসিভ Navbar

Bulma এর navbar-burger ক্লাসটি মোবাইল স্ক্রীনে এক্সপ্যান্ডেবল মেনু তৈরি করতে সাহায্য করে। যখন স্ক্রীন সাইজ ছোট হয়, তখন এটি একটি হ্যামবার্গার মেনু হিসেবে রূপান্তরিত হয়, যেটি ক্লিক করলে মেনু দেখতে পাওয়া যায়।

উদাহরণ: রেসপনসিভ Navbar

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>
    <span class="navbar-burger" data-target="navbarMenu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </div>

  <div id="navbarMenu" class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const burger = document.querySelector('.navbar-burger');
    const menu = document.querySelector('#navbarMenu');
    burger.addEventListener('click', () => {
      menu.classList.toggle('is-active');
      burger.classList.toggle('is-active');
    });
  });
</script>

এখানে navbar-burger ক্লাসটি মোবাইল ডিভাইসের জন্য মেনু ট্রিগার হিসেবে কাজ করবে এবং is-active ক্লাসটি নেভিগেশন মেনুকে টগল করে দেখাবে বা লুকাবে।

৪. Navbar Color এবং Styling

Bulma আপনাকে নেভিগেশন বারের জন্য বিভিন্ন রঙ এবং স্টাইল কাস্টমাইজ করার সুযোগ দেয়। আপনি is-primary, is-link, is-info, ইত্যাদি ক্লাস ব্যবহার করে নেভিগেশন বারের রঙ পরিবর্তন করতে পারেন।

উদাহরণ: Navbar Color পরিবর্তন

<nav class="navbar is-primary">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

এখানে is-primary ক্লাস ব্যবহার করা হয়েছে নেভিগেশন বারের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে।

৫. Navbar এর সাথে ফর্ম ব্যবহার

Bulma এর Navbar কম্পোনেন্টের সাথে ফর্মও যুক্ত করা যেতে পারে। এটি বিশেষত সার্চ বারে উপকারী, যেখানে ব্যবহারকারী কন্টেন্ট খুঁজতে পারেন।

উদাহরণ: Navbar এর সাথে ফর্ম

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Logo</a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field has-addons">
          <div class="control">
            <input class="input" type="text" placeholder="Search">
          </div>
          <div class="control">
            <button class="button is-info">
              Search
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

এখানে field has-addons ক্লাস ব্যবহার করে একটি সার্চ বক্স তৈরি করা হয়েছে।

সারাংশ

Bulma এর Navbar কম্পোনেন্ট সহজে ব্যবহারযোগ্য এবং রেসপনসিভ, যা ওয়েবসাইটের নেভিগেশন মেনু তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি লোগো, লিঙ্ক, এবং অন্যান্য কম্পোনেন্ট যুক্ত করতে পারেন। Navbar-burger এবং is-active ক্লাসের মাধ্যমে এটি মোবাইল ডিভাইসে হ্যামবার্গার মেনু হিসেবে কাজ করে। এছাড়াও, আপনি color এবং styling ক্লাস ব্যবহার করে নেভিগেশন বারের ডিজাইন কাস্টমাইজ করতে পারবেন।