Side Drawers
Two buttons open a drawer from the left or the right with a dimmed overlay, a springy slide, a close button and escape key support.
Preview and code
index.html
<div class="dw"><div class="bs"><button class="l">Open left</button><button class="r">Open right</button></div><div class="ov"></div><aside class="pn pl"><header><b>Menu</b><button class="x" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></header><ul><li>Dashboard</li><li>Projects</li><li>Team</li><li>Reports</li><li>Settings</li></ul></aside><aside class="pn pr"><header><b>Notifications</b><button class="x" aria-label="Close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button></header><ul class="nt"><li><i></i><div>New comment on <u>Launch plan</u><span>2 min ago</span></div></li><li><i></i><div>Deploy finished<span>1 hr ago</span></div></li><li><i class="rd"></i><div>Invoice paid<span>Yesterday</span></div></li></ul></aside></div>
styles.css
.dw{position:relative;width:420px;height:290px;overflow:hidden;border-radius:16px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.bs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px}.bs button{padding:12px 20px;border-radius:999px;border:1px solid #2a2a2a;background:#1b1b1b;color:#f1f1f1;font:600 13px/1 inherit;cursor:pointer;transition:transform .2s}.bs button:active{transform:scale(.95)}.bs .r{background:#0a84ff;border-color:#0a84ff}.ov{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}.dw.open .ov{opacity:1;pointer-events:auto}.pn{position:absolute;top:0;bottom:0;width:210px;background:#1a1a1a;border:1px solid #2a2a2a;box-shadow:0 0 50px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.3,1.15,.4,1);display:flex;flex-direction:column}.pl{left:0;border-radius:0 18px 18px 0;transform:translateX(-105%)}.pr{right:0;border-radius:18px 0 0 18px;transform:translateX(105%)}.dw.left .pl,.dw.right .pr{transform:none}.pn header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px}.pn header b{font-size:14px}.x{width:28px;height:28px;border:0;border-radius:8px;background:#262626;color:#bbb;display:grid;place-items:center;cursor:pointer}.x:hover{color:#fff}.x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.pn ul{list-style:none;margin:0;padding:6px 10px}.pn li{padding:10px 10px;border-radius:9px;font-size:13px;color:#cfcfcf;cursor:pointer;transition:background .2s}.pn li:hover{background:#262626;color:#fff}.nt li{display:flex;gap:10px;align-items:flex-start;cursor:default}.nt i{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#0a84ff}.nt i.rd{background:#34d399}.nt div{font-size:12.5px;line-height:1.4}.nt u{text-decoration:none;color:#fff;font-weight:600}.nt span{display:block;color:#7a7a7a;font-size:11px;margin-top:2px}
script.js
(function(){var r=document.querySelector('.dw');function o(s){r.classList.remove('left','right');r.classList.add('open',s)}function c(){r.classList.remove('open','left','right')}r.querySelector('.bs .l').onclick=function(){o('left')};r.querySelector('.bs .r').onclick=function(){o('right')};r.querySelector('.ov').onclick=c;r.querySelectorAll('.x').forEach(function(x){x.onclick=c});document.addEventListener('keydown',function(e){if(e.key==='Escape')c()})})();