ピン留め可能な常時表示サイドバー

<div class="d03-09-07-stage">
          <button class="d03-09-07-handle" type="button" aria-label="サイドバーを開く"><span></span><span></span><span></span></button>
          <div class="d03-09-07-overlay"></div>
          <aside class="d03-09-07-side">
            <div class="d03-09-07-top">
              <span class="d03-09-07-logo">MENU</span>
              <button class="d03-09-07-pin" type="button" aria-label="ピン留め"></button>
            </div>
            <nav>
              <a href="#" onclick="return false" class="active">ホーム</a>
              <a href="#" onclick="return false">タスク</a>
              <a href="#" onclick="return false">カレンダー</a>
              <a href="#" onclick="return false">設定</a>
            </nav>
          </aside>
          <main class="d03-09-07-main"><p>ハンドルで開き、<br>ピンで固定表示に</p></main>
        </div>

.prev.d03-09-07{padding:0;display:block}
        .d03-09-07-stage{position:relative;display:flex;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d03-09-07-handle{position:absolute;top:50%;left:0;transform:translateY(-50%);width:16px;height:52px;border:none;border-radius:0 8px 8px 0;background:#2563eb;cursor:pointer;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:opacity .2s ease}
        .d03-09-07-stage.open .d03-09-07-handle{opacity:0;pointer-events:none}
        .d03-09-07-handle span{width:2px;height:14px;background:rgba(255,255,255,.85);border-radius:2px}
        .d03-09-07-overlay{position:absolute;inset:0;background:rgba(15,23,42,.3);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1}
        .d03-09-07-stage.open:not(.pinned) .d03-09-07-overlay{opacity:1;visibility:visible}
        .d03-09-07-side{position:absolute;top:0;left:0;bottom:0;width:172px;background:#fff;box-shadow:4px 0 14px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .3s ease;z-index:2;padding:16px;display:flex;flex-direction:column;gap:10px}
        .d03-09-07-stage.open .d03-09-07-side{transform:translateX(0)}
        .d03-09-07-stage.pinned .d03-09-07-side{position:relative;box-shadow:none;border-right:1px solid #e2e8f0}
        .d03-09-07-top{display:flex;align-items:center;justify-content:space-between}
        .d03-09-07-logo{font-weight:800;font-size:12px;letter-spacing:.1em;color:#0f172a}
        .d03-09-07-pin{width:24px;height:24px;flex:none;border:none;border-radius:6px;background:#f1f5f9;cursor:pointer;position:relative}
        .d03-09-07-pin::after{content:"";position:absolute;top:5px;left:11px;width:2px;height:11px;background:#94a3b8;border-radius:2px;transform:rotate(35deg)}
        .d03-09-07-stage.pinned .d03-09-07-pin{background:#2563eb}
        .d03-09-07-stage.pinned .d03-09-07-pin::after{background:#fff}
        .d03-09-07-side nav{display:flex;flex-direction:column;gap:2px}
        .d03-09-07-side nav a{color:#334155;text-decoration:none;font-size:12px;font-weight:600;padding:8px 6px;border-radius:6px}
        .d03-09-07-side nav a:hover{background:#f1f5f9;color:#2563eb}
        .d03-09-07-side nav a.active{background:#dbeafe;color:#1d4ed8}
        .d03-09-07-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
        .d03-09-07-main p{margin:0;font-size:12px;color:#94a3b8;text-align:center;line-height:1.6}

(function(){
        var stage=document.querySelector('.d03-09-07-stage');
        if(!stage)return;
        stage.querySelector('.d03-09-07-handle').addEventListener('click',function(){
          stage.classList.add('open');
        });
        stage.querySelector('.d03-09-07-pin').addEventListener('click',function(){
          stage.classList.toggle('pinned');
          stage.classList.add('open');
        });
        stage.querySelector('.d03-09-07-overlay').addEventListener('click',function(){
          stage.classList.remove('open');
        });
      })();