Sidebar course progress widget

[lkraav]

Analysis

Structure: (minidegree > track[foldable] >)? course[foldable] (> module)? > lesson

Live examples

• minidegree: https://conversionxl.com/institute/certificate/cxl-conversion-optimization/
• modules: https://conversionxl.com/institute/course/personalizing-for-conversion/
• no-modules: https://conversionxl.com/institute/course/creating-a-personalization-project-from-scratch/

Notes

Modules -> start with solving via mini-headings? (non-collapsible)

Track containers need to hold "track time" element, like Total Time: ~40 hrs (edited)

Iteration v1

/certificate/ url displays long minidegree sidebar widget

/course/, /lesson/ display shorter sidebar widget

[lkraav]

Sidebar + widget component markup proposal

<cxl-institute-layout>
  ...
  <div part="sidebar">
    <cxl-sidebar-widget>
      <h3><slot name="title"></slot></h3>
      <slot></slot>
    </cxl-sidebar-widget>
    <cxl-sidebar-widget>
      ...
    </cxl-sidebar-widget>
    ...
  </div>
</cxl-institute-layout>

I'm not 100% <vaadin-vertical-layout> is necessary?

@chanar