Support Breakpoints in sizes Prop

[AbuSM]

Currently, the sizes prop accepts only a single value (e.g., string or number). It would be useful to allow responsive breakpoints where users can define different sizes based on screen widths.

Motivation & Use Case:

• This would improve responsiveness by allowing different sizes for different screen widths.
• Many UI libraries (e.g., Chakra UI, Tailwind CSS) support responsive props via objects, and adding this would enhance flexibility.
• Right now, users have to manually handle media queries, which isn't efficient.

Proposed Solution:
Modify the sizes prop to support both a number and an object for breakpoints, like this:
<Hamburger sizes={{ xs: 12, sm: 18, md: 24, lg: 28, xl: 32 }} />

• If an object is passed, the component should use breakpoints internally.
• If a string or number is passed, it should behave as it does now.

Alternatives Considered:

• Using CSS media queries manually, but this makes the code more complex.
• Wrapping the component to handle breakpoints externally.

If maintainers approve, I'm happy to contribute to this feature!
Would love feedback on preferred implementation details. 😊