<section class="section docs-section" id="drawer">
                  <h2 class="section-title">Drawer</h2>
                  <p class="docs-section-description">Drawer подходит для контекстных деталей, quick edit и длинных вторичных сценариев без ухода со страницы. По API он близок к Modal, но панель закреплена у края экрана.</p>
                  <div class="block">
                    <h3 class="block-title">Examples</h3>
                    <div class="drawer-preview">
                      <div class="drawer-preview-content">
                        <p class="text">
                          Используй Drawer, когда нужно сохранить контекст основного экрана и раскрыть боковую область с формой,
                          метаданными или журналом.
                        </p>
                        <div class="demo-actions">
                          <button class="btn btn-secondary with-icon" type="button" @click="drawerOpen = true">
                            <i class="ph ph-sidebar"></i>
                            Open drawer
                          </button>
                          <button class="btn btn-primary with-icon" type="button" @click="leftDrawerOpen = true">
                            <i class="ph ph-sidebar-simple"></i>
                            Left drawer
                          </button>
                        </div>
                      </div>
                      <div class="drawer-preview-panel" aria-hidden="true">
                        <h3 class="drawer-preview-title">Panel shape</h3>
                        <p class="drawer-preview-text">Fixed edge, hard border, focused action footer.</p>
                        <span class="chip chip-secondary">Context</span>
                      </div>
                    </div>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Drawer JS</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
<pre><code class="language-javascript">Drawer.create("details-drawer", {
  title: "Details",
  bodyHtml: &#96;
    &lt;p class="text"&gt;Context content, forms, logs, metadata.&lt;/p&gt;
  &#96;,
  actions: drawer =&gt; {
    const close = document.createElement("button");
    close.className = "btn btn-primary";
    close.textContent = "Close";
    close.addEventListener("click", () =&gt; drawer.close());
    return [close];
  }
}).show();</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Left Position</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
<pre><code class="language-javascript">Drawer.create("navigation-drawer", {
  title: "Navigation",
  position: "left",
  bodyText: "Left drawer content"
}).show();</code></pre>
	</div>
</section>