search

okkur / syna

Highly customizable open source theme for Hugo based static websites
https://syna.okkur.org/demo/
Apache License 2.0
250 stars 133 forks source link

Dropdown Menus- identifiers not creating pages #825

Open JoshuaKissel opened 3 years ago

JoshuaKissel commented 3 years ago

Is this a BUG REPORT or FEATURE REQUEST?: bug

What happened: I want to add dropdown menus to the site using the example given here. When the dropdowns were added the identifier dropdown did not link to the page. Instead, clicking the identifier dropdown caused the current page to move to it's top (such as examplepage.com/# would do). This happened if I added a url or if the url was left blank. What you expected to happen: I expected the identifier dropdown to link to that page. How to reproduce it (as minimally and precisely as possible): issue

Anything else we need to know?: Do the dropdown menu pages have to be in a list instead of a single page? Environment: Windows 10

stp-ip commented 3 years ago

Thanks for reporting. Yes this seems to be not as one would expect. It seems like it was created in the idea to work like it currently does so. I agree, that it probably should be as you thought. Paging @mpourismaiel to get some insights into the why a click on the dropdown doesn't lead to the url, but it needs a separate dropdown item basically duplicating the menu item such as is done within the demo:

[[menu.main]]
  url = "/dev"
  name = "Dev Section"
  weight = 35
  identifier = "dev"

[[menu.main]]
  url = "/dev"
  name = "Dev Section"
  weight = 10
  parent = "dev"
stp-ip commented 3 years ago

My assumption is the reasoning is on mobile we don't have a hover event and therefore a click is needed to open the dropdown. Therefore with child menus we need an additional item instead of the main menu item being linkable as the click is used for open/closing the dropdown.

JoshuaKissel commented 3 years ago

That makes sense- it would be very difficult to hover on mobile...

Any idea why clicking the main menu brings me to the top of the page?

stp-ip commented 3 years ago

This is hard coded in the code as it still represents a link and I assume the decision was to take you to the top of the page. Probably shouldn't change the state of the page at all I guess. Ref to the code snippet setting the href to '#': https://github.com/okkur/syna/blob/master/layouts/partials/fragments/nav.html#L71

JoshuaKissel commented 3 years ago

Hmmm any tips on how to change that so that this doesn't happen? Even on mobile it's taking me back to the top of the page. Tried removing the # in the code snippet which resulted in dropdowns not working.

Any advice would be appreciated!

stp-ip commented 3 years ago

Will check out a few ideas. In the interim maybe @mpourismaiel also has some thoughts.

JoshuaKissel commented 3 years ago

@stp-ip I was able to alleviate the issue by deleting line 71 from https://github.com/okkur/syna/blob/master/layouts/partials/fragments/nav.html#L71. This allows the menu to be opened without the page view reverting to the top of the page.

Follow up question - the only way to exit the drop down menu and stay on the same page is to click the parent. This means that multiple dropdown menus can be open at once (which is fine for mobile, but looks odd on desktop). Is there a way to close a dropdown menu by clicking anywhere on the page that is outside of the menu?

stp-ip commented 3 years ago

Thanks for the follow-up. Didn't have time to dive deeper into the underlying issue.

In terms of clicking somewhere else to close drop-down. That's a good addition, but is currently not possible.

To be able to track that feature you could open an issue so it doesn't get hurried in here.

JoshuaKissel commented 3 years ago

@stp-ip Will do - thanks again for all the help!