Create new base top bar component with mobile responsive breakpoints

Overview: The new top bar component should replace the current duplicated title, and there should be no in-page resource title. The top bar is not sticky and has new mobile responsive breakpoints.

Done when:

• Top bar replaces current layout and correctly renders title metadata
• Top bar correctly displays the correct layout of icons (placeholder icons okay if this a bottleneck, but please add a code comment TODO that can be checked for later and note in the PR) and menu options based on new breakpoints
• Top bar renders new tooltips with strings on hover for all icons and menu options

Beyond scope of this ticket:

• Menu interactions working
• Top bar fully implemented in all places where it is used
• Status/progress indicators

Figma references:

[nucleogenesis]

@MisRob @marcellamaki

Top bar fully implemented in all places where it is used

This is kind of a built in if you update the existing component I think. It doesn’t seem like we’d need a separate version of the component to handle the updates.

Just want to note that we currently use ImmersiveToolbar to handle the top bar when viewing a resource.

---

I think that the context menu shouldn’t be implemented at all for acceptance of this since none of the functionality there in can be hooked up. In this case a follow-up issue could be created and the work here could be simplified a little bit (who knows the requirements for that form might change so why make it a requirement if it’s not actually fully designed and planned?).

I’ll get #8095 for the bookmarks done today so you can have that available.

---

@khangmach what does “View Lesson Plan” do? When does it show - only when the user entered the resource from a lesson or if the resource is in any lesson? What if the resource is in multiple lessons?

[MisRob]

@marcellamaki:

It’s fine to proceed as is, and focus mostly on the UI aspects of the feature as originally described in the ticket

I’m continuing my work on this