<header_common>
    <div class="header">
        <h1 class="header__logo">
            <a href="{base}/" class="header__logo__link"></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 header__nav__list__item__link--home"></a>
                </li>
                <li class="header__nav__list__item">
                    <a href="{base}/strength/" 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}/company/" class="header__nav__list__item__link">
                        会社情報
                    </a>
                </li>
                <li class="header__nav__list__item">
                    <a href="{base}/recruit/" class="header__nav__list__item__link">
                        求職者の方へ
                    </a>
                </li>
            </ul>

            <div class="header__nav__contact"><a href="{base}/client/" class="header__nav__contact__btn">お問い合わせ</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">
                        <span class="menu-box__inner__list__item__link__en">HOME</span>
                        <span class="menu-box__inner__list__item__link__jp">ホーム</span>
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{base}/information/" class="menu-box__inner__list__item__link">
                        <span class="menu-box__inner__list__item__link__en">NEWS</span>
                        <span class="menu-box__inner__list__item__link__jp">お知らせ</span>
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{base}/strength/" class="menu-box__inner__list__item__link">
                        <span class="menu-box__inner__list__item__link__en">STRENGTH</span>
                        <span class="menu-box__inner__list__item__link__jp">当社の強み</span>
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <button class="menu-box__inner__list__item__link menu-box__inner__list__item__link--acc">
                        <span class="menu-box__inner__list__item__link__en">BUSINESS</span>
                        <span class="menu-box__inner__list__item__link__jp">事業紹介</span>
                    </button>
                    <ul class="menu-box__inner__list__item__sub">
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/business/">事業紹介</a></li>
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/business/dispatch.html">人材派遣</a></li>
                        <li><a class="menu-box__inner__list__item__sub__link menu-box__inner__list__item__sub__link--blank" href="https://nestribe.com/biz/" target="_blank" rel="noopener">物流アウトソーシング</a></li>
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/business/engineer.html">エンジニア派遣</a></li>
                    </ul>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{base}/company/" class="menu-box__inner__list__item__link">
                        <span class="menu-box__inner__list__item__link__en">COMPANY</span>
                        <span class="menu-box__inner__list__item__link__jp">会社情報</span>
                    </a>
                </li>
                <li class="menu-box__inner__list__item">
                    <button class="menu-box__inner__list__item__link menu-box__inner__list__item__link--acc">
                        <span class="menu-box__inner__list__item__link__en">RECRUIT</span>
                        <span class="menu-box__inner__list__item__link__jp">求職者の方へ</span>
                    </button>
                    <ul class="menu-box__inner__list__item__sub">
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/recruit/">ご登録の流れ</a></li>
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/recruit/welfare.html">福利厚生</a></li>
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/recruit/staff.html">スタッフ紹介</a></li>
                    </ul>
                </li>
                <li class="menu-box__inner__list__item">
                    <button class="menu-box__inner__list__item__link menu-box__inner__list__item__link--acc">
                        <span class="menu-box__inner__list__item__link__en">CONTACT</span>
                        <span class="menu-box__inner__list__item__link__jp">お問い合わせフォーム</span>
                    </button>
                    <ul class="menu-box__inner__list__item__sub">
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/client/">お問い合わせフォーム（企業の方）</a></li>
                        <li><a class="menu-box__inner__list__item__sub__link" href="{base}/contact/">お問い合わせフォーム（個人の方）</a></li>
                    </ul>
                </li>
                <li class="menu-box__inner__list__item">
                    <a href="{base}/privacy/" class="menu-box__inner__list__item__link">
                        <span class="menu-box__inner__list__item__link__en">PRIVACY</span>
                        <span class="menu-box__inner__list__item__link__jp">プライバシーポリシー</span>
                    </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() {
            var header = $(".header");
            var main = $(".top-main").length ? $(".top-main") : $(".pagetitle");

            // ページ種別に関わらず、基準要素がない場合はヘッダーを表示状態にする
            if (!main.length) {
                header.removeClass("header--none");
                return;
            }

            var updateHeaderVisibility = function () {
                var mainOffsetTop = main.offset().top;
                var mainHeight = main.outerHeight();

                if ($(window).scrollTop() < mainOffsetTop + mainHeight) {
                    header.addClass("header--none");
                } else {
                    header.removeClass("header--none");
                }
            };

            $(window).on("scroll", updateHeaderVisibility);
            updateHeaderVisibility();
        });

    // アコーディオン
    this.on('mount', function() {
        $(".menu-box__inner__list__item__link--acc").click(function () {
            $(this).next().slideToggle();
            $(this).toggleClass("active");
        });
    });
    </script>
    
</header_common>
