🌟 بررسی کامپوننت‌ها – بخش پنجم (Bootstrap 5)

==============================
🧭 Navbar

✔️ برای ایجاد نوار ناوبری بالای سایت
✔️ ریسپانسیو و قابل Collapse در موبایل

📦 ساختار اصلی:
🔹 wrapper → navbar
🔹 container → container یا container-fluid
🔹 برند / لوگو → navbar-brand
🔹 منو → navbar-nav
🔹 آیتم‌ها → nav-item
🔹 لینک‌ها → nav-link

🎮 دکمه Collapse (ریسپانسیو):
🔘 دکمه toggle → navbar-toggler
🔘 آیکون toggle → navbar-toggler-icon
🔘 هدف collapse → data-bs-target="#ID"
🔘 المان collapse → collapse navbar-collapse

🎨 رنگ و ظاهر:
✔️ پس‌زمینه → bg-* (primary, dark, light…)
✔️ متن → navbar-dark یا navbar-light
✔️ استایل کامل responsive توسط Bootstrap فراهم است

💡 نکات کاربردی:

• لینک‌ها و منوهای Dropdown داخل Navbar قابل استفاده‌اند
• لوگو و لینک‌ها می‌توانند سمت چپ یا راست چین شوند
• Navbar ثابت بالا → fixed-top
• Navbar قابل Scroll و sticky → sticky-top

==============================
🪟 Offcanvas

✔️ برای نمایش منو یا پنل کناری که از سمت چپ یا راست باز می‌شود
✔️ جایگزین مدرن و جذاب برای منوی موبایل یا sidebar

📦 ساختار اصلی:
🔹 wrapper → offcanvas
🔹 موقعیت: offcanvas-start / offcanvas-end / offcanvas-top / offcanvas-bottom
🔹 هدر → offcanvas-header (اختیاری، معمولاً با دکمه بستن)
🔹 بدنه → offcanvas-body

🎮 فعال‌سازی:
🔘 دکمه: data-bs-toggle="offcanvas"
🔘 هدف پنل: data-bs-target="#ID"
🔘 بستن: دکمه با data-bs-dismiss="offcanvas" یا کلیک روی پس‌زمینه

⚙️ نکات کاربردی:

• می‌توان در Navbar به جای Collapse استفاده کرد
• ریسپانسیو است و به راحتی با CSS یا JS شخصی‌سازی می‌شود
• می‌توان آیتم‌ها، فرم یا هر محتوای دلخواه داخل Offcanvas قرار داد