feat: add navbar navigation

[roedoejet]

PR Goal?

Add the editor navigation to the main page

Fixes?

Feedback sought?

• Is this what we're looking for?
• ~@deltork can you help with the position of the version element? it's floating in the editor page~
• ~@deltork similarly do you know why the privacy isn't centered anymore?~
• ~There's an issue here now where if you navigate to the editor, you lose your progress in the Studio without warning. I think it would be a fairly significant amount of work to systematically ensure that state is maintained/reloaded in services. It's the right thing to do, but it might not happen this week. - I think addressing the state issue is the best solution. I've begun that work here:~ fixed in : https://github.com/ReadAlongs/Studio-Web/pull/326

Priority?

Tests added?

How to test?

Confidence?

Version change?

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-07-23 21:35 UTC

[joanise]

Various comments:

• privacy not being centered: that warrants its own issue, it's happening in the current main and deploy too
• Editor headings: can we have "Select an offline HTML ReadAlong file." in an h2 and the sentence that follows it as a p?
• below a screen width of 425 pixels (e.g., simulated iPhone SE), the right margin starts to grow, and the main part (editor or studio) shrinks more than it should. Phones are not our main target, I know, but it would be frustrating to try our app on one and have the already narrow app only use 3/4 of the available screen width.
  • By contrast, the currently deployed studio app uses most of the available real estate on small screens
  • The currently deployed editor is a bit wasteful, with much wider margins around the web-component than in the studio app, it would be nice to make it consistent between the two.

As for losing state, it happens in both directions: you also lose your Editor state including all edits you've done if you click on Studio. That's gotta be a deal breaker.

• Saving state could make sense,
• but it would also be fine to just have the current do-you-really-want-to-leave warning with a Cancel button. Is that not straightforward to do?
• Or, could clicking on the other app you're not already in automatically open it in another tab? That could be the least effort way to not loose anything.

[deltork]

I added the fix for the version display to PR for the editor tour

[deltork]

The privacy dialog issue is as far as I can tell is, cause by some code (current don't if it is us or materials doing this) setting the dialog wrapper style to justify-content: flex-start; align-items: center; instead of justify-content: center; align-items: center;