MWPW-183845: Refactor top and left navigation

[Axelcureno]

Summary

Refactors top and left navigation with new folder and locale pickers.

Changes

• Top Nav: Added folder picker and locale picker components with dropdown menus
• Side Nav: Narrowed from 240px to 75px with icon-based design
• Side Nav Actions: Added contextual buttons (Save, Create Variation, Duplicate, Publish) for editor mode
• Locale Support: Added en_CA (Canada English) and renamed fr_CA (Canada French)
• Styling: Moved inline styles to style.css, updated grid layout and main container

Files Changed

• New: mas-nav-locale-picker.js, mas-nav-folder-picker.js, mas-side-nav-item.js
• Modified: mas-top-nav.js, mas-side-nav.js, store.js, constants.js, style.css, swc.js, studio.html

Testing

• ✅ Folder picker displays all 9 folders
• ✅ Locale picker displays all locales including new en_CA
• ✅ Side nav renders with 75px width
• ✅ Navigation works without editor/variations features
• ✅ No console errors

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-sync branch

Commits

• 1ea08f7 ✅ (latest)
• 81ef397 ✅
• 662f07f ✅
• 7bd5414 ✅
• 3cea130 ✅
• 132f49d ✅
• 733aab3 ✅
• 6e0f890 ✅

[npeltier]

lgtm having the country filter twice is weird but i guess it's temporary

[afmicka]

@Axelcureno @3ch023 @npeltier

1. on smaller desktop screens, sidenav does not fit and it has no scroll, therefore the user can not perform the actions that at towards the bottom of the sidenav like deleting the fragment. I have that issue on my MacBook Air 13" and also Nala has the same issue as it loads pages towards the smaller screen sizes and the delete button is not accessible.

Do we know what is the smallest screen resolution we support? I guess MacBook should have to make the cut.. :)

2. do we want these options NOT to be capitalized? "Ccd" looks awkward to me :)

[afmicka]

@Axelcureno I have pushed updates for Nala (renamed folder to surface picker) and added 2 tests for locale and surface change. Anything else we can add separately.

[honstar]

Apart from the small folder casing issue, looks very good 👍

[dariiarudenko2023-ops]

Hi @Axelcureno @3ch023 @npeltier
When testing yesterday, @afmicka and I noticed that there was a difference in which cards are being shown on the ACOM home page between this PR and #432. And today I noticed a change in capitalization in all options in the top nav only with this PR's testing link (see the screenshots below). Any idea why this may be? Have some changes already been pushed?

[Axelcureno]

Hi @Axelcureno @3ch023 @npeltier When testing yesterday, @afmicka and I noticed that there was a difference in which cards are being shown on the ACOM home page between this PR and #432. And today I noticed a change in capitalization in all options in the top nav only with this PR's testing link (see the screenshots below). Any idea why this may be? Have some changes already been pushed?

@dariiarudenko2023-ops yes, folders in uppercase is how it is in Figma. Regarding the content, this might be due to AEM. We should compare against what's in prod.

[afmicka]

@Axelcureno locales should not be all capitalized. Locales should be in the form of fr_FR, not FR_FR