アコーディオン階層サイドバー

<div class="d03-09-03-stage">
          <nav class="d03-09-03-side">
            <div class="d03-09-03-group">
              <button type="button" class="d03-09-03-head active">商品管理<span class="d03-09-03-arrow"></span></button>
              <div class="d03-09-03-panel">
                <a href="#" onclick="return false">商品一覧</a>
                <a href="#" onclick="return false">新規登録</a>
                <a href="#" onclick="return false">カテゴリ管理</a>
              </div>
            </div>
            <div class="d03-09-03-group">
              <button type="button" class="d03-09-03-head">注文管理<span class="d03-09-03-arrow"></span></button>
              <div class="d03-09-03-panel">
                <a href="#" onclick="return false">注文一覧</a>
                <a href="#" onclick="return false">配送設定</a>
              </div>
            </div>
            <div class="d03-09-03-group">
              <button type="button" class="d03-09-03-head">サイト設定<span class="d03-09-03-arrow"></span></button>
              <div class="d03-09-03-panel">
                <a href="#" onclick="return false">アカウント</a>
                <a href="#" onclick="return false">通知設定</a>
              </div>
            </div>
          </nav>
        </div>

.prev.d03-09-03{padding:0;display:block}
        .d03-09-03-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc;display:flex;align-items:stretch}
        .d03-09-03-side{width:100%;padding:14px;overflow-y:auto}
        .d03-09-03-group{border-bottom:1px solid #e2e8f0}
        .d03-09-03-head{width:100%;display:flex;align-items:center;justify-content:space-between;border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:#1f2937;padding:12px 4px}
        .d03-09-03-head.active,.d03-09-03-head:hover{color:#2563eb}
        .d03-09-03-arrow{width:8px;height:8px;flex:none;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg);transition:transform .3s ease,border-color .3s ease}
        .d03-09-03-head.active .d03-09-03-arrow{transform:rotate(-135deg);border-color:#2563eb}
        .d03-09-03-panel{max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-direction:column}
        .d03-09-03-head.active + .d03-09-03-panel{max-height:160px}
        .d03-09-03-panel a{color:#64748b;text-decoration:none;font-size:12px;padding:8px 4px 8px 16px}
        .d03-09-03-panel a:hover{color:#2563eb}

(function(){
        var side=document.querySelector('.d03-09-03-side');
        if(!side)return;
        var heads=side.querySelectorAll('.d03-09-03-head');
        heads.forEach(function(h){
          h.addEventListener('click',function(){
            var isActive=h.classList.contains('active');
            heads.forEach(function(x){x.classList.remove('active');});
            if(!isActive)h.classList.add('active');
          });
        });
      })();