first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,235 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout_hd/'.$rb_core['layout_hd'].'/style.css?ver='.G5_TIME_YMDHIS.'">', 0);
|
||||
// 💡 [핵심] 메인 페이지에서는 투명하게 시작하고, 스크롤하면 배경색이 나타나도록 클래스를 동적으로 설정합니다.
|
||||
$header_class = '';
|
||||
if (defined('_INDEX_') && !empty($rb_builder['bu_trans_header'])) {
|
||||
$header_class = 'is-transparent';
|
||||
} else {
|
||||
$header_class = 'is-scrolled';
|
||||
}
|
||||
|
||||
// 💡 [핵심] PC와 모바일에서 공통으로 사용할 메뉴 데이터를 한 번만 불러옵니다.
|
||||
$menu_tree = get_menu_db(0, false); // PC용 메뉴(0), 캐시 사용(true)
|
||||
$menu_tree_mobile = get_menu_db(1, false); // 모바일용 메뉴(1), 캐시 사용(true)
|
||||
|
||||
?>
|
||||
|
||||
<!-- 📌 [전체 수정] 관리자 메뉴와 100% 연동되는 최종 헤더 -->
|
||||
|
||||
<header id="header" class="main-header <?php echo $header_class; ?>">
|
||||
<div class="header-inner container">
|
||||
|
||||
<!-- 1. 좌측: 로고 -->
|
||||
<div class="header-left">
|
||||
<a href="<?php echo G5_URL ?>" class="header-logo" aria-label="메인으로 이동">
|
||||
<picture>
|
||||
<?php if (!empty($rb_builder['bu_logo_mo'])) { ?>
|
||||
<source srcset="<?php echo G5_URL ?>/data/logos/mo?ver=<?php echo G5_SERVER_TIME ?>" media="(max-width: 1024px)">
|
||||
<?php } else { ?>
|
||||
<source srcset="<?php echo G5_THEME_URL ?>/rb.img/logos/mo.png?ver=<?php echo G5_SERVER_TIME ?>" media="(max-width: 1024px)">
|
||||
<?php } ?>
|
||||
|
||||
<?php if (!empty($rb_builder['bu_logo_pc'])) { ?>
|
||||
<img src="<?php echo G5_URL ?>/data/logos/pc?ver=<?php echo G5_SERVER_TIME ?>" alt="<?php echo $config['cf_title']; ?>">
|
||||
<?php } else { ?>
|
||||
<img src="<?php echo G5_THEME_URL ?>/rb.img/logos/pc.png?ver=<?php echo G5_SERVER_TIME ?>" alt="<?php echo $config['cf_title']; ?>">
|
||||
<?php } ?>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 2. 중앙: 메인 내비게이션 (PC) -->
|
||||
<nav class="gnb pc-only">
|
||||
<ul class="gnb-list">
|
||||
<?php
|
||||
foreach ($menu_tree as $row) {
|
||||
$has_sub = isset($row['sub']) && !empty($row['sub']);
|
||||
echo '<li class="gnb-item' . ($has_sub ? ' has-submenu' : '') . '">';
|
||||
$href = $row['me_link'];
|
||||
if (strpos($href, '#') === 0 && strlen($href) > 1) {
|
||||
$href = G5_URL . $href;
|
||||
}
|
||||
echo '<a href="' . $href . '" target="_' . $row['me_target'] . '" class="gnb-link">' . get_text($row['me_name']) . '</a>';
|
||||
if ($has_sub) {
|
||||
echo '<ul class="sub-menu">';
|
||||
foreach ($row['sub'] as $row2) {
|
||||
$href2 = $row2['me_link'];
|
||||
if (strpos($href2, '#') === 0 && strlen($href2) > 1) {
|
||||
$href2 = G5_URL . $href2;
|
||||
}
|
||||
echo '<li><a href="' . $href2 . '" target="_' . $row2['me_target'] . '">' . get_text($row2['me_name']) . '</a></li>';
|
||||
}
|
||||
echo '</ul>';
|
||||
}
|
||||
echo '</li>';
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- 3. 우측: 유틸리티 메뉴 -->
|
||||
<div class="header-right">
|
||||
<ul class="utility-nav">
|
||||
<li class="pc-only">
|
||||
<button type="button" class="search-toggle-btn" aria-label="검색창 열기"><i class="fa fa-search" aria-hidden="true"></i></button>
|
||||
</li>
|
||||
<?php if ($is_member) { ?>
|
||||
<li class="user-menu-container">
|
||||
<button type="button" class="user-menu-btn" aria-label="사용자 메뉴 열기"><i class="fa fa-user-circle" aria-hidden="true"></i></button>
|
||||
<div class="user-menu-dropdown">
|
||||
<div class="user-info">
|
||||
<strong><?php echo $member['mb_nick'] ?></strong> 님
|
||||
<a href="<?php echo G5_BBS_URL; ?>/point.php" target="_blank" class="win_point user-points"><?php echo number_format($member['mb_point']); ?> P</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/memo.php" class="win_memo">쪽지 <?php if ($memo_not_read > 0) echo '<span class="new-badge">' . $memo_not_read . '</span>'; ?></a></li>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/scrap.php" class="win_scrap">스크랩</a></li>
|
||||
<li><a href="<?php echo G5_URL; ?>/rb/home.php?mb_id=<?php echo $member['mb_id']; ?>">마이페이지</a></li>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<?php } else { ?>
|
||||
<li class="pc-only"><a href="<?php echo G5_BBS_URL ?>/login.php?url=<?php echo urlencode(G5_URL); ?>">로그인</a></li>
|
||||
<li class="pc-only"><a href="<?php echo G5_BBS_URL ?>/register.php" class="btn-join">회원가입</a></li>
|
||||
<?php } ?>
|
||||
<li class="mobile-only">
|
||||
<button type="button" id="mobile-menu-toggle" class="mobile-menu-btn" aria-label="전체메뉴 열기"><i class="fa fa-bars" aria-hidden="true"></i></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-bar-wrap">
|
||||
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
|
||||
<input type="hidden" name="sfl" value="wr_subject||wr_content">
|
||||
<input type="hidden" name="sop" value="and">
|
||||
<input type="text" name="stx" id="search-bar-input" placeholder="검색어를 입력하세요" maxlength="20">
|
||||
<button type="submit" class="search-bar-submit"><i class="fa fa-search" aria-hidden="true"></i></button>
|
||||
<button type="button" class="search-bar-close">×</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="mobile-nav-overlay"></div>
|
||||
<div id="mobile-nav-panel">
|
||||
<div class="mobile-nav-header">
|
||||
<?php if (!$is_member) { ?>
|
||||
<a href="<?php echo G5_BBS_URL ?>/login.php" class="btn-mobile-login">로그인</a>
|
||||
<a href="<?php echo G5_BBS_URL ?>/register.php" class="btn-mobile-join">회원가입</a>
|
||||
<?php } else { ?>
|
||||
<div class="mobile-user-info">
|
||||
<strong><?php echo $member['mb_nick'] ?></strong> 님, 환영합니다.
|
||||
</div>
|
||||
<?php } ?>
|
||||
<button type="button" id="mobile-menu-close" class="mobile-menu-close-btn" aria-label="전체메뉴 닫기">×</button>
|
||||
</div>
|
||||
<nav class="mobile-gnb">
|
||||
<ul>
|
||||
<?php
|
||||
foreach ($menu_tree_mobile as $row) {
|
||||
$has_sub = isset($row['sub']) && !empty($row['sub']);
|
||||
?>
|
||||
<li>
|
||||
<?php
|
||||
$href = $row['me_link'];
|
||||
if (strpos($href, '#') === 0 && strlen($href) > 1) {
|
||||
$href = G5_URL . $href;
|
||||
}
|
||||
?>
|
||||
<a href="<?php echo $href; ?>" target="_<?php echo $row['me_target']; ?>">
|
||||
<?php echo get_text($row['me_name']); ?>
|
||||
<?php if ($has_sub) echo '<span class="sub-menu-indicator"><i class="fa fa-chevron-down"></i></span>'; ?>
|
||||
</a>
|
||||
<?php
|
||||
if ($has_sub) {
|
||||
echo '<ul class="sub-menu">';
|
||||
foreach ($row['sub'] as $row2) {
|
||||
$href2 = $row2['me_link'];
|
||||
if (strpos($href2, '#') === 0 && strlen($href2) > 1) {
|
||||
$href2 = G5_URL . $href2;
|
||||
}
|
||||
echo '<li><a href="' . $href2 . '" target="_' . $row2['me_target'] . '">' . get_text($row2['me_name']) . '</a></li>';
|
||||
}
|
||||
echo '</ul>';
|
||||
}
|
||||
?>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// PC/모바일 공통: 헤더 스크롤 효과
|
||||
const header = document.getElementById('header');
|
||||
if (header.classList.contains('is-transparent')) {
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 50) {
|
||||
header.classList.add('is-scrolled');
|
||||
} else {
|
||||
header.classList.remove('is-scrolled');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// PC 전용: 검색창 토글
|
||||
const searchToggleBtn = document.querySelector('.search-toggle-btn');
|
||||
const searchBarWrap = document.getElementById('search-bar-wrap');
|
||||
const searchBarClose = document.querySelector('.search-bar-close');
|
||||
|
||||
if (searchToggleBtn && searchBarWrap) {
|
||||
searchToggleBtn.addEventListener('click', function() {
|
||||
searchBarWrap.classList.add('is-active');
|
||||
document.getElementById('search-bar-input').focus();
|
||||
});
|
||||
}
|
||||
if (searchBarClose && searchBarWrap) {
|
||||
searchBarClose.addEventListener('click', function() {
|
||||
searchBarWrap.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
// 모바일 전용: 메뉴 패널 토글
|
||||
const mobileMenuBtn = document.getElementById('mobile-menu-toggle');
|
||||
const mobileMenuCloseBtn = document.getElementById('mobile-menu-close');
|
||||
const navPanel = document.getElementById('mobile-nav-panel');
|
||||
const overlay = document.getElementById('mobile-nav-overlay');
|
||||
const body = document.body;
|
||||
|
||||
function openMenu() {
|
||||
if (navPanel) navPanel.classList.add('is-active');
|
||||
if (overlay) overlay.classList.add('is-active');
|
||||
body.style.overflow = 'hidden'; // 스크롤 방지
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
if (navPanel) navPanel.classList.remove('is-active');
|
||||
if (overlay) overlay.classList.remove('is-active');
|
||||
body.style.overflow = ''; // 스크롤 복원
|
||||
}
|
||||
|
||||
if (mobileMenuBtn) mobileMenuBtn.addEventListener('click', openMenu);
|
||||
if (mobileMenuCloseBtn) mobileMenuCloseBtn.addEventListener('click', closeMenu);
|
||||
if (overlay) overlay.addEventListener('click', closeMenu);
|
||||
|
||||
// 모바일 전용: 서브메뉴 토글
|
||||
const subMenuIndicators = document.querySelectorAll('.mobile-gnb .sub-menu-indicator');
|
||||
subMenuIndicators.forEach(indicator => {
|
||||
indicator.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const subMenu = this.closest('li').querySelector('.sub-menu');
|
||||
if (subMenu) {
|
||||
const isVisible = subMenu.style.display === 'block';
|
||||
subMenu.style.display = isVisible ? 'none' : 'block';
|
||||
this.querySelector('i').classList.toggle('fa-chevron-up', !isVisible);
|
||||
this.querySelector('i').classList.toggle('fa-chevron-down', isVisible);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user