shadcn.io is not affiliated with official shadcn/ui
Locked Lessons Sidebar Block for Solid
A school course platform in a fixed-height window: a syllabus of eight lessons in three weeks that unlock in order, with a lock and the due day on locked rows and Mark complete in the top bar opening the next lesson.
Installation
Overview
Teach in the right order with this education LMS sidebar for Solid with Ark UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar with a syllabus of eight lessons in three weeks. A lesson is locked until the one before it is complete: a locked row shows a lock and its due day, stays focusable, and when you press it nothing opens and the status line names the lesson to finish first. Each week's label counts how many of its lessons are complete. The page is the open lesson with a summary and what it covers, and Mark complete in the top bar finishes it, unlocks the next lesson and opens it. There are no bars at all. Folded to icons the rail keeps each lesson's icon with a Tooltip that names the lock, and on a phone it is a sheet. It's built from Sidebar, Badge, Shine Button, Avatar and Guides, with a CSS entrance only. For courses, certifications, training paths and any sequence that has to be done in order.
FAQ
How does a locked lesson behave?
It is a link marked aria-disabled, so it stays in the tab order and a screen reader hears that it is locked and which lesson to finish first. Pressing it does not open it; the status line says, for example, "Two-step equations is locked. Finish Solving one-step equations first." When the rail is folded to icons the tooltip says the same.
What decides which lessons are locked?
Position. A lesson is locked while any lesson before it, across weeks, is incomplete, so there is only ever one open lesson that is not yet complete. Mark complete finishes that one, and the next row loses its lock.
What does the top bar button do?
On the current lesson it reads Mark complete and finishes it. If you are looking at a lesson you have already completed, it reads Go to current lesson and takes you to the one waiting. When all eight are complete it reads Start over and returns the syllabus to how it loaded.
How are the lessons wired?
The lessons are links to # whose handler shows the page instead of navigating. Point them at your routes and mark the current one with isActive and aria-current.
What stays in the page, and how do I connect it?
Everything. The lessons, their weeks, due days and the starting progress are typed in WEEKS, and completion lives only in the block's state. The block sets persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on. To connect it, load the student's completed lessons from your API and send each completion back; the locks, counts and labels are all worked out from that list.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. A locked lesson inside it refuses in the same words, and the sheet stays open so you can read why. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says what changed.