search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.05k stars 586 forks source link

Replace close button with × #447

Closed multiwebinc closed 3 years ago

multiwebinc commented 3 years ago

Wouldn't it make more sense to do something like:

<button aria-label="Close Menu">&times;</button>

This way it could easily be styled and even used as the button instead of having a 0 font-size button?

Also, as it is now, when the menu content is longer than the screen height, the button is way too close to the scrollbar:

image

Let me know if you're interested in a PR

negomi commented 3 years ago

Hi @multiwebinc,

Completely agree, there are many approaches that would make more sense than what is there currently (though using &times; could be too font-dependent to work as a zero-config default).

That said, I'd be wary of changing this now because it'd be a breaking change, but it seems a bit small for a major version bump.

Luckily there are ways to get around the issues you've identified:

  1. Adjust the top/right properties of the bm-cross-button element so it sits further away from any visible scrollbar
  2. Replace the icon, or don't render the default button at all, and use your own custom one instead: https://github.com/negomi/react-burger-menu#custom-icons

Hopefully one of these works for your use case.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.