public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: add header level pill on desktop, use native details/summary for sidebar

Browse Source 
- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation
This commit is contained in:
Michael Czechowski
2026-01-14 17:51:34 +01:00
parent 954f82b27c
commit 72362de88b
5 changed files with 106 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.js
View File

@@ -48,6 +48,7 @@ const elements = {
prevBtn: document.getElementById("prev-btn"),
nextBtn: document.getElementById("next-btn"),
levelIndicator: document.getElementById("level-indicator"),
headerLevelPill: document.getElementById("header-level-pill"),
// Sidebar
sidebarDrawer: document.getElementById("sidebar-drawer"),
@@ -478,6 +479,7 @@ function loadCurrentLesson() {
// Update level indicator
renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
renderLevelIndicator(elements.headerLevelPill, engineState.lessonIndex + 1, engineState.totalLessons);
// Update active lesson in sidebar
updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);