Laci

Salin

<button class="ck-btn ck-btn--outline" data-ck-drawer-open="dr-kiri">Buka laci kiri</button>
<div class="ck-drawer" id="dr-kiri" aria-label="Navigasi">
  <div class="ck-sidebar__brand"><span class="ck-sidebar__wordmark"><b>Menu</b><span>Classroom</span></span>
  <button class="ck-btn ck-btn--ghost ck-btn--icon-sm" data-ck-close-drawer aria-label="Tutup"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
<nav class="ck-sidebar__nav">
  <div class="ck-sidebar__group">
    <div class="ck-sidebar__group-label ck-overline">Utama</div>
    <ul class="ck-stack-1">
      <li><a class="ck-sidebar__link ck-sidebar__link--active" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 3v18h18M18 17V9M13 17V5M8 17v-3"/></svg><span>Dashboard</span></a></li>
      <li><a class="ck-sidebar__link" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 22v-4a2 2 0 1 0-4 0v4M18 10l4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2M18 5v17M6 5v17M4 6l8-4 8 4"/></svg><span>Kelas Saya</span></a></li>
      <li><a class="ck-sidebar__link" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>Settings</span></a></li>
    </ul>
  </div>
  <div class="ck-sidebar__group">
    <div class="ck-sidebar__group-label ck-overline">Belajar</div>
    <ul class="ck-stack-1">
      <li><a class="ck-sidebar__link" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5M3 12a9 3 0 0 0 18 0"/></svg><span>Bank Soal</span></a></li>
      <li><a class="ck-sidebar__link" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v6h6"/></svg><span>Course</span></a></li>
      <li><a class="ck-sidebar__link" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v6h6"/></svg><span>Kuis</span></a></li>
      <li><a class="ck-sidebar__link" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span>Tugas</span></a></li>
      <li><a class="ck-sidebar__link" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0z"/></svg><span>Leaderboard</span></a></li>
    </ul>
  </div>
</nav>
</div>