useStateでのハンバーガーメニューが開きっぱなし
Q&A
Closed
解決したいこと
レスポンシブ時にハンバーガーメニューが開きっぱなしになってしまっているので、正常通りワンタッチで開け閉めができるようにしたい。
発生している問題・エラー
コードには、エラーも出てなく、チャットGPT4でも特定できず、デベロッパーツールでもエラーが出ていないので特定できず困っています。
該当するソースコード
//component/nav.js
import Link from 'next/link';
import style from '../../styles/nav.module.css';
export default function Nav() {
const [navIsOpen, setNavIsOpen] = useState(false);
const toggleNav = () => {
setNavIsOpen(!navIsOpen);
};
return (
<nav className={style.navList}>
<div className={style.hamburger} onClick={toggleNav}>
<img src="/menu.png" alt="Menu" style={{ width: 30, height: 30 }} />
</div>
<ul className={navIsOpen ? style.navListMobile : style.navListHidden}>
<li><Link href="/">HOME</Link></li>
<li><Link href="/component/cardlist">CARD LIST</Link></li>
<li><a href="https://golem-works.com/">お問合せ</a></li>
</ul>
</nav>
);
}
//style/nav.module.css
.navList {
color: antiquewhite;
margin: 30px;
}
.navList ul {
display: flex;
justify-content: space-around;
font-family: fantasy;
}
.navList ul li {
margin-bottom: 10px;
transition: color 0.3s ease;
}
/* ホバー時のスタイル */
.navList ul li:hover {
color: blueviolet;
margin-bottom: 0;
}
.navList ul li a {
transition: color 0.3s ease, text-shadow 0.3s ease;
text-shadow: 0 0 0 transparent;
position: relative;
}
.navList ul li a:hover {
color: blueviolet;
text-shadow: 0 0 10px blueviolet;
}
/* アンダーラインのスタイル */
.navList ul li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: blueviolet;
transition: width 0.3s;
bottom: -5px;
left: 0;
}
.navList ul li a:hover::after {
width: 100%;
}
@media (max-width: 768px) {
.navList ul {
max-width: 100px;
width: 90%;
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
background-color: aliceblue;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navList ul li {
color: rgb(1, 3, 5);
background-color: transparent;
opacity: 0.8;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.navListMobile {
display: block;
}
.navList ul li a {
color: rgb(1, 3, 5);
text-decoration: none;
font-weight: bold;
}
.navList ul li a:hover {
color: #0056b3;
}
}
@media (min-width: 769px) {
.hamburger {
display: none;
}
}
自分で試したこと
初歩的なことですが、widthの幅の問題かと思い、サイズを小さくしましたが効果なかったです。
開きっぱなしなので、逆に初期値をtureにして見ましたが、無限リログが起きました。
モバイル用のコンポーネントを増やして作ろうかとも思ったのですが、それだと根本的に解決しなそうなので、まだ試していません。ですが、できればコンポーネントを大量にしたくはないので、スマートな解決方法があればご教授いただけませんか？
よろしくお願いします。
0
