search

lxndrblz / anatole

Anatole is a minimalistic two-column theme for Hugo.
https://themes.gohugo.io/themes/anatole/
MIT License
651 stars 363 forks source link

feat: Added support for navigation menu dropdown #344

Closed guidemetothemoon closed 2 years ago

guidemetothemoon commented 2 years ago

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:

image

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

netlify[bot] commented 2 years ago

Deploy Preview for anatole-demo ready!

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...

QR Code

Use your smartphone camera to open QR code link.

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

lxndrblz commented 2 years ago

@guidemetothemoon Thanks for the PR. I will review it in the upcoming days.

sonarcloud[bot] commented 2 years ago

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

guidemetothemoon commented 2 years ago

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 :)