search

CaptainCodeman / svelte-headlessui

HeadlessUI components for Svelte
https://captaincodeman.github.io/svelte-headlessui/
MIT License
539 stars 26 forks source link

Functionality of Popover.Group #22

Open ebuckthal opened 1 year ago

ebuckthal commented 1 year ago

Thanks for all the work you've put into this library! Excited to use it and see it grow. 😃

I want to use multiple Popovers to build a more complex site navigation header. Some pseudocode:

<script>
   const popover1 = createPopover({});
   const popover2 = createPopover({});
</script>

<button use:popover1.button ... />
<div use:popover1.panel ... />

<button use:popover2.button ... />
<div use:popover2.panel ... />

However, if I first click popover1.button, then click popover2.button (while popover1.panel is still "expanded") it will only close popover1.panel. I must click popover2.button a second time to open popover2.panel.

In headlessui, this action is supported with grouping related popovers (<Popover.Group />).

Is there a way to achieve that functionality?

CaptainCodeman commented 1 year ago

I'll have to have a play around and see what the best way to support that - I'm picturing something a bit like Stripe's top-level nav, is that the right interpretation?

ebuckthal commented 1 year ago

Yes, similar to Stripe's navigation. It would be an added bonus if it could support on-hover as well as on-click!