<common_header>
    <div class="header">
        <h1 class="header__logo">
            <a href="{ base }/" class="header__logo__link">
                <div class="header__logo__link__img"><img src="{ base }/assets/img/common/logo.svg" alt="有限会社志摩クリエイト"></div>
            </a>
        </h1>

        <div class="header__nav">
            <ul class="header__nav__list">
                <li class="header__nav__list__item">
                    <a href="{ base }/" class="header__nav__list__item__link">
                        HOME
                    </a>
                </li>
                <li class="header__nav__list__item">
                    <a href="{ base }/company/" class="header__nav__list__item__link">
                        会社案内
                    </a>
                </li>
                <li class="header__nav__list__item">
                    <a href="{ base }/business/" class="header__nav__list__item__link">
                        事業案内
                    </a>
                </li>
                <li class="header__nav__list__item">
                    <a href="{ base }/appeal/" class="header__nav__list__item__link">
                        3つの強み
                    </a>
                </li>
            </ul>

            <div class="header__nav__tel-box">
                <p class="header__nav__tel-box__time">受付：8:30～17:00</p>
                <p class="header__nav__tel-box__num">092-327-2815</p>
            </div>

            <div class="header__nav__btn-box">
                <a href="{ base }/inquiry/" class="header__nav__btn-box__btn inquiry">お問い合わせ</a>
            </div>
        </div>

        <div class="header-menu">
            <button class="header-menu__btn">
                <span class="bar"></span>
            </button>
        </div>
    </div>

    <div class="menu-box">
        <div class="menu-box__inner">
            <ul class="menu-box__inner__list">
                <li class="menu-box__inner__list__item">
                    <a href="{ base }/" class="menu-box__inner__list__item__link">
                        HOME
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{ base }/company/" class="menu-box__inner__list__item__link">
                        会社案内
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{ base }/business/" class="menu-box__inner__list__item__link">
                        事業内容
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{ base }/appeal/" class="menu-box__inner__list__item__link">
                        3つの強み
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{ base }/inquiry/" class="menu-box__inner__list__item__link">
                        お問い合わせ
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{ base }/policy/" class="menu-box__inner__list__item__link">
                        プライバシーポリシー
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script>
        this.on('mount', function() {
        //ハンバーガーメニュー
        var menuBtn = document.querySelector('.header-menu__btn');
        var menuInner = document.querySelector('.menu-box');
    
            menuBtn.addEventListener('click', function() {
                menuBtn.classList.toggle('on');
                menuInner.classList.toggle('on');
            });
        });

        this.on('mount', function() {
            // ハンバーガーメニューボタンがクリックされたときのイベントハンドラを設定
            $(".header-menu__btn").click(function () {
                // 現在のbodyタグのoverflowスタイルを確認
                if ($("body").css("overflow") === "hidden") {
                    // もしoverflowがhiddenなら、bodyのスタイルを元に戻す
                    // $("body").css({ height: "", overflow: "" });
                    $("body").removeClass("open");
                } else {
                    // そうでなければ、bodyにheight: 100%とoverflow: hiddenを設定し、スクロールを無効にする
                    // $("body").css({ height: "100%", overflow: "hidden" });
                    $("body").addClass("open");
                }
            });
        });

        // current
        this.on('mount', function() {
            var targetSelector = '.header__nav__list__item'
            var currentClass = 'now'
            var current = location.pathname.replace(this.base, '').split('/')[1] + '/'

            var href = this.base+'/' + current
            // ディレクトリTOPの場合、`//`となってしまうので、置換
            href = href.replace('//', '/')
            var $currentObj = current.length > 0 ?
            $(targetSelector+' > a[href="'+href+'"]') : $()

            if ($currentObj.length > 0) {
            $currentObj.addClass(currentClass)
            } else {
            if (current.length === 0) {
            $(targetSelector+':first').addClass(currentClass)
            }
            }
            var j$ = jQuery;
        });

        // ヘッダ
        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; // 前回のスクロール位置を更新
            });
        });
    </script>

</common_header>
