Drawers are very versatile components it helps in Navigation or container for forms or information or use it as model.

Example

Right Default

<div class="sw-drawer" id="right">

<div class="sw-drawer-body">

<h1>Right Default</h1>

<button class="sw-btn sw-drawer-cancle-btn">Cancle</button>

</div>

</div>

<button class="sw-btn sw-drawer-btn" drawer-target="right">Drawer</button>

Direction Drawer

Right Default

Left

Top

Bottom

<div class="sw-drawer" id="right">

<div class="sw-drawer-body">

<h1>Right Default</h1>

<button class="sw-btn sw-drawer-cancle-btn">Cancle</button>

</div>

</div>

<div class="sw-drawer sw-drawer-left" id="left">

<div class="sw-drawer-body">

<h1>Left</h1>

<button class="sw-btn sw-drawer-cancle-btn">Cancle</button>

</div>

</div>

<div class="sw-drawer sw-drawer-top" id="top">

<div class="sw-drawer-body">

<h1>Top</h1>

<button class="sw-btn sw-drawer-cancle-btn">Cancle</button>

</div>

</div>

<div class="sw-drawer sw-drawer-bottom" id="bottom">

<div class="sw-drawer-body">

<h1>Bottom</h1>

<button class="sw-btn sw-drawer-cancle-btn">Cancle</button>

</div>

</div>

<button class="sw-btn sw-drawer-btn" drawer-target="right">Drawer Right</button>

<button class="sw-btn sw-drawer-btn" drawer-target="left">Drawer Left</button>

<button class="sw-btn sw-drawer-btn" drawer-target="bottom">Drawer Bottom</button>

<button class="sw-btn sw-drawer-btn" drawer-target="top">Drawer Top</button>