📌 Offcanvas یک پنجره یا منوی کشویی است که معمولاً از کنار صفحه باز می‌شود و برای منوهای موبایل، پنل‌های تنظیمات یا نوتیفیکیشن‌ها استفاده می‌شود.
این کامپوننت می‌تواند از سمت چپ، راست، بالا یا پایین ظاهر شود.

✅ Offcanvas ساده (از سمت چپ)

<!-- دکمه باز کردن Offcanvas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  باز کردن منو
</button>

<!-- ساختار Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">منوی کشویی</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="بستن"></button>
  </div>
  <div class="offcanvas-body">
    <p>این متن داخل پنل Offcanvas است.</p>
    <ul class="list-group">
      <li class="list-group-item">خانه</li>
      <li class="list-group-item">درباره ما</li>
      <li class="list-group-item">تماس</li>
    </ul>
  </div>
</div>

✅ Offcanvas از سمت راست

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">راست</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    محتوای Offcanvas از سمت راست
  </div>
</div>

✅ Offcanvas از بالا یا پایین

<!-- از بالا -->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">
  ...
</div>

<!-- از پایین -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom">
  ...
</div>

✅ Offcanvas همراه با فرم یا محتوا

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasForm">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">فرم ورود</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <div class="mb-3">
        <label for="email" class="form-label">ایمیل</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">رمز عبور</label>
        <input type="password" class="form-control" id="password">
      </div>
      <button type="submit" class="btn btn-primary">ورود</button>
    </form>
  </div>
</div>

✅ نکات مهم

• data-bs-toggle="offcanvas" → فعال‌سازی Offcanvas

• data-bs-target="#id" → مشخص کردن Offcanvas موردنظر

• کلاس‌ها:

  • offcanvas-start → از سمت چپ

  • offcanvas-end → از سمت راست

  • offcanvas-top → از بالا

  • offcanvas-bottom → از پایین

• Offcanvas نیاز به JS بوت‌استرپ دارد.