ホバー展開コンパクトサイドバー

<div class="d03-09-04-stage">
          <aside class="d03-09-04-side">
            <div class="d03-09-04-top">
              <span class="d03-09-04-logo">&#9679;</span>
              <button class="d03-09-04-pin" type="button" aria-label="サイドバーを固定"></button>
            </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-04-main"><p>ホバーで幅が広がる<br>ピンで固定表示も可能</p></main>
        </div>

.prev.d03-09-04{padding:0;display:block}
        .d03-09-04-stage{position:relative;display:flex;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d03-09-04-side{position:relative;width:56px;flex:none;background:#1e293b;padding:12px 8px;transition:width .28s ease;overflow:hidden;display:flex;flex-direction:column;gap:12px;z-index:2}
        .d03-09-04-side:hover,.d03-09-04-stage.pinned .d03-09-04-side{width:168px}
        .d03-09-04-top{display:flex;align-items:center;justify-content:space-between;height:24px}
        .d03-09-04-logo{color:#38bdf8;font-size:14px;flex:none;padding-left:4px}
        .d03-09-04-pin{width:24px;height:24px;flex:none;border:none;border-radius:6px;background:rgba(255,255,255,.08);cursor:pointer;opacity:0;transition:opacity .2s ease;position:relative}
        .d03-09-04-side:hover .d03-09-04-pin{opacity:1}
        .d03-09-04-stage.pinned .d03-09-04-pin{opacity:1;background:#2563eb}
        .d03-09-04-pin::after{content:"";position:absolute;top:6px;left:11px;width:2px;height:11px;background:#cbd5e1;border-radius:2px;transform:rotate(35deg)}
        .d03-09-04-stage.pinned .d03-09-04-pin::after{background:#fff}
        .d03-09-04-side nav{display:flex;flex-direction:column;gap:4px}
        .d03-09-04-side a{display:flex;align-items:center;gap:10px;text-decoration:none;padding:8px;border-radius:8px;color:#cbd5e1;white-space:nowrap}
        .d03-09-04-side a:hover{background:rgba(255,255,255,.08);color:#fff}
        .d03-09-04-side a.active{background:#2563eb;color:#fff}
        .d03-09-04-side i{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}
        .d03-09-04-side b{font-size:12px;font-weight:600}
        .d03-09-04-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:#f8fafc}
        .d03-09-04-main p{margin:0;font-size:12px;color:#94a3b8;text-align:center;line-height:1.6}

(function(){
        var stage=document.querySelector('.d03-09-04-stage');
        if(!stage)return;
        var pin=stage.querySelector('.d03-09-04-pin');
        pin.addEventListener('click',function(e){
          e.stopPropagation();
          stage.classList.toggle('pinned');
        });
      })();