Next.jsでclassNameに複数のクラスを指定したい！

Next.jsでclassNameに複数のクラスを指定したい！ぞ！

背景

Webサイト作成の練習のため、以下ちょっと好きな声優さんのサイトをtracingしています。
https://yuhko-kaida.com/index.html
このサイトのヘッダーは、以下のようにheaderタグの中にaタグがあり、そのaタグで3本のハンバーガーメニューを構成しています。

<header className={classes.header}>
...(略)...
	<Link className={classes.menuButton} href="">
		<span className={classes.menuButton__item}></span>
		<span className={classes.menuButton__item}></span>
		<span className={classes.menuButton__item}></span>
	</Link>
</header>

今回は、Linkタグに開閉する時にactiveクラスを付与/削除する、ということを実行したい！
そこで、複数クラスを付与するにはどうすればいいのか？を調べました。

対応

今回は、Linkタグがクリックされた時に、Linkタグにactiveクラスを当てます。
cssは下記を追加しました。

// header.module.scss
.menuButton.active .menuButton__item:first-child,
.menuButton.active .menuButton__item:last-child {
    opacity: 0;
}

useState

useStateで開閉状態を取得します。
クリック時に、最初と最後の線を非表示にしたいので、onClickを指定します。

// header.tsx
import classes from "./header.module.scss";
...(略)...
export default function Header() {
  const [navOpen, setNavOpen] = useState(false);
  const toggleNav = () => {
    setNavOpen(!navOpen);
};
  return(
   ...(略)...
   <Link className={classes.menuButton} href="" onClick={toggleNav}>
    <span className={classes.menuButton__item} onClick={toggleNav}></span>
    <span className={classes.menuButton__item}></span>
    <span className={classes.menuButton__item} onClick={toggleNav}></span>
</Link>

半角スペースでつなげる

次に、半角スペースでクラスを繋げると、Linkタグにactiveクラスが付与されました！

ただ、どうしたことか最初と最後の線を非表示にならない...

<Link className={`${classes.menuButton} ${navOpen ? "active" : ""}`} href="" onClick={toggleNav}>
    <span className={classes.menuButton__item} onClick={toggleNav}></span>
    <span className={classes.menuButton__item}></span>
    <span className={classes.menuButton__item} onClick={toggleNav}></span>
</Link>

importしたclassesをつける

header.tsxの最初に、header.module.scssからclassesをimportしていたので、activeではなく、classes.activeとする必要がありました。

以下のように変更したところ、無事表示切り替えが成功！！🎉

// NG
<Link className={`${classes.menuButton} ${navOpen ? "active" : ""}`} href="" onClick={toggleNav}>
// OK
<Link className={`${classes.menuButton} ${navOpen ? `${classes.active}` : ""}`} href="" onClick={toggleNav}>

次回は、メニュー表示までtracingして記事にしようと思います。