imdb clone Part9 7 navbar実装 2/2 hover処理追加 開いているNavの下線部をハイライト

概要

目次

今回はナビゲーションバーの選択しているNavにハイライトが入るよう実装します。
下gifアニメは実装後にアイテムを切り替えている様子です。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

ハイライトを実装するには現在のURLのパラメーターとコンポーネントのパラメーター比較してcssの切り替えをできるようにします。
例えばTrendingを選択している場合
Trendingのコンポーネントはgenreとparamが一致しているのでハイライトのcssは反映されます。

一方でTopRatedのコンポーネントはgenreとparamが値不一致しておりハイライトのcssは施されません。

コード部分

NavbarItem

NavbarItem.jsx

+"use client"

import React from 'react'
import Link from "next/link";
import { useSearchParams } from "next/navigation";

export default function NavbarItem({title,param}) {

+    const searchParams = useSearchParams();
+    const genre = searchParams.get("genre");

-  return (
-    <div className={`font-semibold p-2`}>
+    return (
+    <div className={`m-4 hover:text-amber-600 font-semibold p-2 ${
+        genre &&
+        genre === param &&
+        "underline underline-offeset-8 decoration-4 decoration-amber-500 rounded-lg"
+    }`}>
           <Link href={`/?genre=${param}`}>
                {title}
           </Link>    
    </div>
  )
}

参考

useSearchParam

その他

Udemy

githubコミット分