<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
$nav_menu = array();
$sql = "select * from {$g5['custom_menu_table']} where (1)";
$res = sql_query($sql);
for($i=0;$row=sql_fetch_array($res);$i++) {
    $nav_menu[$row['me_depth']][] = $row;
}
?>
<style>
.page-navi-wrap { position: absolute; left: 0; right: 0; bottom: 100%; }
.nav-wrap { display: flex; background-color: rgba(<?php echo BCR;?>,<?php echo BCG; ?>,<?php echo BCB;?>,0.5); }
.nav { display: flex; }
.pos { display: flex; margin-left: auto; align-self: auto; }
.nav-depth { position: relative; border-right: 1px solid rgba(<?php echo BCR;?>,<?php echo BCG; ?>,<?php echo BCB;?>,0.7); }
.nav-depth > span { display: block; font-size: 1rem; font-weight: 600; padding: 0 26px; height: 58px; line-height: 58px; cursor: pointer; min-width: 180px; }
.nav-depth.is-none > span { cursor: default; }
.nav-depth.is-arrow > span:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(<?php echo G5_URL;?>/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }
.nav-depth.bg_black > span { color: #fff; }
.nav-depth.bg_white > span { color: #000; }
.nav-depth > ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; z-index: 10; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
.nav-depth > ul > li { position: relative; }
.nav-depth > ul > li > a { display: block; padding: 0 26px; height: 52px; line-height: 52px; border-bottom: 1px solid #ddd; }
.nav-depth > ul > li > a:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(<?php echo G5_URL;?>/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }
@media(max-width: 768px) {
.nav { padding-left: 5px; }
.nav-depth > span { display: block; font-size: 14px; font-weight: 400; padding: 0 16px; height: 48px; line-height: 48px; cursor: pointer; min-width: 100px; }
.nav-depth > span:after { display: none; }
.nav-depth > ul > li > a { display: block; font-size: 12px; padding: 0 16px; height: 38px; line-height: 38px; border-bottom: 1px solid #ddd; }
.nav-depth > ul > li > a:after { display: none; }
}
</style>
<div class="page-navi-wrap">
    <div class="page-navi-inner max-layout">
        <div class="nav-wrap">
            <div class="nav">
            <?php
            foreach($nav_menu as $key=>$val) {
                $cut = $key * G5_CATE_LENGTH;
                $str = substr($me_code,0,$cut);
                $me_key   = array_search(substr($me_code,0,$cut), array_column($val, 'me_code'));
                if($me_key === false) {
                    continue;
                }
                $now_menu = $val[$me_key];
                $href_cut = $cut - G5_CATE_LENGTH;
                $href_str = substr($me_code,0,$href_cut);
                $count    = count($val);
                $arrow    = $count > 1 ? 'is-arrow' : 'is-none';
                echo '<div class="nav-depth depth'.$key.' bg_'.BASIC_STYLE.' '.$arrow.'" data-depth="'.$key.'">';
                    echo '<span class="nav-now">'.$now_menu['me_name'].'</span>';
                    if($count > 1) {
                        echo '<ul>';
                        foreach($val as $sub) {
                            if($sub['me_pc_use'] != '1' && $is_mobile == false ) {
                                continue;
                            }
                            if($sub['me_mo_use'] != '1' && $is_mobile == true ) {
                                continue;
                            }
                            if($sub['me_pa_use'] == '1' && $is_mobile == true ) {
                                continue;
                            }
                            if($key > 1 && $href_str != substr($sub['me_code'],0,$href_cut)) {
                                continue;
                            }
                            $me_link = $sub['me_link'];
                            $target  = $sub['me_target'] ? 'target="_'.$sub['me_target'].'"' : '';
                            echo '<li><a href="'.$me_link.'" '.$target.'><span>'.$sub['me_name'].'</span></a></li>';
                        }
                        echo '</ul>';
                    }
                echo '</div>';
            }
            ?>
            </div>
            <div class="pos">
            </div>
        </div>
    </div>
</div>
<script>
$(function() {
    $(document).on('click','.nav-now',function() {
        var $that = $(this).closest('.nav-depth'),
            depth1= $that.data('depth');
        $.each($('.nav-depth'),function() {
            var $this = $(this),
                depth2 = $this.data('depth'),
                $target = $this.find('ul');
            if(depth1 == depth2) {
                $target.slideToggle('slow');
            } else {
                if($target.is(':visible') === true) {
                    $target.slideToggle('slow');
                }
            }
        });
    });
});
</script>