Drawer with Popover Implementation

[jsulgrove]

As I have been writing a component based frontend for my website, I have found the current drawer sidebar structure frustrating. Specifically, I don't like the idea of having to wrap the entire page in a sidebar component when really a sidebar should consist of just a sidebar. So I spent some time working on a version that utilizes a popover. At the bare minimum, you need to apply the drawer-side class to your sidebar element and wire up the popover so you can toggle it open and closed.

Benefits:

• No more checkbox hack. Popover is a no-JS alternative that now has ~91% global usage.
• No more custom overlay. They are built into popovers.
• No more parent class required. If you use drawer-open, the flex layout is now automatically applied to the parent of the element with the drawer-open class.
• Allows closing the sidebar when you click on a link, using invoker commands (no JS).

Cons:

• To support drawer-open layouts, the implementation must explicitly override the popover's top layer behavior to reintegrate the element into the standard document flow.

It's not perfect but I'd love your thoughts
https://play.tailwindcss.com/TVqPeCLCUz

[pdanpdan]

Some tweaks (I hope improvements), still need work: https://play.tailwindcss.com/LcW94gtLBQ

[saadeghi]

Thanks for the example 🙏

There was a conversation about this on Discord. I quote my answer here too:

There are 2 issues with this example.
First issue can be fixed probably, but the second issue is a big challenge:

Issue 1. When drawer is open, the page is still scrollable (it shouldn't scroll) but the sidebar is not scrollable (it should scroll if content overflows). You can see the issue by adding more items to the sidebar.

Issue 2. As far as I know there's no way to "close" a popover with CSS. When a popover is open, it goes to top layer and it's outside of the page layout (cannot be positioned relative to other elements anymore).
When we want a sidebar to be visible on desktop, and we want it to toggle on mobile, we should be able to open/close it based on screen size (for example lg:drawer-open) but it's not possible with a popover.
You can see this issue in the linked example:

1. resize the screen to small
2. open the drawer
3. resize the screen to large
4. the drawer is still on top layer and its out of place. if you click the screen, it closes and it goes to the correct spot.

I hope we can find a way.

[jsulgrove]

Adding a summary of the rest of our Discord conversation for documentation:

Some of the ideas I proposed to get around issue 2:

• Duplicating content so the sidebar does not have to be a popover. Not ideal because the page can get bloated fast and it hurts SEO and performance.
• Using details/summary instead of popover. Not ideal because summary tag must be inside details, and also the sidebar should be able to open from multiple locations.

I don't think there will ever be CSS that can open and close popovers. It sounds like the only alternative is to use a small amount of JavaScript - in my scenario that would be an acceptable solution / tradeoff / progressive enhancement, as resizing the screen while the sidebar is open and JavaScript is disabled is an uncommon situation, and the issue is minor / visual (fixed with a click or tap).

It would be nice to have this as another option and just document the suggested JS to go with it.

[saadeghi]

Thanks for the suggestions @jsulgrove 💚

To be honest, I don't see a benefit here 😅

We already have a native CSS/HTML solution:

• It's accessible and functional.
• can be controlled by CSS, by HTML, by JS.
• It works on SSR, CSR, etc.
• The same code works on all frameworks.
• Doesn't need JS transpile, JS parsing, JS bundling, JS hydration, JS execution, etc.
• Doesn't need an event listener.
• Doesn't need to manipulate the DOM to add/remove class names.

And we introduce a new method that is broken by default and needs a piece of JS (for each framework syntax) to work?
This is not a tradeoff or progressive enhancement.
It's a progressive regression 🥲

As I stated before, I'm positive about using new APIs, we already used popover for daisyUI modal and dropdown, but this is use case (drawer) is out of popover capabilities.

[jsulgrove]

Fair enough. Thank you for outlining your reasoning, I really appreciate it.