Tujuan Pembelajaran

Peserta mampu:

1. Memahami konsep Offcanvas.
2. Membuat sidebar mobile.
3. Membuat dashboard responsif.
4. Mengoptimalkan tampilan smartphone.

---

A. Apa Itu Offcanvas?

Offcanvas adalah panel yang muncul dari samping layar.

Contoh penggunaan:

• Menu aplikasi mobile
• Sidebar dashboard
• Filter produk e-commerce
• Menu admin

Ilustrasi:

+----------------------+
| ☰ Dashboard          |
+----------------------+

Klik ☰

+---------+
| Menu    |
| Dashboard
| Produk
| User
| Logout
+---------+

---

B. Struktur Dasar Offcanvas

<button class="btn btn-primary"
data-bs-toggle="offcanvas"
data-bs-target="#menu">

Menu
</button>

<div class="offcanvas offcanvas-start"
id="menu">

<div class="offcanvas-header">

<h5>Dashboard</h5>

<button class="btn-close"
data-bs-dismiss="offcanvas">
</button>

</div>

<div class="offcanvas-body">

<a href="#">Beranda</a>

</div>

</div>

---

Penjelasan

Class	Fungsi
offcanvas	Mengaktifkan panel
offcanvas-start	Muncul dari kiri
offcanvas-end	Muncul dari kanan
offcanvas-top	Muncul dari atas
offcanvas-bottom	Muncul dari bawah

---

Praktik 1

Sidebar Mobile Sistem Sekolah

Buat menu:

• Dashboard
• Data Siswa
• Data Guru
• Jurusan
• Logout

menggunakan Offcanvas.

---

Praktik 2

Dashboard Mobile Friendly

Tambahkan:

• Logo sekolah
• Nama aplikasi
• Tombol menu hamburger

---

Latihan Bab

1. Apa fungsi Offcanvas?
2. Apa perbedaan Navbar dan Offcanvas?
3. Kapan Offcanvas digunakan?
4. Apa fungsi offcanvas-start?
5. Apa fungsi btn-close?