Menu Component ব্যবহার করে Sidebar তৈরি

Bulma ফ্রেমওয়ার্কের Menu কম্পোনেন্টটি একটি সহজ এবং কার্যকরী উপায় সাইডবার (Sidebar) তৈরি করার জন্য। Menu কম্পোনেন্টটি সাধারণত নেভিগেশন মেনু হিসেবে ব্যবহৃত হয়, কিন্তু এটি সাইডবার হিসেবে কাস্টমাইজ করেও ব্যবহার করা যায়। এখানে আমরা দেখবো কীভাবে Bulma এর Menu কম্পোনেন্ট ব্যবহার করে একটি সাইডবার তৈরি করা যায়।

১. Menu কম্পোনেন্টের মৌলিক গঠন

Bulma এর Menu কম্পোনেন্টটি সাধারণত একটি তালিকা আকারে থাকে, যেখানে বিভিন্ন লিঙ্ক থাকে যা আপনি সহজেই কাস্টমাইজ করতে পারেন। এটি তৈরি করতে menu, menu-list, এবং menu-label ক্লাসগুলো ব্যবহার করা হয়।

উদাহরণ:

<div class="menu">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Customers</a></li>
    <li><a href="#">Reports</a></li>
  </ul>

  <p class="menu-label">
    Administration
  </p>
  <ul class="menu-list">
    <li><a href="#">Team Settings</a></li>
    <li><a href="#">Manage Your Team</a></li>
    <li><a href="#">Invitations</a></li>
  </ul>
</div>

এখানে একটি সিম্পল মেনু তৈরি করা হয়েছে, যা General এবং Administration নামে দুটি বিভাগে বিভক্ত। প্রতিটি বিভাগে কয়েকটি লিঙ্ক রয়েছে।

২. সাইডবার স্টাইল করা

সাইডবারের জন্য Bulma এর aside ট্যাগ ব্যবহার করা হয়। এই aside ট্যাগটিকে সঠিকভাবে স্টাইল করে, একটি ফিক্সড সাইডবার তৈরি করা যেতে পারে। আমরা is-fixed ক্লাস, is-3 ক্লাস (এটি সাইডবারের প্রস্থ নির্ধারণ করে) এবং অন্যান্য ক্লাস ব্যবহার করব।

উদাহরণ:

<aside class="menu is-fixed is-3">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Customers</a></li>
    <li><a href="#">Reports</a></li>
  </ul>

  <p class="menu-label">
    Administration
  </p>
  <ul class="menu-list">
    <li><a href="#">Team Settings</a></li>
    <li><a href="#">Manage Your Team</a></li>
    <li><a href="#">Invitations</a></li>
  </ul>
</aside>

এখানে is-3 ক্লাসটি সাইডবারের প্রস্থকে 3 কলাম ব্যাসে সেট করে। আপনি এটি is-2, is-4, is-5 ইত্যাদিতে পরিবর্তন করতে পারেন।

৩. সাইডবারের সাথে কনটেন্ট যোগ করা

এখন, সাইডবার এবং কনটেন্ট একসাথে একটি পেজে উপস্থাপন করতে হবে। আমরা section, main, এবং content ট্যাগ ব্যবহার করে কনটেন্ট ব্লক তৈরি করব এবং সাইডবারটি বাম পাশে স্থাপন করব।

উদাহরণ:

<div class="columns">
  <div class="column is-3">
    <aside class="menu is-fixed">
      <p class="menu-label">General</p>
      <ul class="menu-list">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Reports</a></li>
      </ul>

      <p class="menu-label">Administration</p>
      <ul class="menu-list">
        <li><a href="#">Team Settings</a></li>
        <li><a href="#">Manage Your Team</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </aside>
  </div>
  <div class="column">
    <section class="section">
      <div class="container">
        <h1 class="title">Main Content</h1>
        <p>Here is the main content of the page.</p>
      </div>
    </section>
  </div>
</div>

এখানে, columns এবং column ক্লাস ব্যবহার করে একটি গ্রিড লেআউট তৈরি করা হয়েছে। সাইডবার is-3 কলামে এবং কনটেন্ট is-9 কলামে রাখা হয়েছে।

৪. সাইডবার টগল বা হিডিং তৈরি করা

যদি আপনি সাইডবারটিকে রেসপন্সিভ বানাতে চান এবং মোবাইল ডিভাইসে এটি toggle করতে চান, তাহলে কিছু অতিরিক্ত ক্লাস এবং JavaScript ব্যবহার করতে হবে। উদাহরণস্বরূপ, একটি বাটন ক্লিক করলে সাইডবারটি স্লাইড হয়ে আসবে বা যাবে।

উদাহরণ:

<button class="button is-primary" id="menu-toggle">
  <i class="fas fa-bars"></i>
</button>

<aside class="menu" id="menu-sidebar">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Customers</a></li>
    <li><a href="#">Reports</a></li>
  </ul>
  <p class="menu-label">Administration</p>
  <ul class="menu-list">
    <li><a href="#">Team Settings</a></li>
    <li><a href="#">Manage Your Team</a></li>
    <li><a href="#">Invitations</a></li>
  </ul>
</aside>

<script>
  document.getElementById("menu-toggle").addEventListener("click", function() {
    var sidebar = document.getElementById("menu-sidebar");
    sidebar.classList.toggle("is-hidden");
  });
</script>

এখানে menu-toggle বাটনের মাধ্যমে সাইডবারটি is-hidden ক্লাসের মাধ্যমে টগল করা হচ্ছে। যখন ব্যবহারকারী বাটনে ক্লিক করবে, সাইডবারটি দেখা যাবে বা লুকিয়ে যাবে।

৫. সাইডবারের উন্নত কাস্টমাইজেশন

আপনি সাইডবারকে আরও কাস্টমাইজ করতে পারেন, যেমন:

• Active Link: বর্তমান সক্রিয় লিঙ্কটি হাইলাইট করা।
• Dropdown Menu: সাইডবারে ড্রপডাউন মেনু যুক্ত করা।

Active Link:

<li><a class="is-active" href="#">Dashboard</a></li>

Dropdown Menu:

<p class="menu-label">Settings</p>
<ul class="menu-list">
  <li>
    <a href="#">General</a>
    <ul>
      <li><a href="#">Account</a></li>
      <li><a href="#">Security</a></li>
    </ul>
  </li>
</ul>

এখানে, is-active ক্লাস ব্যবহার করে সক্রিয় লিঙ্ক হাইলাইট করা হয়েছে এবং dropdown মেনু তৈরির জন্য একটি সাবমেনু (ul) যুক্ত করা হয়েছে।

সারাংশ

Bulma এর Menu কম্পোনেন্ট ব্যবহার করে একটি সহজ এবং সুন্দর সাইডবার তৈরি করা সম্ভব। এই সাইডবারে বিভিন্ন নেভিগেশন লিঙ্ক এবং বিভাগ তৈরি করা যায়। আপনি সাইডবারটিকে ফিক্সড, রেসপন্সিভ বা টগলযোগ্য করতে পারেন, এবং এটি Bulma এর ক্লাস এবং কাস্টম JavaScript কোড ব্যবহার করে কাস্টমাইজ করা যেতে পারে।