<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// css 불러오기
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/menu/m-menu.css" media="screen" type="text/css">', 2);
?>

<section id="m-menu">
    <div class="m-menu-top-btns">
        <a href="#" title="Korean" target="_blank">KR</a>
        <a href="#" title="English" target="_blank">EN</a>
        <button class="btn-close" type="button"></button>
    </div>
    <div class="logo"></div>
    <div class="m-menu-list">
        <div class="items">
            <?php
            for ($i = 0; $i < count($menu_datas); $i++) {
                if( empty($menu_datas) ) continue;
                $menu = $menu_datas[$i];
                if($menu['me_link'] == '#' && $menu['sub']){
                    $menu['me_link'] = $menu['sub'][0]['me_link'];
                    $menu['me_target'] = $menu['sub'][0]['me_target'];
                }
                for ($j = 0; $j < count($menu['sub']); $j++) {
                    $menu_sub = $menu['sub'][$j];
                    $me_link = trim($menu_sub['me_link']);
                    $page_code = k_theme_page_code($me_link);
                    if($page_code) {
                        $menu['on'] = 'on';
                    }
                }
                ?>
                <div class="item <?php echo $menu['on']?>" data-ani-name="fadeInUp" style="animation-delay: <?php echo ($i * 60 + 250) ?>ms; animation-duration: 300ms">
                    <?php if ($menu['sub']) { //Is Sub Menu ?>
                        <a class="is_sub" href="javascript:;" target="_<?php echo $menu['me_target']?>"><?php echo $menu['me_name']?></a>
                        <ul class="sub depth2">
                            <?php for ($j = 0; $j < count($menu['sub']); $j++) {
                                if( empty($menu['sub']) ) continue;
                                $menu_sub = $menu['sub'][$j];
                                $me_link = trim($menu_sub['me_link']);
                                $page_code = k_theme_page_code($me_link);
                                if($page_code) {
                                    $menu_sub['on'] = 'on';
                                }
                                ?>
                                <li>
                                    <a class="depth2-a <?php echo $menu_sub['on']?>" href="<?php echo $menu_sub['me_link']?>" target="_<?php echo  $menu_sub['me_target']?>"><?php echo $menu_sub['me_name']?></a>
                                </li>
                            <?php } ?>
                        </ul>
                    <?php } else { ?>
                        <a class="is_sub" href="<?php echo $menu['me_link']?>" target="_<?php echo $menu['me_target']?>"><?php echo $menu['me_name']?></a>
                    <?php } ?>
                </div>
            <?php } ?>
        </div>
    </div>
    <div class="m-menu-bottom-btns">
        <div class="m-menu-login">
            <?php if($is_member) { // 로그인 상태 ?>
                <?php if($is_admin) {?>
                    <a href="<?php echo G5_ADMIN_URL;?>" title="관리">관리</a>
                <?php } ?>
                <a href="<?php echo $k_logout_url;?>" title="로그아웃">로그아웃</a>
            <?php } else { // 로그아웃 상태 ?>
                <a href="<?php echo $k_login_url;?>" title="로그인">로그인</a>
                <a href="<?php echo $k_register_url;?>" title="회원가입">회원가입</a>
            <?php } ?>
        </div>
    </div>
    <div id="m-menu-overlay"></div>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            const $body = document.querySelector('body');
            const $m_menu = document.getElementById('m-menu');
            const $btns = document.querySelectorAll("#top .top-menu-btn, #m-menu-overlay, #m-menu .btn-close");
            const items = $m_menu.querySelector(".items");
            const $item = $m_menu.querySelectorAll(".item");
            $btns.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    if($body.classList.contains('m-menu-on')) {
                        $body.classList.remove('m-menu-on');
                        $item.forEach(function(e) {
                            e.classList.remove('animated');
                            e.classList.remove(e.dataset.aniName);
                        });
                    } else {
                        $body.classList.add('m-menu-on');
                        $item.forEach(function(e) {
                            e.classList.add('animated');
                            e.classList.add(e.dataset.aniName);
                        });
                    }
                });
            });
        });
    </script>
</section>