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">
                <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/menu_icon3.png" alt="버스정보 아이콘">
                        <div class="modal-icon-title">
                            <h4>버스정보</h4>
                        </div>
                        <div class="sub-number">
                            <h1>03</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>04</h1>
                        </div>
                        <p onclick="movePath('/notice/notice')">
                            공지사항
                        </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>05</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>