playsite: Review playground header navigation

[juliaogris]

(Issue description updated, first comments relate to previous description)

We want to make navigation between samples on the Evy playground easier.

Full Figma design file

• Exercise modal overview should stay the same, except the "current" example if there is one should be bold.
• Clicking on previous ⬅️ or next buttons ➡️ should automatically load the sample without opening the overview modal.
• Clicking on the example title proper in the header should open the modal overview.
• It should all work the exact same way on mobile.

Relevant pointer in the codebase:

• HTML
• JS
• CSS

[jasonstrachan]

Something like:

• Pulling back the UI to simplify + consistent on desktop and mobile
• easy nav back / forward (what do you think the language should be?)
• clicking on the title brings up the modal with overview
• we show 2/10 so at a glance you can get a sense of where you are in the module

[juliaogris]

@jasonstrachan - this is so good, I love it.

WRT to Module name:
would that be from the real world screenshot

• 🚌 Tour (example group heading) or
• String functions (specific example; I assume you meant this)

Also, wrt modal navigation, I'm not sure, but it might be of interest to actually "easily" get a sense of all examples, or at least "example groups" available.

So from the evy.dev screenshot above the "example groups" would be:

• 🚌 Tour
• 🎨 Drawing
• 🤹‍♀️ Animation
• 🤼 Interaction
• 🎲 Games

Or do you think a Next/Previous is enough to navigate through them is sufficient?

[jasonstrachan]

• I still like the modal to get an overview if you need it, perhaps to make it more obvious we can underline the title as we have it now
• also later down the track we can use this modal as a way for the user to explore all content laterally (up a level / drill down as you start to add more modules)

[juliaogris]

Oh sorry, I'm not sure I'm following.
You are proposing:

And I'm looking for a way to fit:

That is:

• 🚌 Tour
  • Welcome
  • Hello, world!
  • Read input
  • String Functions
  • Math Functions
  • Events
• 🎨 Drawing
  • Circle and Rectangle
  • Lines
  • Polygon and Polyline
  • Stroke and Fill
  • Line Styles
  • Text
• 🤹‍♀️ Animation
  • Moving Red Dot
  • Bounce
  • Juggle
  • Splash of Trig
  • String Art
• 🤼 Interaction
  • Watermelon Ellipse
  • Draw
  • Coordinates
• 🎲 Games
  • Guess my Number
  • Towers of Hanoi
  • Tic Tac Toe

(mayb add 50% more to that content over time but that should be it)

Whilst you are exploring a 🚌 Tour example it would take 6 clicks to get to a game example in 🎲 Games if you get from

🚌 Tour ➡
🎨 Drawing ➡
🤹‍♀️ Animation ➡
🤼 Interaction ➡
🎲 Games

only via the bottom button click, is that right?

With bottom button I mean the button from the screenshot above with label: Next: Variable Declaration

[juliaogris]

I commented on the figma design, way easier there. Sorry still finding my feet with all of this.

[juliaogris]

This is done in:
136f64db72913354ce662f80110600fadde5aed8