Use Drawer for responsive page layout

While looking at this, I noticed that on firefox if you open the drawer and reload the page, it stays open. This doesn't happen in chrome.

It's because the hidden checkbox stays checked in FF after reload.

Calling this out because I thought mine was broken.

The drawer is forced open on desktop with lg:drawer-open on the drawer wrapper element.

https://daisyui.com/components/drawer/#responsive

Working proof of concept.

I removed the grid for the sidebar that was there, but intend to put it back. However another option is to use the drawer sizing instead.

There's some work to do to get menus, position, and padding working correctly.

To try this, copy the page--drawer template to page.html.twig.

Add to documentation:
The drawer component needs to be called with the drawer_id prop.
A button component with the same drawer_id prop is used to open it.

lg:drawer-open class is used to force it open on large screens.
lg:hidden hides the toggle button.

Still need to handle the margin top for admin toolbar.

I misunderstood how the component worked, no adjustments to the page template are needed. Only the button needs to be in the content slot.

Added a navbar drawer story to demo.

TODO: we need a class for the admin toolbar top margin.

Also need a way to manage additional utility classes, but I guess that should be UI Styles? Or additional props, IE selecting a background color for the drawer.

Added CSS for --drupal-displace-offset-top.

@mortona2k thanks for your effort on this !

Regarding this very opinionated component you should check DaisyUI doc there (structure) : https://daisyui.com/components/drawer/#structure

At the end it's a LAYOUT component in which we should put all our page markup inside ".drawer-content" ...

So it's not usable via sitebuilding for now. Someone who wants to use this component should override page template and put all regions inside the drawer-content part.

But there's is another sitebuildable way to have this kind of sidebar that appears from the left or the right ! The modal component ;)

What do you think ?

IMHO I would not put to much effort on the Drawer component (which I find very stramge) and maybe add some documentation for it.

@g4mbini

the documentation is wrong there ... actually the content ... it's about the drawer content - as Open Drawer text, please check the examples
It's not about the page content

<div class="drawer">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- Page content here -->
    <label for="my-drawer" class="btn btn-primary drawer-button">Open drawer</label>
  </div>
  <div class="drawer-side">
    <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <!-- Sidebar content here -->
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </div>
</div>

Here is an example I tried for a project.
Using an hamburger svg for the drawer and the entire header region.
Without duplicate the "menus" code for responsive ...

<div class="navbar-end gap-4">

      <div class="drawer lg:drawer-open w-auto">
        <input id="nav-drawer" type="checkbox" class="drawer-toggle" />
        <div class="drawer-content flex-none lg:hidden">
          <label for="nav-drawer" aria-label="open sidebar" class="btn btn-ghost">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              class="inline-block h-6 w-6 stroke-current">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </label>
        </div>
        <div class="drawer-side lg:relative lg:h-auto z-1500">
          <label for="nav-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
          <div class="bg-base-200 min-h-full w-full md:w-auto md:min-w-1/3  p-4 flex flex-col items-center justify-center">
            <label for="nav-drawer" aria-label="close sidebar" class="lg:hidden p-5 p-t-20 p-r-20 w-full text-center bold cursor-pointer">x</label>
            {% block header %}
              {{ header }}
            {% endblock %}
          </div>
        </div>
      </div>

    </div>

So, imho, this could be a good candidate for better navbar component also for this theme/project...

Thanks @vasike

Yes but ... still at the end you'll have to put all your Drupal regions (content, footer, sidebar, ...) inside the drawer-content.

If you don't do that you will notice strange behaviours (components in Drupal regions that are displayed on top of the drawer-sidebar).

I did some deep testing with this component and it's clearly a Layout component as categorized in DaisyUI documentation. Only usable manually in Drupal templating to meet the structure documented ...

Just to be 100% on how to use Drawer component, I filled an issue upstream : https://github.com/saadeghi/daisyui/issues/3815

Let's wait the answer !

I pushed an updated experiment, using drawer in the page template.

Going back to having page-drawer.html.twig, which needs to be copied over page.html.twig to try this out.

If you put everything in drawer content, the height will be consistent. when sidebar is open/close.
https://play.tailwindcss.com/iXQCFV126E?size=610x428

If there are header, footer, etc outside of drawer, you need to adjust the sidebar height manually (sidebar has not awareness of the height of elements outside of drawer, like header and footer)
https://play.tailwindcss.com/yBd78ekM7s?size=610x428

Sounds like it can work both ways, but could take some effort to get it working.