Closed guidemetothemoon closed 2 years ago
Name | Link |
---|---|
Latest commit | a21f58c8b2421d0985c242637a9b9039d6854155 |
Latest deploy log | https://app.netlify.com/sites/anatole-demo/deploys/6263b2f1ab345d0009c1eb35 |
Deploy Preview | https://deploy-preview-344--anatole-demo.netlify.app |
Preview on mobile | Toggle 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 Thanks for the PR. I will review it in the upcoming days.
Kudos, SonarCloud Quality Gate passed!
0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells
No Coverage information
0.0% Duplication
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. In case you know from the top of your head an easy way to search through all the children when doing active URL validation, please let me know :)
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