86 lines
3.2 KiB
PHP
86 lines
3.2 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="header-left">
|
|
<a href="{{ url('/') }}" class="logo" aria-label="홈으로">
|
|
<img src="{{ asset('assets/images/common/top_logo.png') }}"
|
|
alt="사이트명"
|
|
class="logo-img">
|
|
</a>
|
|
|
|
<nav class="desktop-nav" aria-label="주요 메뉴">
|
|
<a href="/" class="nav-link">HOME</a>
|
|
<a href="/shop" class="nav-link nav-link--exchange">SHOP</a>
|
|
{{-- <a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</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,
|
|
.auth-buttons {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 검색은 유지 + 모바일 폭 최적화 */
|
|
.search-bar {
|
|
display: block !important;
|
|
flex: 1 1 auto;
|
|
max-width: none;
|
|
min-width: 0;
|
|
margin: 0 10px;
|
|
}
|
|
.search-bar form { width: 100%; }
|
|
.search-input { width: 100%; }
|
|
|
|
/* 햄버거 버튼 표시 */
|
|
.mobile-menu-btn {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.site-header .container{
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
</style>
|
|
|