グローバルメニュー

使い方

src/Component.astro をヘッダーとして配置し、メニュー項目を items に渡します。

<GlobalMenu
  brand={{ name: 'STUDIO', sub: 'Creative Office', href: '/' }}
  items={[
    { label: '私たちについて', en: 'About', href: '/about' },
    { label: '仕事', en: 'Works', href: '/works' },
  ]}
  note="つくることで、社会を少し前へ。"
  cta={{ label: 'お問い合わせ', href: '/contact' }}
/>

動きと操作

• src/motion.ts の mountGlobalMenu(root) がボタンとパネルを有効にし、後片付け用の関数を返します。
• 開くとパネルが上から下へ開き、英字の項目がマスクの下から順に現れます。閉じるときは同じ動きを速く逆再生します。
• 開いている間はメニュー以外を操作できない状態（inert）にし、ページのスクロールを止めます。最初のリンクへフォーカスを移し、Tabキーはメニュー内を巡回します。
• Escキーまたはボタンで閉じるとフォーカスはボタンに戻ります。項目を選ぶとパネルを閉じてから移動します。
• prefers-reduced-motion: reduce のときは短いフェードだけで開閉します。
• JavaScriptが使えない環境では、ボタンを出さずに通常のリンク一覧として表示します。

調整する箇所

• パネルの色は --gm-panel、文字色は --gm-panel-ink、バーの背景は --gm-paper で変更できます。
• 項目の現れる間隔は motion.ts の stagger、開く速さはパネルの duration で調整します。
• ページに固定ヘッダーがある場合は、各セクションの scroll-margin-top をバーの高さに合わせてください。

利用条件

ライセンスは未設定です。現在はソースを配布せず、見た目と動きの参考として掲載しています。