Animated Sidebar Drawer

<button class="sb-toggle" id="sbToggle" aria-label="Menu"><span></span><span></span><span></span></button>
<div class="sb-scrim" id="sbScrim"></div>
<aside class="sb-drawer" id="sbDrawer">
  <div class="sb-brand">Acme</div>
  <nav>
    <a class="on"><span class="d"></span>Dashboard</a>
    <a><span class="d"></span>Projects</a>
    <a><span class="d"></span>Team</a>
    <a><span class="d"></span>Settings</a>
  </nav>
</aside>

*{box-sizing:border-box}
.sb-toggle{position:relative;z-index:30;width:46px;height:46px;border:0;border-radius:12px;background:#1a1f36;display:grid;place-items:center;gap:5px;cursor:pointer}
.sb-toggle span{display:block;width:22px;height:2.5px;background:#fff;border-radius:2px;transition:.3s}
.sb-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.sb-toggle.open span:nth-child(2){opacity:0}
.sb-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.sb-scrim{position:fixed;inset:0;background:rgba(15,20,40,.45);opacity:0;pointer-events:none;transition:.3s;z-index:20}
.sb-scrim.on{opacity:1;pointer-events:auto}
.sb-drawer{position:fixed;top:0;left:0;bottom:0;width:240px;background:#fff;box-shadow:4px 0 30px rgba(15,20,40,.15);transform:translateX(-100%);transition:transform .3s cubic-bezier(.5,0,.2,1);z-index:25;padding:24px;font-family:system-ui,sans-serif}
.sb-drawer.on{transform:none}
.sb-brand{font-weight:800;font-size:22px;color:#1a1f36;margin-bottom:24px}
.sb-drawer nav{display:flex;flex-direction:column;gap:4px}
.sb-drawer a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;color:#5a627a;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.sb-drawer a:hover{background:#f4f5fa}
.sb-drawer a.on{background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff}
.sb-drawer a .d{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.6}

var t=document.getElementById('sbToggle'),d=document.getElementById('sbDrawer'),sc=document.getElementById('sbScrim');
function toggle(open){t.classList.toggle('open',open);d.classList.toggle('on',open);sc.classList.toggle('on',open)}
t.onclick=function(){toggle(!d.classList.contains('on'))};
sc.onclick=function(){toggle(false)};
d.querySelectorAll('a').forEach(function(a){a.onclick=function(){d.querySelectorAll('a').forEach(function(x){x.classList.remove('on')});a.classList.add('on');toggle(false)}});