<header class="l-header">
<div class="l-header__conteiner">
<h1 class="l-header__logo">
<a href="https://xb579178.xbiz.jp/test-ec-05/"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/moo-side-log.svg')}}" alt="肉の再生工房〜moo side〜"></a>
</h1>
{#<div class="l-header__tel">#}
{# <p class="l-header__tel__text">お電話でのお問い合わせはこちらから</p>#}
{# <a class="l-header__tel__number" href="tel:0312345678">TEL:0120-123-4567</a>#}
{#</div>#}
<!-- ハンバーガーメニュー -->
<div class="l-header__search__image" id="searchopen2">
<img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/glass_wh.webp')}}" alt="">
</div>
<div class="form__area2" id="attrin2">
{{ render(path('block_search_product')) }}
</div>
<div id="hamburger" class="l-header__hamburger">
<span class="l-header__hamburger__line" id="top"></span>
<span class="l-header__hamburger__line" id="center"></span>
<span class="l-header__hamburger__line" id="bottom"></span>
</div>
<nav class="l-header__top__hamburger__nav" id="nav">
<h3 class="l-header__top__hamburger__nav__title">会員メニュー</h3>
<ul class="l-header__top__hamburger__nav__lists">
{% if is_granted('ROLE_USER') %}
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('mypage')}}"><p class="l-header__top__nav__lists__item__undertext">マイページ</p></a></li>
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('logout')}}"><p class="l-header__top__nav__lists__item__undertext">ログアウト</p></a></li>
{% else %}
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('entry')}}"><p class="l-header__top__nav__lists__item__undertext">新規登録</p></a></li>
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('mypage_login')}}"><p class="l-header__top__nav__lists__item__undertext">ログイン</p></a></li>
{% endif %}
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{url('cart')}}">カート</a></li>
</ul>
<h3 class="l-header__top__hamburger__nav__title">メニュー</h3>
<ul class="l-header__top__hamburger__nav__lists">
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('homepage') }}">TOP</a></li>
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('homepage') }}#recommend">おすすめ商品</a></li>
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('homepage') }}#popular">人気商品</a></li>
<li class="l-header__top__hamburger__nav__lists__item"><a href="{{ url('product_list') }}">商品一覧</a></li>
</ul>
</nav>
<nav class="l-header__top__nav">
<ul class="l-header__top__nav__lists">
<li id="searchopen" class="l-header__top__nav__lists__item"><a class="nolink1"><img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/glass.webp')}}" height="40" width="45" alt="検索"><p class="l-header__top__nav__lists__item__undertext">検索</p></a></li>
<div class="form__area" id="attrin">
{{ render(path('block_search_product')) }}
<img id="closebtn" class="closebtn" src="{{ asset('/test-ec-04/html/user_data/assets/img/common/x.webp') }}">
</div>
<li class="l-header__top__nav__lists__item"><a href="{{ url('mypage_favorite') }}"><img src="{{asset ('/test-ec-04/html/user_data/assets/img/common/ha-to.webp')}}" height="40" width="45" alt="お気に入り"><p class="l-header__top__nav__lists__item__undertext">お気に入り</p></a></li>
{% if is_granted('ROLE_USER') %}
<li class="l-header__top__nav__lists__item"><a href="{{url('mypage')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="マイページ"><p class="l-header__top__nav__lists__item__undertext">マイページ</p></a></li>
<li class="l-header__top__nav__lists__item"><a href="{{url('logout')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="ログアウト"><p class="l-header__top__nav__lists__item__undertext">ログアウト</p></a></li>
{% else %}
<li class="l-header__top__nav__lists__item"><a href="{{url('entry')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="新規登録"><p class="l-header__top__nav__lists__item__undertext">新規登録</p></a></li>
<li class="l-header__top__nav__lists__item"><a href="{{url('mypage_login')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cow.webp')}}" height="30" width="60" alt="ログイン"><p class="l-header__top__nav__lists__item__undertext">ログイン</p></a></li>
{% endif %}
<li class="l-header__top__nav__lists__item"><a href="{{url('cart')}}"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/cart.webp')}}" height="60" width="50" alt="カート"><p class="l-header__top__nav__lists__item__undertext">カート</p></a></li>
</ul>
</nav>
</div>
</header>
<div class="l-header__logo display">
<a href="https://xb579178.xbiz.jp/test-ec-05/"><img src="{{asset ('/test-ec-05/html/user_data/assets/img/common/moo-side-log.svg')}}" alt="肉の再生工房〜moo side〜"></a>
</div>
{% block stylesheet %}
<style>
html {
overflow-x: hidden;
}
.l-header {
height: 105px;
}
.l-header__search {
display: none;
}
.l-header__logo.display {
display: none;
}
@media screen and (max-width: 1024px) {
.l-header {
background-color: rgba(0, 0 , 0, 0);
}
.l-header__logo {
display: none;
}
.l-header__logo.display {
display: block;
position: absolute;
top: 10px;
left: 15px;
}
.l-header__search {
display: block;
}
.l-header__search__image {
width: 60px;
background-color: #B72C11;
padding: 14px 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 17px;
right: 90px;
}
.l-header__search__image img {
width: 30px;
}
.l-header__search__area {
position: absolute;
top: 75px;
left: 50%;
transform: translateX(-50%);
height: 60px;
width: max(100vw, 500px);
background-color: #333;
}
}
.l-header__search {
display: block;
}
.l-header__search__image {
display: none;
}
.l-header__search__image img {
width: 30px;
}
.l-header__search__area {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
height: 60px;
width: max(100vw, 500px);
background-color: #333;
transition: top 0.5s;
}
.l-header__search__area.in {
top: 75px;
}
.form__area {
position: fixed;
top: -100%;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
transition: top 0.5s;
}
.form__area .form__area__searchform {
display: flex;
align-items: center;
margin-top: 20px;
}
.form__area .form__category select{
padding: 5px;
width: 30vw;
height: 60px;
background-color: #eacac4;
outline: none;
}
.form__area .form__keyword {
display: flex;
}
.form__area .form__keyword input {
width: 30vw;
height: 60px;
outline: none;
}
.form__area .form__keyword__btn {
background-color: #eacac4;
}
.form__area .form__keyword__btn__img img {
width: 35px;
}
.form__area .closebtn {
width: 50px;
height: 50px;
margin-top: 25px;
}
.form__area.in {
top: 0;
}
.form__area2 {
position: fixed;
top: 75px;
left: 100%;
height: 45px;
width: 100vw;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
transition: left 0.5s;
}
.form__area2 .form__area__searchform {
display: flex;
align-items: center;
}
.form__area2 .form__category select{
padding: 5px;
width: 34.5vw;
height: 45px;
background-color: #eacac4;
border: none;
}
.form__area2 .form__keyword {
display: flex;
}
.form__area2 .form__keyword input {
width: 54.5vw;
height: 45px;
border: none;
}
.form__area2 .form__keyword__btn {
background-color: #eacac4;
width: 11vw;
border: none;
}
.form__area2 .form__keyword__btn__img img {
width: 30px;
}
.form__area2.in {
transform: unset;
left: 0;
}
@media screen and (max-width:1024px) {
.l-header__search__image {
width: 60px;
background-color: #B72C11;
padding: 14px 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 17px;
right: 90px;
z-index: 999;
}
}
</style>
{% endblock %}
{% block javascript %}
<script>
// PC用ヘッダーの検索機能実装
const open = document.getElementById('searchopen');
const close = document.getElementById('closebtn');
const attrin = document.getElementById('attrin');
// 虫眼鏡をクリックで表示
open.addEventListener('click', function(){
attrin.classList.add('in');
});
// ×をクリックで非表示
close.addEventListener('click', function(){
attrin.classList.remove('in');
});
// 要素外をクリックで非表示
addEventListener('click', outsideClose);
function outsideClose(e) {
if (e.target == attrin) {
attrin.classList.remove('in');
}
}
// SP、TB用ヘッダーの検索機能実装
const open2 = document.getElementById('searchopen2');
// 虫眼鏡をクリックで表示,非表示切替
open2.addEventListener('click', function(){
attrin2.classList.toggle('in');
});
</script>
{% endblock %}