Drawer

<button class="mn-btn mn-btn-outline" data-mn-open="dr-right">Right</button>
<button class="mn-btn mn-btn-outline" data-mn-open="dr-left">Left</button>
<button class="mn-btn mn-btn-outline" data-mn-open="dr-bottom">Bottom</button>
<dialog class="mn-drawer" id="dr-right">
  <div class="mn-drawer-header"><h2 class="mn-modal-title">Filters</h2><button class="mn-close" data-mn-close aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
  <div class="mn-drawer-body mn-stack">
    <label class="mn-check"><input class="mn-checkbox" type="checkbox" checked> In stock</label>
    <label class="mn-check"><input class="mn-checkbox" type="checkbox"> On sale</label>
    <div class="mn-field"><label class="mn-label" for="dr-p">Max price</label><input class="mn-slider" id="dr-p" type="range" value="40"></div>
  </div>
  <div class="mn-drawer-footer"><button class="mn-btn mn-btn-ghost" data-mn-close>Reset</button><button class="mn-btn" data-mn-close>Apply</button></div>
</dialog>
<dialog class="mn-drawer mn-drawer-left" id="dr-left">
  <div class="mn-drawer-header"><h2 class="mn-modal-title">Menu</h2><button class="mn-close" data-mn-close aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
  <nav class="mn-drawer-body mn-sidebar" aria-label="Drawer navigation"><div class="mn-sidebar-group">
    <a class="mn-sidebar-link" href="#drawer" aria-current="page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 3l9 8"/><path d="M5 10v10h14V10"/></svg> Home</a><a class="mn-sidebar-link" href="#drawer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 13h5l1.5 2h5L16 13h5"/><path d="M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z"/></svg> Inbox</a><a class="mn-sidebar-link" href="#drawer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg> Settings</a>
  </div></nav>
</dialog>
<dialog class="mn-drawer mn-drawer-bottom" id="dr-bottom">
  <div class="mn-drawer-body"><h2 class="mn-modal-title">Share</h2><p class="mn-muted">Choose where to send this.</p>
  <div class="mn-row"><button class="mn-btn mn-btn-outline" data-mn-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> Email</button><button class="mn-btn mn-btn-outline" data-mn-close><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg> Copy link</button></div></div>
</dialog>