[Menubar] Base implementation of refactored NavBar

[tespin]

Progresses #3250

Base refactor of the NavBar component. The current component is semantically closer to a menubar than navigation element, so these changes are made with that pattern in mind. Keyboard and pointer behaviors to follow along with tests.

Changes:

• Renamed NavBar and related components into Menubar
• Split Menubar into Trigger, List and Menu components
• Moved LanguageMenu into the left container and separated UserMenu from the Menubar

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[raclim]

Thanks so much for your work on this here and sorry that it took a while to look over this!

Reading through the article you provided was really helpful, and I think a lot of the proposed changes here make sense! I added in a few notes and questions to specific files, but overall feel that this looks pretty good so far!

I think the only noticeable issue that I ran into is that the UserMenu dropdown on the right-hand side is not appearing for me when I toggle it. I was also wondering if you planned to apply a similar structure to the UserMenu as well?

I was also interested in the design choice to move the LanguageMenu to the left! (I'll add a screenshot here just in case for other folks who might be viewing this.) Could you provide a bit more context behind this, since I don't think I saw it mentioned in the original issue!

I feel like I've put quite a bit of questions here so this is the last 😂 I was wondering did you plan for this PR to be merged first before the other one you submitted earlier, that handles adding keyboard/arrow-key navigation?

Thanks so much again for your work on this PR! I really appreciate how intentionally and thoroughly your process has been laid out!

[tespin]

Thanks so much for your work on this here and sorry that it took a while to look over this!

no worries at all, appreciate you giving this some time!

I think the only noticeable issue that I ran into is that the UserMenu dropdown on the right-hand side is not appearing for me when I toggle it. I was also wondering if you planned to apply a similar structure to the UserMenu as well?

oops did not catch this! i guess it might have to do with moving the dropdown outside of the Menubar; i think this separates it from the contexts / handlers that manage the opening and closing of the other dropdowns.

i made this change because the options within a Menubar tend to perform some kind of action specific to the app, whereas the UserMenu feels semantically responsible for other concerns, like navigating away from the editor to other pages. however, i have seen some menubars that have links within their submenus, so it's probably fine to keep it within the menubar for now ...

I was also interested in the design choice to move the LanguageMenu to the left! (I'll add a screenshot here just in case for other folks who might be viewing this.) Could you provide a bit more context behind this, since I don't think I saw it mentioned in the original issue!

yes of course, thanks for pointing this out! i made this change for similar reasons as moving the UserMenu, in that all of the options within the Menubar are meant to trigger changes in the app. since the LanguageMenu updated the content of the page I thought it made sense to add it to the left side with the other options. it may also work as an option within Settings if that felt more appropriate ... definitely up for discussion though.

I feel like I've put quite a bit of questions here so this is the last 😂 I was wondering did you plan for this PR to be merged first before the other one you submitted earlier, that handles adding keyboard/arrow-key navigation?

yes to this! i found that in the other PR, I was making these same changes anyway so it felt appropriate to open a separate PR that focused on refactoring the code. when this PR is finished, i think it makes sense to merge first. successive PRs will implement keyboard / cursor behavior and tests.

that being said i might just close that initial one and open a new PR for keyboard / mouse behaviors, because there may be duplicate commits and i'm not sure how to cleanly maintain the branch given the changes in this one. if that feels unnecessary let me know, just afraid of a messy commit history / creating more work for you and other maintainers!

Thanks so much again for your work on this PR! I really appreciate how intentionally and thoroughly your process has been laid out!

thanks to you as well! all of this feedback is very thoughtful and clarifying

[raclim]

Thanks for making a few additional updates! The foundation was on break for the past few weeks, but I'll be more consistent with responses moving forward!

i made this change because the options within a Menubar tend to perform some kind of action specific to the app, whereas the UserMenu feels semantically responsible for other concerns, like navigating away from the editor to other pages. however, i have seen some menubars that have links within their submenus, so it's probably fine to keep it within the menubar for now ...

Ohhh I see! I do agree that it would make sense to separate the dropdown out, but I think currently there are a few items within the menubar that do either navigate away from the editor or to other pages (such as the Examples or Reference), which I feel might make this trickier or will need some larger restructuring of the menu layout. Maybe this could be further discussed and handled in a future PR?

yes of course, thanks for pointing this out! i made this change for similar reasons as moving the UserMenu, in that all of the options within the Menubar are meant to trigger changes in the app. since the LanguageMenu updated the content of the page I thought it made sense to add it to the left side with the other options. it may also work as an option within Settings if that felt more appropriate ... definitely up for discussion though.

I'm growing fonder of this change the more I interact with it! I might ask around to get some more input since it's a somewhat larger visual change, but I'm personally down to try it out and change it back if needed down the line.

that being said i might just close that initial one and open a new PR for keyboard / mouse behaviors, because there may be duplicate commits and i'm not sure how to cleanly maintain the branch given the changes in this one. if that feels unnecessary let me know, just afraid of a messy commit history / creating more work for you and other maintainers!

I'm personally fine with either approach! Though I do really appreciate how neat your commit messages are 😂 I'm thinking I might need to adopt something similar to mine as well.

[tespin]

Thanks for making a few additional updates! The foundation was on break for the past few weeks, but I'll be more consistent with responses moving forward!

no worries, i'm glad everyone was able to take a break. i know it's taking me a while to work on this too, so thanks for being patient as well!

Ohhh I see! I do agree that it would make sense to separate the dropdown out, but I think currently there are a few items within the menubar that do either navigate away from the editor or to other pages (such as the Examples or Reference), which I feel might make this trickier or will need some larger restructuring of the menu layout. Maybe this could be further discussed and handled in a future PR?

i agree, definitely feels trickier. i rolled back the change and will see about opening a separate PR about this down the line.

I'm growing fonder of this change the more I interact with it! I might ask around to get some more input since it's a somewhat larger visual change, but I'm personally down to try it out and change it back if needed down the line.

awesome, i kept its position for this round of updates! also, above we talked about adding aria-live to the component but i realize it's already present with the toast messages that show up. my suggestion here would be to just add the selected language to the translated string that gets used in the toast message, but this can be in a future PR.

a more immediate change was enabling listbox aria roles for the LanguageMenu. i was reading up on listboxes vs menus and decided that, though we could probably use either, listboxes are probably more semantically correct for this particular use. i ended up enhancing the Menubar components to support different aria roles depending on their current uses as either 'menu' or 'listbox'. if the use cases evolve, i'll look these changes over again and try to implement in a more flexible way.

I'm personally fine with either approach! Though I do really appreciate how neat your commit messages are 😂 I'm thinking I might need to adopt something similar to mine as well.

aha thank you! i'm definitely still learning how to write helpful commits so that means a lot. taking a page out Conventional Commits. once this PR gets merged, i'll open a new one for the behavioral changes and close the old PR.

after these changes i think the pr is in a good place, base aria roles have been added and the semantic changes i wanted to make feel more aligned with Menubar patterns. i think it sets things up well for the upcoming keyboard and mouse behaviors. let me know how things feel!

thanks and happy new year!

[raclim]

a more immediate change was enabling listbox aria roles for the LanguageMenu. i was reading up on listboxes vs menus and decided that, though we could probably use either, listboxes are probably more semantically correct for this particular use. i ended up enhancing the Menubar components to support different aria roles depending on their current uses as either 'menu' or 'listbox'. if the use cases evolve, i'll look these changes over again and try to implement in a more flexible way.

Thanks for implementing this! After doing some reading as well on my end, this makes sense to me!

after these changes i think the pr is in a good place, base aria roles have been added and the semantic changes i wanted to make feel more aligned with Menubar patterns. i think it sets things up well for the upcoming keyboard and mouse behaviors. let me know how things feel!

Awesome!!! I'm also feeling good about all the changes, so I'm going to merge this in! The next release is set for early next week, so feel free to make any additional changes if needed before then. Thanks so much again for your work on this and I really appreciate the immense thoughtfulness behind it!