65 lines
2.6 KiB
PHP
65 lines
2.6 KiB
PHP
<header class="site-header">
|
|
<div class="container" style="height: 100%; display: flex; align-items: center; justify-content: space-between;">
|
|
|
|
<!-- Left: Logo & Nav -->
|
|
<div class="flex items-center gap-4">
|
|
<a href="/" class="logo"
|
|
style="font-size: 24px; font-weight: 800; color: var(--color-accent-blue); margin-right: 32px;">
|
|
GIFTICON
|
|
</a>
|
|
|
|
<nav class="desktop-nav" style="display: flex; gap: 24px;">
|
|
<a href="/" class="nav-link">Home</a>
|
|
<a href="/shop" class="nav-link">Shop</a>
|
|
<a href="/exchange" class="nav-link">상품권현금교환</a>
|
|
<a href="/mypage" class="nav-link">마이페이지</a>
|
|
<a href="/cs" class="nav-link">고객센터</a>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Center: Search (Desktop) -->
|
|
<div class="search-bar">
|
|
<form action="/shop" method="GET">
|
|
<input type="text" name="search" class="search-input" placeholder="상품권/브랜드 검색 (예: 문상, 해피, 구글플레이)">
|
|
<button type="submit" class="search-icon" aria-label="검색">
|
|
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right: Auth Buttons -->
|
|
<div class="auth-buttons flex items-center gap-2">
|
|
<a href="/login" class="btn btn-ghost">로그인</a>
|
|
<a href="/register" class="btn btn-primary" style="padding: 8px 20px;">회원가입</a>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Toggle (Hidden on Desktop) -->
|
|
<button class="mobile-menu-btn" aria-label="메뉴 열기" style="display: none;">
|
|
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Mobile Breakpoint Adjustments will be handled in CSS media queries -->
|
|
<style>
|
|
@media (max-width: 1024px) {
|
|
|
|
.desktop-nav,
|
|
.search-bar,
|
|
.auth-buttons {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: block !important;
|
|
}
|
|
}
|
|
</style>
|