style: include menu on small devices for toolbar

[roedoejet]

PR Goal?

Add a menu button instead of the toolbar. Now that I made this though, maybe what we actually want is a "sidenav" element: https://material.angular.io/components/sidenav/overview

Fixes?

Feedback sought?

Do you like the way it looks? does it display the languages properly (French/Spanish/English)?

Priority?

medium

Tests added?

How to test?

Confidence?

medium-low - maybe we should change this to a sidenav, but I'll leave it here for now so I can continue reviewing the other PRs.

Version change?

[semanticdiff-com]

Review changes with SemanticDiff.

Analyzed 8 of 8 files.

Overall, the semantic diff is 16% smaller than the GitHub diff.

	Filename	Status
✔️	packages/studio-web/project.json	Analyzed
✔️	packages/studio-web/src/i18n/messages.es.json	17.3% smaller
✔️	packages/studio-web/src/i18n/messages.fr.json	16.42% smaller
✔️	packages/studio-web/src/i18n/messages.json	22.86% smaller
✔️	packages/studio-web/src/app/app.component.html	14.62% smaller
✔️	packages/studio-web/src/app/material.module.ts	Analyzed
✔️	packages/studio-web/src/app/shepherd.steps.ts	Analyzed
✔️	packages/studio-web/src/app/editor/editor.component.html	4.35% smaller

[joanise]

Oh, man, that's just so not DRY... :( But I can still live with it if there's no obvious way to make it DRYer.

Minor presentation detail: in English and Spanish we end up the with the buttons side by side like this

but in French we get

which is not nearly as nice.

So I would add <br/> after </button> on lines 17 and 28. I tested, and the result is pleasing, at least to me:

I'm not convinced sidenav is a better choice, but I'm open to discussion.

[deltork]

PR preview is not functional

[github-actions]

PR Preview Action v1.4.8
🚀 Deployed preview to https://ReadAlongs.github.io/Studio-Web/pr-preview/pr-361/
on branch gh-pages at 2024-10-21 21:15 UTC

[joanise]

PR preview is not functional

I just figured it out: we have a hard budget on building the studio-web application, and we've just busted it with this PR. Quite randomly I would say, we've been inching to our budget limit for quite a while now, with 1.98mb and 1.99mb but this PR's 2.01 mb triggering the fatal error.

Fixed now, with a budget of 3mb. Something we ought to try to reduce the size of this, but that's not going to be a priority...

[deltork]

PR preview is not functional

I just figured it out: we have a hard budget on building the studio-web application, and we've just busted it with this PR. Quite randomly I would say, we've been inching to our budget limit for quite a while now, with 1.98mb and 1.99mb but this PR's 2.01 mb triggering the fatal error.

Fixed now, with a budget of 3mb. Something we ought to try to reduce the size of this, but that's not going to be a priority...

Thanks!

[deltork]

Looks good! Thanks for taking this on!

[deltork]

You can add the home icon here. So that the alignment looks good in the mobile view

[joanise]

That's an excellent idea. Done, please re-review.