<header_common>
    <div class="header">
        <h1 class="header-logo">
            <a href="{ base }/">
                <img src="{ base }/assets/img/common/logo.png" alt="九州アイル舞台工房">
            </a>
        </h1>

        <!-- ハンバーガーメニュー -->
        <input id="nav-input" type="checkbox" role="button" title="MENU">
        <label id="nav-open" for="nav-input" aria-hidden="true" title="MENU">
            <span>
                <span></span>
            </span>
        </label>
        <div id="nav-content">
            <ul class="header-nav">
                <li class="header-nav__item">
                    <a href="{base}/" class="header-nav__link">Home</a>
                </li>
                <li class="header-nav__item">
                    <a href="{base}/about/" class="header-nav__link">会社案内</a>
                </li>
                <li class="header-nav__item">
                    <a href="{base}/work/" class="header-nav__link">事業案内</a>
                    <ul class="header-nav__secondary">
                        <li class="header-nav__secondary__item">
                            <a href="{base}/work/detail.html" class="header-nav__secondary__link">実績</a>
                        </li>
                    </ul>
                </li>
                <li class="header-nav__item">
                    <a href="{base}/recruit/" class="header-nav__link">採用情報</a>
                </li>
            </ul>
            <div class="header-tel">
                <a href="tel:0924022261" class="header-tel__link">092-402-2261</a>
            </div>
            <a href="m&#97;i&#108;t&#111;:i&#108;l&#64;&#107;y&#117;&#115;&#104;&#117;&#45;il&#108;.c&#111;.&#106;&#112;" class="header-contact">お問い合わせ</a>
        </div>
        <!-- ハンバーガーメニュー -->
    </div>

    <script>
        this.on('mount', function() {
            const header = document.querySelector('.header');
            let prevY = window.scrollY; // 前回のスクロール位置を初期化

            window.addEventListener('scroll', () => {
            const currentY = window.scrollY; // 現在のスクロール位置を取得
            if (currentY < prevY) { // 上にスクロールしている場合
                header.classList.remove('hidden'); // hiddenクラスを削除して表示する
            } else { // 下にスクロールしている場合
            if (currentY > 0) { //Safariなどのバウンススクロール対策
                header.classList.add('hidden'); // hiddenクラスを追加して非表示にする
                }
            }
            prevY = currentY; // 前回のスクロール位置を更新
            });
        });

        this.on('mount', function() {
            $("#nav-open").on("click", function(){
                $(this).toggleClass("active");
            });
        });

    </script>
</header_common>
