/* ============================================================
   自社のJSでメニューを動かすときのサンプルです。

   使い方：このファイルの名前を main.js に変えて、
   　　　　frame.json に "menu_js": false を足すだけです。
   　　　　（CMSの開閉JSが止まり、ここに書いた動きになります）
   ============================================================ */

(() => {
  const hdr = document.querySelector('#menubar_hdr');       // ハンバーガーボタン
  const nav = document.querySelector('#menubar');           // メニュー本体
  const overlay = document.querySelector('#menubar-overlay'); // 背景（クリックで閉じる）
  if (!hdr || !nav) return;

  // 子メニューを持つ項目に目印を付ける
  // （CMSが出力するのは <ul><li><a> だけなので、クラスは自分で付けます）
  nav.querySelectorAll('li').forEach(li => {
    if (li.querySelector('ul')) {
      li.classList.add('has-sub');
      const a = li.querySelector(':scope > a');
      if (a) { a.classList.add('sub-toggle'); a.setAttribute('aria-expanded', 'false'); }
    }
  });

  // スマホかどうか（frame.json の menu_breakpoint と同じ値にしておくと分かりやすい）
  const isMobile = () => window.matchMedia('(max-width: 900px)').matches;

  const close = () => {
    hdr.classList.remove('is-open');
    nav.classList.remove('is-open');
    if (overlay) overlay.style.display = 'none';
    document.body.classList.remove('noscroll');
  };
  const open = () => {
    hdr.classList.add('is-open');
    nav.classList.add('is-open');
    if (overlay) overlay.style.display = 'block';
    document.body.classList.add('noscroll');
  };

  hdr.addEventListener('click', () => (hdr.classList.contains('is-open') ? close() : open()));
  if (overlay) overlay.addEventListener('click', close);

  nav.addEventListener('click', (e) => {
    // スマホのときだけ、親をタップで子メニューを開閉する
    const a = e.target.closest('a.sub-toggle');
    if (a && isMobile()) {
      e.preventDefault();
      const opened = a.closest('li').classList.toggle('is-open');
      a.setAttribute('aria-expanded', String(opened));
      return;
    }
    // ふつうのリンクを押したらドロワーを閉じる
    if (e.target.closest('a') && isMobile()) close();
  });

  window.addEventListener('resize', () => { if (!isMobile()) close(); });
})();
