ナビゲーションメニューの切替

ユーザーコンテクストを使用して、ナビゲーションメニューが切り替わるように実装します。

ナビゲーションメニュー切替処理の実装

NavigationHeaderコンポーネントにナビゲーションメニューの切替処理を実装します。

src/components/navigation-header/NavigationHeader.tsx

'use client';
import React from 'react';
import styles from './NavigationHeader.module.css';
import Link from 'next/link';
import {useUserContext} from '../../contexts/UserContext';

export const NavigationHeader: React.FC = () => {
  const userContext = useUserContext();

  const logout = async () => {
    window.location.href = '/';
  };

  return (
    <header className={styles.header}>
      <h1 className={styles.title}>ToDoアプリ</h1>
      <nav>
        <ul className={styles.nav}>
          {userContext.isLoggedIn ? (
            <React.Fragment>
              <li>{userContext.userName}さん</li>
              <li>
                <button type='button' onClick={logout}>
                  ログアウト
                </button>
              </li>
            </React.Fragment>
          ) : (
            <li>
              <Link href='/login'>ログイン</Link>
            </li>
          )}
        </ul>
      </nav>
    </header>
  );
};

ユーザーコンテクストは前章で作成したuseUserContextで取得します。ユーザーコンテクストからログイン済みであるかを取得し、その状態によりメニューを切り替えます。

動作確認

単体での動作確認がしづらいため、最後にまとめて動作を確認します。