ナビが溢れたら CSS だけでドロワーに切り替える（scroll-timeline で溢れ検知）

<header class="site-header">
  <a class="logo" href="/">Logo</a>
  <nav aria-label="グローバルナビゲーション">
    <ul class="nav-list">…</ul>
  </nav>
  <div class="end-column">
    <button class="drawer-button" type="button" aria-label="メニュー">…</button>
    <a class="contact-link" href="#">お問い合わせ</a>
  </div>
</header>

/* タイムラインがアクティブ（＝溢れている）間だけ --true になる */
@keyframes header-observe {
  from, to { --header-overflowing: --true; }
}

.site-header {
  --header-overflowing: --false;
  display: grid;
  /* 中央のナビ列は 0 まで縮めるので、狭くなるとリストが溢れる */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  timeline-scope: --nav-list;          /* 子のタイムライン名を親から参照可能にする */
  animation: header-observe 1ms both;
  animation-timeline: --nav-list;
}

.nav-list {
  display: grid;
  grid-auto-flow: column;
  overflow-inline: auto;
  scroll-timeline: --nav-list inline;

  @container style(--header-overflowing: --true) {
    visibility: hidden; /* display: none にすると溢れが消えてフラグが戻り、無限ループする */
  }
}

.end-column {
  display: grid;
  & > * { grid-area: 1 / 1; justify-self: end; } /* ボタンとリンクを同じマスに重ねる */
}

.contact-link {
  @container style(--header-overflowing: --true) { visibility: hidden; }
}
.drawer-button {
  @container style(--header-overflowing: --false) { visibility: hidden; }
}