AgnosticUI / agnosticui

AgnosticUI is a set of UI primitives that start their lives in clean HTML and CSS. These standards compliant components are then copied to our framework implementations in: React, Vue 3, Angular, and Svelte.
https://agnosticui.com
Apache License 2.0
723 stars 47 forks source link

Menu with Links as MenuItems #243

Open will-moore opened 1 year ago

will-moore commented 1 year ago

Hi, I would like to create a menu where each MenuItem is a link (using svelte). Something like Github's options to filter pull requests:

Screenshot 2022-10-18 at 16 06 45

Is there a way I can use my own link component as a MenuItem?

Failing that, I was going to handle the user clicking on a MenuItem and update the URL manually when the user clicks on a MenuItem. But I don't see where to handle that? The MenuItem provides handlers for onOpen={(selectedItem) => console.log('onOpen - selectedItem: ', selectedItem)} and onClose={() => console.log('onClose called...')} but neither of these is fired when the user clicks on the MenuItem. Actually, onClose() is called after that but it isn't passed the `selectedItem.

Cybolic commented 1 year ago

At the risk of just being a bump, I too would like to see an example of how the Menu component is supposed to be used as I can't seem to figure it out either. Apart from the points about the handlers that @will-moore already mentioned, I don't see anything like selectedItem to bind to or any other way to actually reliably use the component (outside of ugly hacks like checking the classes on the menu items on close).

zacharygriffee commented 1 year ago

Was thinking this would be a straight-forward component. But, after a good few hours of messing with it, and contemplating hacks myself, I decided to check on github to find I'm not the only one. I also attempted to inherit the MenuItem component with my own menu component, but issues of the MenuItem, while could be easily forwarded, exported functions "isDisabled" and "focus" get messed up. In my opinion, if you got to jump through hoops to get it working, then why even have it?