Fixes #2655, Cant find setting button on examples page

[gauravsingh94]

Fixes #2655

Changes:

1. Added a theme section in the translations.json file.
2. Created a menu component for displaying the menu in the nav bar (Nav.jsx file).
3. Added the setTheme function to ide.js where all the functions of the navbar are located.

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

[gauravsingh94]

@lindapaiste

I have implemented a theme settings feature in the navigation bar. I have retained the existing theme settings in the preferences section (feel free to remove them based on your preference). The theme now functions universally. I observed that other elements are ide-related, so relocating the setting to the navigation bar will not affect them adversely.

Please give me your feedback on this.

Final Ouput

Screencast.from.2023-12-04.01-22-35.webm

[raclim]

Thanks for submitting this!

I think overall the code looks fine so far—I might just remove some comments to make sure that it looks a little tidier!

UI-wise, although pulling the 'Theme' out to the overall navigation does make it easier to access, I think ultimately it's a little confusing to have it in both places. I also think it raises the question of why only the 'Theme' setting out of all the user preferences was placed there versus something like 'Text Size' or 'Autocomplete'. I think it would make more sense to bring the Gear Icon for the user preferences to the 'Examples' page to keep it more consistent.

Since we have quite a number of PRs I'm going to close this one for now, but please feel free to revisit this with some updates, or check out the other issues, thanks!