Implement sidebar changes based on previous discussions

[austintackaberry]

There were previous discussions, https://github.com/austintackaberry/ydkjs-exercises/issues/85 and https://github.com/austintackaberry/ydkjs-exercises/issues/76, with ideas regarding Question.js and the sidebar. This issue will encapsulate the implementation of those changes. The rough mockup for the sidebar is here:

The stories are the following:

• [x] The progress section should have a progress bar that represents correct answers with green, incorrect answers with red, and unanswered questions with background color
• [x] The progress section should display the number of correct answers out of total answered questions, current score as a percentage, and the number of questions left to be answered
• [x] Each book, chapter, and question should be links
• [x] When the sidebar loads for the first time, only the books should be visible, and there should be a clickable right arrow to the left of each book
• [x] On click, the arrow next to the book/chapter switches from right to down, and the chapters/questions for that book are shown
• [ ] Each question should show one of three icons to the left depending on whether it is correct, incorrect, or unanswered

[rreubenreyes]

I'd like to tackle the first two list items! I expect to be able to open a PR by Saturday 6/30, as I'm a little occupied at the moment. 😬

[rreubenreyes]

Taking a shot at the rest of the list items!

[designviacode]

I'd like to help with the last item!

[austintackaberry]

Thanks @designviacode! @radotreyes do you have svgs for those?

[rreubenreyes]

I got those straight from Apple Pages, so unfortunately not. I would take a look at FlatIcon?