feat: Added support for navigation menu dropdown #344
Conversation
✅ Deploy Preview for anatole-demo ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
@guidemetothemoon Thanks for the PR. I will review it in the upcoming days. |
|
Kudos, SonarCloud Quality Gate passed!
|
|
UPDATE: I found how to resolve the issue I'm mentioning below and will shortly publish a PR to fix it! @lxndrblz thank you so much for your review and apologize for the late reply on your suggested changes! I got swamped with work this week and wasn't able to follow it up until this weekend. Suggested change is a bit more tricky though, I think that adding else-clause will not be enough, because the active CSS will not be applied if you choose menu option other than the first one in the dropdown. It looks like when you use "range" it only evaluates if the first option in the link is the one that currently is the active URL but if it's f.ex. option number 2 or 3 that's active, it'll not be evaluated towards if it's active or not. I tried to experiment with .IsMenuCurrent/.HasMenuCurrent but wasn't successful. I'm still new to development in Hugo so I'll use some time this weekend to investigate how you can check if current active URL belongs to any of the children, not only to the first one. I'll then publish a follow-up fix for that. |
Description
Describe the issue fixed here
I've had a need to create a dropdown navigation menu section and I hope that support for this in standard Anatole theme might be useful for others. This is an option you can implement when you need it and I've used the same style as the one that was implemented for language dropdown. In order to ensure naming consistency, I've renamed all "language*" SCSS classes to use a more generic name: "optionswitch*".
Implementation follows standard support for section dropdown implementation in Hugo, i.e. the user can define subsections in "menus.*.toml" file by adding a "parent" property, like I've demonstrated in exampleSite:
`
[[main]]
name = "Accomplishments"
weight = 500
identifier = "accomplishments"
[[main]]
name = "Awards"
weight = 510
identifier = "awards"
url = "/awards/"
parent = "accomplishments"
[[main]]
name = "Certifications"
weight = 520
identifier = "certifications"
url = "/certifications/"
parent = "accomplishments"
`
The dropdown will then look like this:
Here, Accomplishments is a parent menu option which is not a page in itself but Awards and Certifications are it's children which are pages representing different content. By providing weight parameter I can define in what order menu options will be displayed in the dropdown.
I've added an example of the implementation in the exampleSite. Since documentation is in GitHub Wiki and this PR hasn't been merged yet, I haven't added any additional documentation apart from the description in this PR. But please let me know if I need to add that.
Also, I've updated class names for language dropdown in navbar.html accordingly to use the new naming.
Finally I've excluded *.min.css Fontawesome files from prettier formatting because every time it's run, the checksum for the files will change due to added indentation and minified files should stay compressed. Seems like in the latest merged changeset those files got modified by the prettier extension again but those got modified back as part of this PR.
Issue Number:
Additional Information (Optional)
Checklist
Yes, I included all necessary artefacts, including:
Testing Checklist
Yes, I ensured that all of the following scenarios were tested:
Notify the following users
@lxndrblz