タブ切り替え式サイドパネル

<div class="d03-09-09-stage">
          <div class="d03-09-09-rail">
            <button type="button" class="active" data-tab="a">A</button>
            <button type="button" data-tab="b">B</button>
            <button type="button" data-tab="c">C</button>
          </div>
          <div class="d03-09-09-panel">
            <div class="d03-09-09-pane active" data-pane="a">
              <h4>お知らせ</h4>
              <a href="#" onclick="return false">新着情報</a>
              <a href="#" onclick="return false">メンテナンス予定</a>
            </div>
            <div class="d03-09-09-pane" data-pane="b">
              <h4>マイリスト</h4>
              <a href="#" onclick="return false">お気に入り</a>
              <a href="#" onclick="return false">閲覧履歴</a>
            </div>
            <div class="d03-09-09-pane" data-pane="c">
              <h4>設定</h4>
              <a href="#" onclick="return false">アカウント</a>
              <a href="#" onclick="return false">通知設定</a>
            </div>
          </div>
          <main class="d03-09-09-main"><p>アイコンで内容が切替、<br>再クリックで折りたたみ</p></main>
        </div>

.prev.d03-09-09{padding:0;display:block}
        .d03-09-09-stage{position:relative;display:flex;width:100%;height:100%;min-height:260px;overflow:hidden;background:#fff}
        .d03-09-09-rail{flex:none;width:48px;background:#0f172a;display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:8px}
        .d03-09-09-rail button{width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:#94a3b8;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
        .d03-09-09-rail button:hover{color:#fff}
        .d03-09-09-rail button.active{background:#2563eb;color:#fff}
        .d03-09-09-panel{width:150px;flex:none;background:#f8fafc;border-right:1px solid #e2e8f0;overflow:hidden;transition:width .28s ease,padding .28s ease;padding:16px 14px}
        .d03-09-09-stage.collapsed .d03-09-09-panel{width:0;padding:16px 0}
        .d03-09-09-pane{display:none;flex-direction:column;gap:4px}
        .d03-09-09-pane.active{display:flex}
        .d03-09-09-pane h4{margin:0 0 8px;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
        .d03-09-09-pane a{color:#334155;text-decoration:none;font-size:12px;font-weight:600;padding:7px 4px;white-space:nowrap}
        .d03-09-09-pane a:hover{color:#2563eb}
        .d03-09-09-main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
        .d03-09-09-main p{margin:0;font-size:12px;color:#94a3b8;text-align:center;line-height:1.6}

(function(){
        var stage=document.querySelector('.d03-09-09-stage');
        if(!stage)return;
        var railBtns=stage.querySelectorAll('.d03-09-09-rail button');
        var panes=stage.querySelectorAll('.d03-09-09-pane');
        railBtns.forEach(function(btn){
          btn.addEventListener('click',function(){
            var tab=btn.getAttribute('data-tab');
            var isActive=btn.classList.contains('active');
            if(isActive){
              stage.classList.toggle('collapsed');
              return;
            }
            stage.classList.remove('collapsed');
            railBtns.forEach(function(b){b.classList.remove('active');});
            panes.forEach(function(p){p.classList.remove('active');});
            btn.classList.add('active');
            stage.querySelector('.d03-09-09-pane[data-pane="'+tab+'"]').classList.add('active');
          });
        });
      })();