Foundations
Workspace, public shell, and responsive composition
The creator rail and the learner’s public header solve different navigation needs.
On this page
Layout contract
| Surface | Desktop | Responsive behavior |
|---|---|---|
| Workspace | Fixed 272px rail and sticky top bar; content has a matching margin | Rail disappears at 900px; the mobile menu becomes available. |
| Section settings | Source section navigation and content panel | Below 768px, use the attached section selector. |
| Builder | 260px curriculum + flexible active lesson; 660px minimum workspace height | 210px rail below 1201px; stacked below 1001px; current-lesson selector below 768px. |
| Lesson player | Flexible media/content + 330px curriculum | Below 1001px the curriculum moves below and becomes a disclosure. |
| Course introduction | Two equal columns with a 56px gap | Below 768px media moves above text. |
| Course collection | Auto-fill columns with 280px minimum cards | Cards fit the available width; search toolbar wraps below 601px. |
Shell boundary
usesWorkspaceNavigation excludes authentication and /classes routes even for signed-in people. A course or lesson therefore keeps the public shell; it does not inherit the full creator sidebar. ClientLayout and MainNav use the same predicate.
Feature framing
Documentation images select complete controls and meaningful portions of these layouts. They include breathing room and avoid empty grid columns or unused workspace. A taller viewport used to show a complete selected form is recorded separately; none of these specimens is a stretched full-page bitmap.
Source references
| File | Responsibility |
|---|---|
| src/lib/navigation-shell.ts | Shared shell decision |
| src/components/ClientLayout.tsx | Provider and workspace composition |
| src/components/SidebarLayout.tsx | Settings wrapper |
| src/app/globals.css | Responsive breakpoints |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0