Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged

Conversation

guidemetothemoon
Copy link
Contributor

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:


Additional Information (Optional)

  • Here goes any Additional Information you would like to add.

Checklist

Yes, I included all necessary artefacts, including:

  • Tests
  • Documentation
  • Implementation (Code and Ressources)
  • Example

Testing Checklist

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

  • Desktop Light Mode (Default)
  • Desktop Dark Mode
  • Desktop Light RTL Mode
  • Desktop Dark RTL Mode
  • Mobile Light Mode
  • Mobile Dark Mode
  • Mobile Light RTL Mode
  • Mobile Dark RTL Mode

Notify the following users

  • List users with @ to send Notifications
  • @lxndrblz

@netlify
Copy link

netlify bot commented May 2, 2022

Deploy Preview for anatole-demo ready!

Name Link
🔨 Latest commit f646f16
🔍 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...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@guidemetothemoon guidemetothemoon marked this pull request as ready for review May 2, 2022 20:39
@sonarcloud
Copy link

sonarcloud bot commented May 13, 2022

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@lxndrblz lxndrblz merged commit 1959fa6 into lxndrblz:master May 13, 2022
@lxndrblz lxndrblz added the bug Something isn't working label May 13, 2022
@lxndrblz lxndrblz added this to In progress in 🛣 Roadmap via automation May 13, 2022
@lxndrblz lxndrblz moved this from In progress to Done in 🛣 Roadmap May 13, 2022
@lxndrblz lxndrblz linked an issue May 13, 2022 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
🛣 Roadmap
  
Done
Development

Successfully merging this pull request may close these issues.

Navigating dropdown menu displaying error
2 participants