85Lesson panel (mobile)

Below lg the player's curriculum rail becomes this: a bottom bar naming where you are, opening the full lesson list in a Drawer. The bar is the rail's handle — always visible, one tap from any lesson.

Use it for

The player below the lg breakpoint
Any lesson page where the rail has collapsed

Not for

Desktop — the rail is already on screen

Bottom bar

Sticky at the viewport bottom in product (--fixed); static here.

lesson 07 of 12 SOQL joins: relationships

markup

<div class="ns-panelbar" style="max-inline-size:26rem;inline-size:100%">
  <span class="ns-panelbar__now">
    <span class="ns-panelbar__kicker">lesson 07 of 12</span>
    <span class="ns-panelbar__title">SOQL joins: relationships</span>
  </span>
  <button class="ns-btn ns-btn--outline ns-btn--sm" data-open-panel><i class="ph ph-list" aria-hidden="true"></i> Lessons</button>
</div>

Opened panel

The system Drawer with the same lesson rows — nothing new to learn.

lesson 07 of 12 SOQL joins: relationships

markup

<div class="ns-panelbar" style="max-inline-size:26rem;inline-size:100%">
  <span class="ns-panelbar__now">
    <span class="ns-panelbar__kicker">lesson 07 of 12</span>
    <span class="ns-panelbar__title">SOQL joins: relationships</span>
  </span>
  <button class="ns-btn ns-btn--outline ns-btn--sm" data-open-panel><i class="ph ph-list" aria-hidden="true"></i> Lessons</button>
</div>
<dialog class="ns-modal" id="lesson-panel-demo" aria-label="Lessons" style="max-inline-size:22rem;inline-size:90%;padding:0">
  <header class="ns-curriculum__head" style="border-block-start:0">
    <span class="ns-curriculum__index">02</span>
    <h3 class="ns-curriculum__title">SOQL &amp; data</h3>
    <form method="dialog" style="margin-inline-start:auto"><button class="ns-btn ns-btn--quiet ns-btn--sm ns-btn--icon" aria-label="Close"><i class="ph ph-x" aria-hidden="true"></i></button></form>
  </header>
  <a class="ns-lesson" href="#" data-state="done"><span class="ns-lesson__index" aria-hidden="true"><i class="ph ph-check-circle"></i></span><span class="ns-lesson__title">SELECT and WHERE</span><span class="ns-lesson__time">14:02</span></a>
  <a class="ns-lesson" href="#" aria-current="true"><span class="ns-lesson__index" aria-hidden="true">07</span><span class="ns-lesson__title">SOQL joins: relationships</span><span class="ns-lesson__time">21:15</span></a>
  <a class="ns-lesson" href="#"><span class="ns-lesson__index" aria-hidden="true">08</span><span class="ns-lesson__title">Aggregate queries</span><span class="ns-lesson__time">18:40</span></a>
</dialog>

Centred modal

The desktop shape, and the one that was missing: the lesson list is a thing you are CHOOSING from, so it gets the middle of the screen and a scrim rather than sliding in from an edge. Below 40rem the same dialog becomes a bottom sheet with a grab handle, because a centred box on a phone is a centred box with a keyboard-sized margin round it.

markup

<button class="ns-btn ns-btn--outline ns-btn--sm" data-open-lessonmodal><i class="ph ph-list" aria-hidden="true"></i> Open the lesson list</button>
<dialog class="ns-lessonmodal" id="lessonmodal-demo">
  <div class="ns-lessonmodal__head">
    <span class="ns-lessonmodal__title">Apex fundamentals</span>
    <span class="ns-lessonmodal__count">6 / 12 done</span>
    <form method="dialog"><button class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" aria-label="Close"><i class="ph ph-x" aria-hidden="true"></i></button></form>
  </div>
  <div class="ns-lessonmodal__list">
    <a class="ns-lesson" href="#0" data-state="done">
      <span class="ns-lesson__index" aria-hidden="true"><i class="ph ph-check-circle"></i></span>
      <span class="ns-lesson__title">SELECT and WHERE</span>
      <span class="ns-ltype ns-ltype--icon ns-ltype--video ns-tooltip-host" tabindex="0"><i class="ph ph-video" aria-hidden="true"></i><span class="ns-tooltip">Video</span></span>
      <span class="ns-lesson__time">14:02</span></a>
    <a class="ns-lesson" href="#0" aria-current="true">
      <span class="ns-lesson__index">07</span>
      <span class="ns-lesson__title">SOQL joins: relationships</span>
      <span class="ns-ltype ns-ltype--icon ns-ltype--video ns-tooltip-host" tabindex="0"><i class="ph ph-video" aria-hidden="true"></i><span class="ns-tooltip">Video</span></span>
      <span class="ns-lesson__time">21:15</span></a>
    <a class="ns-lesson" href="#0">
      <span class="ns-lesson__index">08</span>
      <span class="ns-lesson__title">Aggregate queries</span>
      <span class="ns-ltype ns-ltype--icon ns-ltype--article ns-tooltip-host" tabindex="0"><i class="ph ph-article" aria-hidden="true"></i><span class="ns-tooltip">Article</span></span>
      <span class="ns-lesson__time">18:40</span></a>
    <a class="ns-lesson" href="#0" data-access="members">
      <span class="ns-lesson__index">09</span>
      <span class="ns-lesson__title">Bulk-safe triggers</span>
      <span class="ns-ltype ns-ltype--icon ns-ltype--lab ns-tooltip-host" tabindex="0"><i class="ph ph-flask" aria-hidden="true"></i><span class="ns-tooltip">Lab</span></span>
      <span class="ns-lesson__time"><i class="ph ph-lock-simple" aria-hidden="true"></i></span></a>
  </div>
  <div class="ns-lessonmodal__foot">
    <progress class="ns-progress" value="6" max="12" aria-label="6 of 12 lessons complete"></progress>
    <span class="ns-lessonmodal__count">50%</span>
  </div>
</dialog>

Accessibility contract

The bar's button names its job: "Lessons — 6 of 12 complete"
The drawer is a dialog: focus moves in, Esc closes, focus returns to the bar