Chakra UIを使ったナビゲーションバーの作り方

1. Chakra UIのインストール: まず、Chakra UIをインストールします。以下のコマンドを使用して、プロジェクトにChakra UIを追加します。

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

または、Yarnを使用してインストールする場合は、次のコマンドを使用します。

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. ナビゲーションバーコンポーネントの作成: 次に、Navbar.jsなどの新しいファイルを作成し、以下のようなコードを追加します。

import React from 'react';
import { Box, Flex, Heading, Spacer } from '@chakra-ui/react';
function Navbar() {
  return (
    <Box bg="teal.500" p={4} color="white">
      <Flex alignItems="center">
        <Heading size="md">My Website</Heading>
        <Spacer />
        {/* ここにナビゲーションリンクを追加 */}
      </Flex>
    </Box>
  );
}
export default Navbar;

3. ナビゲーションリンクの追加: ナビゲーションバーには、通常、ホーム、サービス、ブログなどのリンクが含まれます。Navbar.jsファイルの適切な場所に、以下のようなコードを追加して、ナビゲーションリンクを作成します。

import React from 'react';
import { Box, Flex, Heading, Spacer, Link } from '@chakra-ui/react';
import { NavLink } from 'react-router-dom'; // ルーティングが必要な場合
function Navbar() {
  return (
    <Box bg="teal.500" p={4} color="white">
      <Flex alignItems="center">
        <Heading size="md">My Website</Heading>
        <Spacer />
        <Link as={NavLink} exact to="/" mr={4}>ホーム</Link>
        <Link as={NavLink} to="/services" mr={4}>サービス</Link>
        <Link as={NavLink} to="/blog">ブログ</Link>
      </Flex>
    </Box>
  );
}
export default Navbar;

4. ナビゲーションバーの使用: ナビゲーションバーを使用するためには、該当するコンポーネントでNavbarコンポーネントをインポートし、レンダリングします。

import React from 'react';
import Navbar from './Navbar';
function App() {
  return (
    <div>
      <Navbar />
      {/* 他のコンテンツ */}
    </div>
  );
}
export default App;

これで、Chakra UIを使用してシンプルなナビゲーションバーを作成することができます。必要に応じて、スタイルやリンクのルーティングをカスタマイズすることもできます。