【React】Flowbite ReactのNavbarを使用してヘッダーを実装してみる

## 概要
[Flowbite React](https://www.flowbite-react.com/)は、tailwindベースのUIライブラリである`Flowbite`を、Reactのコンポーネントとして使用できるものです。
画面のヘッダーを実装する際に使えるコンポーネントとして[Navbar](https://www.flowbite-react.com/docs/components/navbar)というものがあるのですが、これは画面幅が広い時はメニューを表示して狭い時はハンバーガーメニューにしてくれる便利なものです。
今回はこのNavbarを試しに使用してみましたので、少し紹介します。

## 前提
* 使用したFlowbite Reactのバージョンは`0.6.0`です。

## 実装したもの
以下のイメージにある通り、背景色ヘッダーメニューの背景色を変更して、上部に固定するよう調整するものを実装しました。

<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/e436c20d-ca9a-54e8-9533-46054da73a3e.png" />

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/7a890e3e-c5f9-7319-58d1-47c2c081bc65.png" />


## 実装サンプル

```react
"use client";

import React, { FC, ReactNode } from "react";

import { FlowbiteNavbarRootTheme, Navbar } from "flowbite-react";
import { FlowbiteNavbarLinkTheme } from "flowbite-react/lib/esm/components/Navbar/NavbarLink";

type Props = {
  children: ReactNode;
};

export const HeaderComponent: FC<Props> = ({ children }) => {
  // ヘッダーを固定にするためにfixedを付与するのと背景色を調整
  const customNavRootTheme: FlowbiteNavbarRootTheme = {
    base: "fixed bg-cyan-100 px-2 py-2.5 dark:border-gray-700 dark:bg-gray-800 sm:px-4 w-full z-50",
    rounded: {
      on: "rounded",
      off: "",
    },
    bordered: {
      on: "border",
      off: "",
    },
    inner: {
      base: "mx-auto flex flex-wrap items-center justify-between",
      fluid: {
        on: "",
        off: "container",
      },
    },
  };

  // メニューの背景色を調整
  const customLinkTheme: FlowbiteNavbarLinkTheme = {
    base: "block py-2 pr-4 pl-3 text-lg",
    active: {
      on: "bg-cyan-100 text-black dark:text-white hover:bg-blue-200",
      off: "bg-cyan-100",
    },
    disabled: {
      on: "text-gray-400 hover:cursor-not-allowed dark:text-gray-600",
      off: "",
    },
  };

  const topMenu = (
    <Navbar.Link active href="/" theme={customLinkTheme}>
      <p>Top</p>
    </Navbar.Link>
  );
  const userAccountLogoutMenu = (
    <Navbar.Link active href="/userAccountLogout" theme={customLinkTheme}>
      <p>ログアウト</p>
    </Navbar.Link>
  );
  const userAccountRefMenu = (
    <Navbar.Link active href="/userAccountRef" theme={customLinkTheme}>
      <p>ユーザー情報</p>
    </Navbar.Link>
  );

  return (
    <>
      <Navbar fluid rounded theme={customNavRootTheme}>
        <Navbar.Brand href="/">
          <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
            ヘッダーテスト
          </span>
        </Navbar.Brand>
        <div className="flex md:order-2">
          {/*ログインしてるユーザのアイコン*/}
          <svg
            className="w-[37px] h-[37px] text-gray-800 dark:text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 14 18"
          >
            <path d="M7 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm2 1H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
          </svg>
        </div>
        {/*画面幅が小さい場合のハンバーガーメニュー*/}
        <Navbar.Toggle />
        {/*メニューの設定*/}
        <Navbar.Collapse>
          {topMenu}
          {userAccountRefMenu}
          {userAccountLogoutMenu}
        </Navbar.Collapse>
      </Navbar>
      <div className="pt-20">{children}</div>
    </>
  );
};
```