Vitreo
Components

Drawers

Panels from the side or the bottom

From the end

Code 
<button type="button" class="btn btn-primary" data-drawer-open="drw-end" aria-haspopup="dialog">Open drawer</button>
<div class="drawer glass" id="drw-end" hidden role="dialog" aria-modal="true" aria-labelledby="drw-end-title" data-drawer>
  <div class="drawer-head">
    <h2 id="drw-end-title">Filters</h2>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="drawer-body">
    <div class="flex flex-col gap-3">
      <label class="check" for="f-0"><input class="checkbox" type="checkbox" id="f-0" checked><span>Paid</span></label>
      <label class="check" for="f-1"><input class="checkbox" type="checkbox" id="f-1" checked><span>Pending</span></label>
      <label class="check" for="f-2"><input class="checkbox" type="checkbox" id="f-2"><span>Overdue</span></label>
      <label class="check" for="f-3"><input class="checkbox" type="checkbox" id="f-3"><span>Draft</span></label>
    </div>
  </div>
  <div class="drawer-foot">
    <button type="button" class="btn btn-ghost">Reset</button>
    <button type="button" class="btn btn-primary" data-close>Apply</button>
  </div>
</div>

From the start

Code 
<button type="button" class="btn btn-gray" data-drawer-open="drw-start" aria-haspopup="dialog">Open from the start</button>
<div class="drawer glass drawer-start" id="drw-start" hidden role="dialog" aria-modal="true" aria-labelledby="drw-start-title" data-drawer>
  <div class="drawer-head">
    <h2 id="drw-start-title">Navigation</h2>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="drawer-body">
    <ul class="list">
      <li>
        <a class="list-row" href="#">
          <span>Inbox</span>
        </a>
      </li>
      <li>
        <a class="list-row" href="#">
          <span>Starred</span>
        </a>
      </li>
      <li>
        <a class="list-row" href="#">
          <span>Sent</span>
        </a>
      </li>
      <li>
        <a class="list-row" href="#">
          <span>Drafts</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Bottom sheet

Good on phones.

Code 
<button type="button" class="btn btn-gray" data-drawer-open="drw-bottom" aria-haspopup="dialog">Open sheet</button>
<div class="drawer glass drawer-bottom" id="drw-bottom" hidden role="dialog" aria-modal="true" aria-labelledby="drw-bottom-title" data-drawer>
  <div class="drawer-head">
    <h2 id="drw-bottom-title">Share</h2>
    <button type="button" class="btn btn-ghost btn-sm btn-icon" aria-label="Close" data-close><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  </div>
  <div class="drawer-body">
    <div class="flex items-center flex-wrap gap-3">
      <button type="button" class="btn btn-gray"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Copy link</button>
      <button type="button" class="btn btn-gray"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Email</button>
      <button type="button" class="btn btn-gray"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Message</button>
    </div>
  </div>
</div>
© Vitreo. All rights reserved.