Search code examples
tailwind-cssdaisyui

Making the drawer squeeze content on page instead of being an overlay in DaisyUI

I am trying to make a drawer menu using DaisyUI in a SvelteKit app. The default drawer slides 'over' the page as an overlay. However, I need it to squeeze the page content to the right as it opens.

Any ideas on how that would be achieved?

This is the current code I have in my +layout.svelte file:

<div class="drawer">

  <input id="sidebar" type="checkbox" class="drawer-toggle" />

  <div class="drawer-content flex flex-col">

    <div class="navbar bg-base-100">
      <div class="flex-none">
        <label for="sidebar" aria-label="open sidebar" class="btn btn-square btn-ghost">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </label>
      </div>
      <div class="flex-1">
        <a class="btn btn-ghost text-xl">AUXCUBE</a>
      </div>
    </div>

    <slot />

  </div> 

  <div class="drawer-side">

    <label for="sidebar" aria-label="close sidebar" class="drawer-overlay"></label> 

    <!-- The Menu List -->

    <ul class="menu min-h-full bg-base-200 w-56 rounded-r-lg">
      <li><a>Individual Item</a></li>
      <li>
        <details open>
          <summary>Parent</summary>
          <ul>
            <li><a>Child 1</a></li>
            <li><a>Child 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Individual Item</a></li>
    </ul>

  </div>
</div>

This produces the following:

enter image description here

Solution

  • You could emulate the drawer-open class when the <input> element is checked, in conjunction with peer:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="drawer">
  <input id="sidebar" type="checkbox" class="drawer-toggle peer" />

  <div class="drawer-content flex flex-col">

    <div class="navbar bg-base-100">
      <div class="flex-none">
        <label for="sidebar" aria-label="open sidebar" class="btn btn-square btn-ghost">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
        </label>
      </div>
      <div class="flex-1">
        <a class="btn btn-ghost text-xl">AUXCUBE</a>
      </div>
    </div>

    <slot />

  </div> 

  <div class="drawer-side peer-checked:pointer-events-auto peer-checked:visible peer-checked:sticky peer-checked:w-auto">

    <!-- The Menu List -->

    <ul class="menu min-h-full bg-base-200 w-56 rounded-r-lg">
      <li><a>Individual Item</a></li>
      <li>
        <details open>
          <summary>Parent</summary>
          <ul>
            <li><a>Child 1</a></li>
            <li><a>Child 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Individual Item</a></li>
    </ul>

  </div>
</div>