Reactで簡単に実装できるハンバーガーメニューの作り方

Reactを使ってウェブサイトを作るとき、ハンバーガーメニューの実装は避けては通れません。しかし、CSSだけで実装するとなると、少し手間がかかります。そこで、Reactを使って簡単に実装する方法を紹介します。

まず、ハンバーガーメニューのアイコンを表示するために、react-iconsライブラリをインストールします。

npm install react-icons

次に、ハンバーガーメニューのアイコンを作成します。

import { FaBars } from "react-icons/fa";

const HamburgerIcon = () => {
  return <FaBars />;
};

export default HamburgerIcon;

これで、ハンバーガーメニューのアイコンが表示できるようになりました。

次に、ハンバーガーメニューを開閉するためのコンポーネントを作成します。

import { useState } from "react";
import HamburgerIcon from "./HamburgerIcon";

const HamburgerMenu = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleClick = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="hamburger-menu">
      <button className="hamburger-icon" onClick={handleClick}>
        <HamburgerIcon />
      </button>
      {isOpen && (
        <div className="menu-items">
          <a href="#">Menu Item 1</a>
          <a href="#">Menu Item 2</a>
          <a href="#">Menu Item 3</a>
        </div>
      )}
    </div>
  );
};

export default HamburgerMenu;

このコンポーネントでは、useStateフックを使用して、メニューが開いているかどうかを管理しています。ボタンをクリックすると、isOpenの値がトグルされます。

また、ハンバーガーメニューが開いている場合にのみ、メニュー項目が表示されるようにしています。

最後に、CSSを追加して、見た目を整えます。

.hamburger-menu {
  position: relative;
  z-index: 1;
}

.hamburger-icon {
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.menu-items {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  width: 100%;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

これで、簡単にReactでハンバーガーメニューを実装することができました
。この方法を使えば、CSSだけで実装するよりも、コードがシンプルになります。また、useStateフックを使った状態管理の方法を学ぶこともできます。

最後に、このコンポーネントを使用する方法を紹介します。

import HamburgerMenu from "./HamburgerMenu";

const App = () => {
  return (
    <div>
      <header>
        <nav>
          <HamburgerMenu />
        </nav>
      </header>
      <main>
        <h1>Hello, world!</h1>
        <p>This is a sample React app.</p>
      </main>
    </div>
  );
};

export default App;

これで、Reactのアプリケーションで簡単にハンバーガーメニューを実装することができます。この方法を使って、あなたのReactアプリケーションにハンバーガーメニューを追加してみてください。