fix: incorrect display of submenu items when multiple menu dropdowns are implemented

guidemetothemoon commented 2 years ago

Description

Describe the issue fixed here

When having two dropdown menus in the navigating bar, clicking on the second menu displays the first dropdown menu. The reason for that was that dropdown was connected to an id which initially was implemented with a static value - "menuoptionpicker". This results in an issue when you implement more than 1 menu dropdown - since id is static, all dropdowns will point to the first submenu list with "menuoptionpicker" id defined.

I've resolved this by implementing a pseudorandom uid for every menu dropdown. After multiple investigations on how generation of unique IDs can be implemented in Hugo, I've landed on current implementation. Since it's a functionality which will not require hundreds or thousands of unique IDs the range defined in current implementation should suffice.

Issue Number:

Here Goes the Issue Number with a '#'
352

Additional Information (Optional)

Here goes any Additional Information you would like to add.

Checklist

Yes, I included all necessary artefacts, including:

[ ] Tests
[ ] Documentation
[x] Implementation (Code and Ressources)
[ ] Example

Testing Checklist

Yes, I ensured that all of the following scenarios were tested:

[x] Desktop Light Mode (Default)
[x] Desktop Dark Mode
[x] Desktop Light RTL Mode
[x] Desktop Dark RTL Mode
[x] Mobile Light Mode
[x] Mobile Dark Mode
[x] Mobile Light RTL Mode
[x] Mobile Dark RTL Mode

Notify the following users

List users with @ to send Notifications
@lxndrblz

netlify[bot] commented 2 years ago

Deploy Preview for anatole-demo ready!

Name	Link
Latest commit	f646f1686481d1ef19fdfdbed1025cbfb93dd80d
Latest deploy log	https://app.netlify.com/sites/anatole-demo/deploys/627e9db95a6295000864b492
Deploy Preview	https://deploy-preview-354--anatole-demo.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.