its-web-server/src/main/resources/templates/include/header.html

<header>
    <div class="header-menu">
        <div class="logo" th:onclick="movePath('/')">
            <div>
                <img src="/images/logo/logo.png" alt="포항시 로고">
            </div>
            <p>포항시교통정보센터</p>
        </div>
        <div class="top-menu">
            <div class="top-menu-cont" th:classappend="${selected == 'traffic'} ? ' on' : ''">
                <div></div>
                <a th:href="@{/trafficMap/cctvMap}">교통정보</a>
            </div>
            <div class="top-menu-cont" th:classappend="${selected == 'statistics'} ? ' on' : ''">
                <div></div>
                <a th:href="@{/statistics/traffic01}">교통통계</a>
            </div>
            <div class="top-menu-cont" th:classappend="${selected == 'parking'} ? ' on' : ''">
                <div></div>
                <a th:href="@{/trafficMap/parking}">주차정보</a>
            </div>
            <div class="top-menu-cont">
                <div></div>
                <a href="javascript:openBusSite(0)">버스정보</a>
                <img src="/images/icon/direction.png" alt="새 창 열기">
            </div>
            <span tabindex="0" id="menu" onclick="menuOpen()">
                    <img src="/images/icon/menu.png" alt="menu">
                </span>
            <div id="menu-modal">
                <div class="modal-close-box">
                    <div class="modal-close" onclick="closeModal('header #menu-modal')"></div>
                </div>
                <div class="modal-container">
                    <div>
                        <img class="modal-icon" src="/images/icon/menu_icon1.png" alt="교통정보 아이콘">
                        <div class="modal-icon-title">
                            <h4>교통정보</h4>
                        </div>
                        <div class="sub-number">
                            <h1>01</h1>
                        </div>
                        <p th:onclick="movePath('/trafficMap/cctvMap')">교통CCTV</p>
                        <p th:onclick="movePath('/trafficMap/intersections')">스마트교차로</p>
                        <p th:onclick="movePath('/trafficMap/vms')">도로전광판</p>
                        <p th:onclick="movePath('/trafficMap/incidents')">돌발정보</p>
                        <p th:onclick="movePath('/trafficMap/realtimetraffic')">소통정보</p>
                    </div>
                    <div>
                        <img class="modal-icon" src="/images/icon/menu_icon2.png" alt="교통통계 아이콘">
                        <div class="modal-icon-title">
                            <h4>교통통계</h4>
                        </div>
                        <div class="sub-number">
                            <h1>02</h1>
                        </div>
                        <p th:onclick="movePath('/statistics/traffic01')">교통량통계</p>
                        <p th:onclick="movePath('/statistics/traffic02')">소통통계</p>
                        <p th:onclick="movePath('/statistics/congestion')">정체통계</p>
                    </div>
                    <div>
                        <img class="modal-icon" src="/images/icon/parking.png" alt="주차정보 아이콘">
                        <div class="modal-icon-title">
                            <h4>주차정보</h4>
                        </div>
                        <div class="sub-number">
                            <h1>03</h1>
                        </div>
                        <p onclick="movePath('/trafficMap/parking')">
                            주차정보
                        </p>
                    </div>
                    <div>
                        <img class="modal-icon" src="/images/icon/menu_icon3.png" alt="버스정보 아이콘">
                        <div class="modal-icon-title">
                            <h4>버스정보</h4>
                        </div>
                        <div class="sub-number">
                            <h1>04</h1>
                        </div>
                        <p onclick="openBusSite(0)">
                            노선
                            <img class="modal-direction" src="/images/icon/direction.png" alt="외부사이트 이미지">
                        </p>
                        <p onclick="openBusSite(1)">
                            정류소
                            <img class="modal-direction" src="/images/icon/direction.png" alt="외부사이트 이미지">
                        </p>
                        <p onclick="openBusSite(2)">
                            요금
                            <img class="modal-direction" src="/images/icon/direction.png" alt="외부사이트 이미지">
                        </p>
                    </div>
                    <div>
                        <img class="modal-icon" src="/images/icon/menu_icon4.png" alt="">
                        <div class="modal-icon-title">
                            <h4>공지사항</h4>
                        </div>
                        <div class="sub-number">
                            <h1>05</h1>
                        </div>
                        <p onclick="movePath('/notice/list')">
                            공지사항
                        </p>
                    </div>
                    <div>
                        <img class="modal-icon" src="/images/icon/menu_icon5.png" alt="">
                        <div class="modal-icon-title">
                            <h4>교통정보센터</h4>
                        </div>
                        <div class="sub-number">
                            <h1>06</h1>
                        </div>
                        <p onclick="movePath('/center/center')">
                            센터소개
                        </p>
                        <p onclick="movePath('/center/way')">
                            오시는길
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:if="${selected == 'statistics'}" th:include="/include/statistics-menu"></th:block>
    <th:block th:if="${selected == 'center'}" th:include="/include/center-menu"></th:block>
</header>

<script th:inline="javascript">

    // function menuOpen() {
    //     let isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    //     let display = 'flex';
    //     if (isMobile) {
    //         if ($(window).width() <= 450) {
    //             display = 'block';
    //         }
    //     }
    //     $('header #menu-modal').css('display', display);
    // }
    //
    // window.addEventListener(`resize`, function () {
    //     const display = $('header #menu-modal').css('display');
    //     if (display === 'flex' || display === 'block') {
    //         if ($(window).width() <= 450) {
    //             $('header #menu-modal').css('display', 'block');
    //         } else {
    //             $('header #menu-modal').css('display', 'flex');
    //         }
    //     }
    //
    // });
    //
    // function closeModal(target) {
    //     $(target).css('display', 'none');
    // }
    //
    // function openBusSite(ord) {
    //     const urlArr = [
    //         'https://www.pohang.go.kr/bis/busRoute.do',
    //         'https://www.pohang.go.kr/bis/busStation.do',
    //         'https://www.pohang.go.kr/dept/contents.do?mid=0505020100',
    //     ];
    //     window.open(urlArr[ord], '_blank', "noopener noreferrer")
    // }
    //
    // function movePath(uri) {
    //     window.location.href = uri;
    // }
    //
    // function openModal(target) {
    //     $(target).css('display', 'flex');
    //     $(target + " .content").scrollTop(0);
    // }

</script>