tailwindとreact-responsiveでレスポンシブなナビゲーションメニューを作る[Nextjs]

yarn add react-responsive

import Link from 'next/link'
import React, {useState, useEffect} from 'react'
import { useMediaQuery } from 'react-responsive'

export default function Header({ name }) {
  // visibleの値を変えることでメニューを表示・非表示させる
  const [visible, setVisible] = useState('visible')

  // 画面の大きさの判定ができる
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1024px)'})
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1024px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  // 右上のメニューをクリックで実行される
  const toggleHamburger = () => setVisible(visible === 'visible' ? 'hidden' : 'visible')

  // 画面のサイズが1024pxより大きくなるとisDesktopOrLaptopの値がtrueになる
  // isDesktopOrLaptopの値が変わる度にuseEffectは実行される
  useEffect(() => {
    if (!isDesktopOrLaptop) setVisible('hidden')
    else setVisible('visible')
  }, [isDesktopOrLaptop])

  return (
    <header className="w-full pb-12">
      <nav className="flex items-center justify-between flex-wrap bg-[#ffffff33] p-6">
        <div className="flex items-center flex-shrink-0 text-black mr-6">
          <Link href="/">
            <a>{name}</a>
          </Link>
        </div>
        <div className="block lg:hidden">
          <button onClick={toggleHamburger} className="flex items-center px-3 py-2 border rounded bg-[#C2F8E711] text-[#C2F8E799] border-[#C2F8E799] hover:text-white hover:border-[#C2F8E7]">
            <svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
          </button>
        </div>
        <div className={`${visible} w-full block flex-grow lg:flex lg:items-center lg:w-auto`}>
          <div className="text-md lg:flex-grow">
            <a href="#responsive-header" className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white lg:ml-8 mr-4">
              Docs
            </a>
            <a href="#responsive-header" className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
              Examples
            </a>
            <Link href="/">
              <a className="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Blog</a>
            </Link>

          </div>
          <div>
            <a href="#" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
          </div>
        </div>
      </nav>
    </header>
  )
}