{# @description A sidebar drawer around the page. The default slot is the page, the side slot is the sidebar, and a checkbox toggles it. In the gallery, set id to demo-drawer so the opener in the trigger opens this drawer. #}
{# @prop id:text | required | example:"nav" | description:"Id of the drawer's toggle checkbox. A drawer.button opens the drawer through this id, so it must be unique on the page." #}
{# @prop open:boolean | description:"Keep the sidebar open beside the page. Accepts a breakpoint such as lg to keep it open from that width up." #}
{# @prop placement:select['end'] | description:"Put the sidebar on the end side. Leave empty for the start side." #}
{# @prop class:text | description:"Extra classes added to the drawer." #}
{# @prop side:text | description:"The sidebar content. Give it as the side slot; this declaration keeps a page variable of the same name out of the sidebar. An attribute of the same name replaces the slot." #}
{# @slot <div class="flex w-full flex-col sm:flex-row"><div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">Sign in</div><c-divider horizontal="sm">OR</c-divider><div class="card bg-base-300 rounded-box grid h-20 grow place-items-center">Register</div></div><c-join vertical horizontal="sm"><c-button class="join-item">One</c-button><c-button class="join-item">Two</c-button><c-button class="join-item">Three</c-button></c-join><c-footer vertical horizontal="sm"><c-footer.nav title="Company"><a class="link link-hover">About</a></c-footer.nav><c-footer.nav title="Legal"><a class="link link-hover">Terms</a></c-footer.nav></c-footer> — The page content. This example also shows divider, join and footer switching direction at the sm breakpoint. #}
{# @slot:side <ul class="menu bg-base-200 min-h-full w-80 p-4"><li><a>Item 1</a></li><li><a>Item 2</a></li></ul> — The sidebar content, shown when the drawer is open. #}
{# @trigger <c-drawer.button drawer="demo-drawer">Open sidebar</c-drawer.button> — Opens the drawer whose id is demo-drawer. It sits in the page content, where the focus ring shows. #}
{% load i18n daisy_cotton %}
<c-vars id="" open="" placement="" class side="" />
<div class="drawer {% if open %}{% responsive open 'drawer-open' %}{% endif %} {% variation placement 'drawer' 'end' %} {{ class }}"
     {{ attrs }}>
  <input id="{{ id }}" type="checkbox" class="drawer-toggle" aria-label="{% trans "Toggle sidebar" %}" />
  <div class="drawer-content">{{ slot }}</div>
  <div class="drawer-side">
    <label for="{{ id }}" class="drawer-overlay"><span class="sr-only">{% trans "Close sidebar" %}</span></label>
    {{ side }}
  </div>
</div>