Sidebar

Salin

<div style="display:flex;gap:1rem;align-items:flex-start">
  <aside class="ck-sidebar" style="display:flex;height:34rem;position:relative;border-radius:var(--ck-radius-lg);overflow:hidden;flex:0 0 auto">
    <div class="ck-sidebar__brand">
      <span class="ck-sidebar__logo"><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>
      <span class="ck-sidebar__wordmark"><b>Classroom</b><span>.my.id</span></span>
    </div>
    <div class="ck-context ck-context--tenant">
      <div class="ck-overline ck-mb-2">Lembaga Aktif</div>
      <div class="ck-context__value ck-truncate">SMA Negeri 1 Bandung</div>
      <div class="ck-context__meta"><span class="ck-dot ck-dot--success"></span> Admin Lembaga</div>
    </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 class="ck-sidebar__foot">
      <div class="ck-row ck-row-2">
        <span class="ck-avatar ck-avatar--sm" data-ck-avatar="Siti Nurhaliza"><span></span></span>
        <div class="ck-grow"><div class="ck-text-sm ck-strong ck-truncate">Siti Nurhaliza</div><div class="ck-text-xs ck-muted ck-truncate">Guru · SMA Negeri 1</div></div>
      </div>
    </div>
    <div style="padding:.75rem;border-top:1px solid hsl(var(--ck-border))">
      <button class="ck-btn ck-btn--ghost ck-btn--sm ck-btn--block" data-ck-sidebar-toggle aria-expanded="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m15 18-6-6 6-6"/></svg> <span>Lipat</span></button>
    </div>
  </aside>
</div>

Salin

<div style="display:flex;gap:1rem">
  <aside class="ck-sidebar" style="display:flex;height:30rem;position:relative;border-radius:var(--ck-radius-lg);overflow:hidden;flex:0 0 auto">
    <div class="ck-sidebar__brand"><span class="ck-sidebar__logo"><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><span class="ck-sidebar__wordmark"><b>Classroom</b><span>.my.id</span></span></div>
    <div class="ck-context ck-context--platform">
      <div class="ck-overline ck-mb-2">Mode</div>
      <div class="ck-row ck-row-2 ck-strong" style="font-size:var(--ck-text-sm)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg> Platform Admin</div>
      <div class="ck-text-xs ck-muted ck-mt-2">Cross-tenant management</div>
    </div>
    <nav class="ck-sidebar__nav"><div class="ck-sidebar__group"><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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg><span>Platform 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>Semua Lembaga</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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg><span>Manajemen User</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="M3 3v18h18M18 17V9M13 17V5M8 17v-3"/></svg><span>Analitik</span></a></li>
    </ul></div></nav>
  </aside>
</div>