モバイルドロワーレイアウトの改善とサイドバー構成の再設計

モバイル表示時のナビゲーションドロワーについて、プロダクトリンク領域の構造を簡素化し、検索・テーマ切り替えUIをサイドバーに移動することでレイアウトの一貫性を高めた変更です。

背景

変更前のドロワーヘッダーは wa-split コンテナを用いて、プロダクトリンク群と検索・テーマ切り替えボタン群を左右に分割配置していました。この構造では、ドロワー上部のヘッダー領域に複数の異質な要素が同居しており、モバイル画面でのレイアウトが煩雑になっていました。PRのBefore/After画像が示すように、改善前はドロワー上部に多くのコントロールが詰め込まれた状態でした。

技術的な変更

変更の核心は、nav-products-drawer.njk から wa-split ラッパーと検索・テーマ関連のブロックを取り除き、プロダクトリンクのみを管理するシンプルな構成にした点です。

変更前:

<div class="wa-split">
  <div class="wa-cluster wa-gap-0 wa-flex-nowrap nav-products nav-products-drawer">
    <!-- プロダクトリンク群 -->
  </div>
  <div class="wa-cluster wa-gap-0 wa-flex-nowrap">
    <!-- 検索ボタン・カラースキーム・テーマセレクター -->
  </div>
</div>

変更後:

<div class="wa-cluster wa-gap-0 wa-flex-nowrap nav-products nav-products-drawer">
  <!-- プロダクトリンクのみ -->
</div>

検索・テーマ切り替えUIは新設の search-trigger-button.njk として切り出され、sidebar.njk の wa-mobile-only ブロック内に移動しました。検索トリガーボタンは wa-button の outlined スタイルで再設計され、デスクトップ時のみ「this site」テキストとキーボードショートカット <kbd>/</kbd> を表示する wa-desktop-only クラスによるレスポンシブ制御が組み込まれています。

<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
  <wa-icon slot="start" name="magnifying-glass"></wa-icon>
  Search<span class="wa-desktop-only"> this site</span>&hellip;
  <kbd slot="end" class="wa-desktop-only">/</kbd>
</wa-button>

CSSでは wa-page[view='mobile'] セレクターを用いてモバイルビュー時のドロワー横幅を制御する --mobile-drawer-inline-size カスタムプロパティが追加されました。デフォルト値は min(100vw - var(--wa-space-xl), calc(20 * var(--wa-space-scale) * 1rem)) で、ビューポート幅から余白を引いた値と固定スケール値の小さい方を採用することで、極端に小さい画面や大きい画面での見た目を適切に制御します。また、#sidebar 内の wa-button#search-trigger に justify-content: flex-start を適用し、サイドバー幅いっぱいに広がるボタン内のコンテンツを左揃えにしています。

設計判断

関心の分離が本変更の中心的な設計判断です。ドロワーヘッダーにはプロダクト間ナビゲーションのみを置き、コンテンツ探索に関わる検索UIや表示設定はサイドバーに集約することで、各UIコンポーネントの責務を明確にしています。

wa-split というレイアウトユーティリティを削除したことで、ドロワーヘッダーのマークアップが28行から14行に削減されています。search-trigger-button.njk を独立したインクルードとして切り出したことで、将来的に同じボタンを別の文脈で再利用しやすくもなっています。--mobile-drawer-inline-size をカスタムプロパティ経由で定義したことも、外部からのオーバーライドを可能にする設計上の配慮です。

まとめ

この変更は単なるレイアウト修正にとどまらず、ドロワーヘッダー・サイドバー・検索UIの責務を再整理したリファクタリングです。コンポーネントの役割を明確に分離し、各インクルードが単一の関心事を持つ構成に近づけることで、今後のUIコンポーネント追加や変更に対する保守性が向上しています。