下線が伸びるミニマルメニュー

<div class="d03-08-08-frame">
          <div class="d03-08-08-bar">
            <span class="d03-08-08-logo">Atelier</span>
            <button class="d03-08-08-burger" type="button" aria-label="メニューを開く" aria-expanded="false">
              <span></span><span></span><span></span>
            </button>
          </div>
          <nav class="d03-08-08-menu">
            <a href="#">Works</a>
            <a href="#">About</a>
            <a href="#">Journal</a>
            <a href="#">Contact</a>
          </nav>
        </div>

.d03-08-08-frame{position:relative;width:100%;max-width:260px;height:210px;margin:0 auto;background:#111827;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(30,41,59,.2)}
        .d03-08-08-bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
        .d03-08-08-logo{font-weight:800;font-size:13px;color:#f8fafc;letter-spacing:.06em}
        .d03-08-08-burger{position:relative;width:28px;height:28px;border:0;background:transparent;cursor:pointer;padding:0}
        .d03-08-08-burger span{position:absolute;left:4px;width:20px;height:2.4px;background:#f8fafc;border-radius:2px;transition:transform .3s,opacity .3s,top .3s}
        .d03-08-08-burger span:nth-child(1){top:8px}
        .d03-08-08-burger span:nth-child(2){top:14px}
        .d03-08-08-burger span:nth-child(3){top:20px}
        .d03-08-08-burger.open span:nth-child(1){top:14px;transform:rotate(45deg)}
        .d03-08-08-burger.open span:nth-child(2){opacity:0}
        .d03-08-08-burger.open span:nth-child(3){top:14px;transform:rotate(-45deg)}
        .d03-08-08-menu{position:absolute;left:0;right:0;top:57px;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:14px 24px}
        .d03-08-08-menu a{position:relative;color:#e2e8f0;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.02em;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
        .d03-08-08-menu a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1.5px;background:#facc15;transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
        .d03-08-08-menu a:nth-child(1){transition-delay:.05s}
        .d03-08-08-menu a:nth-child(1)::after{transition-delay:.2s}
        .d03-08-08-menu a:nth-child(2){transition-delay:.12s}
        .d03-08-08-menu a:nth-child(2)::after{transition-delay:.27s}
        .d03-08-08-menu a:nth-child(3){transition-delay:.19s}
        .d03-08-08-menu a:nth-child(3)::after{transition-delay:.34s}
        .d03-08-08-menu a:nth-child(4){transition-delay:.26s}
        .d03-08-08-menu a:nth-child(4)::after{transition-delay:.41s}
        .d03-08-08-frame.open .d03-08-08-menu a{opacity:1;transform:translateX(0)}
        .d03-08-08-frame.open .d03-08-08-menu a::after{transform:scaleX(1)}

(function(){
        var root=document.getElementById('item-03-08-08');
        var burger=root.querySelector('.d03-08-08-burger');
        var frame=root.querySelector('.d03-08-08-frame');
        burger.addEventListener('click',function(){
          var isOpen=frame.classList.toggle('open');
          burger.classList.toggle('open',isOpen);
          burger.setAttribute('aria-expanded',isOpen?'true':'false');
        });
      })();