Progress indicator

[saumyasinghal747]

A tracker for the user's progress across courses. Closes #17.

Current problems are:

• the styles for the buttons get purged on build, so buttons are ugly
  • Use vue switch statements to render the classes instead of concatenation or whatever
• Progress indicators get cached and need to be refetched on each page load. (the localstorage part)

Roadmap before this is ready for review

• Button on the course to continue
  • takes user to an actionable page
• Add button to the top of the page as well
• Add a summary page for every course so that users can tell how much of it they've done
• Completely change the course home page, perhaps a roadmap style. Possibly eliminate the need for chapter home pages.

[github-actions]

Visit the preview URL for this PR (updated for commit d25c213):

https://ymath-beta--pr43-progress-indicator-fhkmu8db.web.app

_{(expires Sun, 12 Dec 2021 23:42:05 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[saumyasinghal747]

@sophiazhu16
In the most recent commit, I altered the sidebar to allow for easier navigation. I'm using https://usaco.guide/silver/prefix-sums for inspiration. In the next commit, I plan to add the progress indicators to each lesson. Hopefully, this new format removes the need to write chapter home pages, and courses would suffice with just a short description. What do you think?

Known problems with this:

• The big Calculus header is not correctly spaced
• The prev and next buttons take up too much screen space

[syz16]

Nice
Edit: just realized I reviewed it twice. Oops

[saumyasinghal747]

@sophiazhu16 It is probably not ideal to approve a pull request when it is incomplete ;) As Product Manager, is there anything you would like to add to the checklist for this project? (first comment)

[syz16]

Is there a way to make the progress label change automatically? Or maybe just have some buttons instead of the dropdown menu - when I'm at the bottom of the page, marking the lesson as finished should take 1 click at most, preferably 0.

[saumyasinghal747]

I think setting standards for auto-detecting completion would be hard, maybe if they scroll all the way down?
Otherwise I can make a split-button, kind of like when you create a PR and you get to choose between Ready and Draft - Ready is preselected and only requires a click.

[saumyasinghal747]

I have done most of what this PR is for, I will now work on making those progress selections a bit smoother