スクロール連動で折りたたまれるサイドバー

<div class="d03-09-12-stage">
          <aside class="d03-09-12-side">
            <div class="d03-09-12-logo">SITE</div>
            <nav>
              <a href="#" onclick="return false" class="active"><i></i><b>ホーム</b></a>
              <a href="#" onclick="return false"><i></i><b>特集記事</b></a>
              <a href="#" onclick="return false"><i></i><b>ランキング</b></a>
              <a href="#" onclick="return false"><i></i><b>お問い合わせ</b></a>
            </nav>
          </aside>
          <main class="d03-09-12-main">
            <p class="d03-09-12-hint">本文を下にスクロール<br>↓</p>
            <div class="d03-09-12-card"></div>
            <div class="d03-09-12-card"></div>
            <div class="d03-09-12-card"></div>
            <div class="d03-09-12-card"></div>
          </main>
        </div>

.prev.d03-09-12{padding:0;display:block}
        .d03-09-12-stage{position:relative;display:flex;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d03-09-12-side{position:relative;width:158px;flex:none;background:#0f172a;padding:16px 12px;transition:width .3s ease;overflow:hidden;display:flex;flex-direction:column;gap:14px}
        .d03-09-12-stage.scrolled .d03-09-12-side{width:52px}
        .d03-09-12-logo{font-weight:800;font-size:12px;letter-spacing:.1em;color:#38bdf8;white-space:nowrap}
        .d03-09-12-side nav{display:flex;flex-direction:column;gap:4px}
        .d03-09-12-side a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:9px 8px;border-radius:8px;color:#cbd5e1;white-space:nowrap}
        .d03-09-12-side a.active{background:#2563eb;color:#fff}
        .d03-09-12-side i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.85}
        .d03-09-12-side b{font-size:12px;font-weight:600;opacity:1;transition:opacity .2s ease}
        .d03-09-12-stage.scrolled .d03-09-12-side b{opacity:0}
        .d03-09-12-main{flex:1;min-width:0;overflow-y:auto;padding:16px;background:#f8fafc}
        .d03-09-12-hint{margin:0 0 12px;font-size:11.5px;color:#94a3b8;text-align:center}
        .d03-09-12-card{height:70px;border-radius:10px;margin-bottom:10px;background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}

(function(){
        var root=document.getElementById('item-03-09-12');
        if(!root)return;
        var stage=root.querySelector('.d03-09-12-stage');
        if(!stage)return;
        var main=stage.querySelector('.d03-09-12-main');
        if(!main)return;
        main.addEventListener('scroll',function(){
          if(main.scrollTop>20){
            stage.classList.add('scrolled');
          }else{
            stage.classList.remove('scrolled');
          }
        });
      })();