AstroとWordpressでJamstack　その6　Layoutを作る　Headerのメニュー（SP）

---
---
<div class="hamburger flex justify-end p-4 md:hidden h-5 w-6 relative z-50">
    <span class="line top h-1 inline-block w-6 transition-all absolute right-0 bg-black top-0"></span>
    <span class="line middle h-1 inline-block w-6 transition-all absolute right-0 bg-black top-2"></span>
    <span class="line bottom h-1 inline-block transition-all absolute right-0 bg-black top-4 w-6"></span>
</div>

---
import HeaderMenuLink from "./HeaderMenuLink.astro";

---

<div id="slide-menu-bar" class="md:hidden h-full w-full fixed top-0 left-0 z-20 bg-gray-300 bg-opacity-50 transition duration-300 ease -translate-x-full">
    <div class="slideMenuContainer h-full w-3/4 bg-white opacity-100 absolute left-0 flex flex-col  justify-between p-8 pt-20 pb-20 text-slate-600 duration-1000">
        <div><h4>Menuです</h4></div>

        <div class="flex flex-col">
            <HeaderMenuLink />
        </div>
    </div>
</div>

//ハンバーガーメニューを複数（上下）に付けたい場合もあるのでこのようにしてます。
//class hamburgerを全部取得
const Humburger = document.querySelectorAll('.hamburger');
//取得したDOM全てにイベントリスナーを設定
Humburger.forEach(function (e){
    e.addEventListener('click',() =>{
        //console.log('click!');
        e.classList.toggle('open');
        if(e.classList.contains('open')){
            //開くときの処理
            //console.log('open');
            document.querySelectorAll('.hamburger .top').forEach(function(e){
                e.classList.add('transform','rotate-45','top-2','w-7','transition','duration-300');
                e.classList.remove('top-0','w-6');
            });
            document.querySelectorAll('.hamburger .middle').forEach(function(e){
                e.classList.add('hidden');
            })
            document.querySelectorAll('.hamburger .bottom').forEach(function(e){
                e.classList.add('transform','-rotate-45','top-2','w-7','transition','duration-300');
                e.classList.remove('top-4','w-6');
            })
            document.getElementById('slide-menu-bar').classList.add('block','translate-x-0');
            document.getElementById('slide-menu-bar').classList.remove('-translate-x-full');

        }else{
            //console.log('close');
            document.querySelectorAll('.hamburger .top').forEach(function(e){
                e.classList.remove('transform','rotate-45','top-2','transition','duration-300','top-2','w-7');
                e.classList.add('top-0','w-6');
            })
            document.querySelectorAll('.hamburger .middle').forEach(function(e){
                e.classList.remove('hidden');
            })
            document.querySelectorAll('.hamburger .bottom').forEach(function(e){
                e.classList.remove('transform','-rotate-45','top-2','w-7','transition','duration-300');
                e.classList.add('top-4','w-6');
            })
            document.getElementById('slide-menu-bar').classList.remove('block','translate-x-0');
            document.getElementById('slide-menu-bar').classList.add('-translate-x-full');

        }
    })
});