Add learning activity bar component

[MisRob]

Summary

Add a new, mobile responsive, learning activity bar component.

Note that connecting the bar to the app is out of the scope of this ticket and that if you follow the testing instructions below it will appear sticky even when it's not supposed to be. It's not related to the new component itself, but rather to CoreBase and will need to be resolved when we start connecting new bars to pages. Also, since this PR only adds a component to our library, I didn't update any Gherkin stories at this point.

Screenshots

Only the most important states are documented here. Please see Figma designs linked in references to compare to the full specification.

Bar/menu items distribution

320-480	480-600	600 and higher

Bookmarks

	Bookmarked resource	Not bookmarked resource
Bar
Menu

Context

	Lesson context	Non-lesson context
Bar
Menu

When a resource can't be manually marked as complete

Bar	Menu

References

• Closes Create new base top bar component with mobile responsive breakpoints  #8106
• Designs in Figma

Reviewer guidance

I haven't found a better way to test the new bar than hacking CoreBase locally as demonstrated here and then navigating to a resource page, for example, "Learn" -> "Channels" -> Select a channel and open a resource from a topic of the channel.

• Make sure to run yarn install --check-files to pull the latest KDS version containing learning activities icons.
• Check for different resolutions
• Check for RTL language (you can replace /en/ by /ar/ in the URL)
• Check accessibility - navigation in the bar, opening the menu, navigation in the menu

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[MisRob]

This magical number seems to work though I am not sure how exactly. Let me know if you see some possible issues with it or have more insight into if this is an appropriate value.

[MisRob]

I think it may be a good idea to add ariaLabel and tooltip for the back navigation button but am not sure yet and don't know what the string would look like. See https://learningequality.slack.com/archives/C023DNC5GCX/p1623850266060400. EDIT: Done

[MisRob]

Also, it may need to be wrapped in router-link in the future depending on how we'll use the component. I took the simplest way for now thinking that we can update it together with a new prop for the link destination, instead of emitting navigateBack event if needed. The same applies to some other buttons in the bar that may have some connection to the router.

[marcellamaki]

This looks great @MisRob! Manual QA looks good to me, and the code is so easy to read. I love the comments, too. Nice work ✨ 🙂