React を使用して折りたたみ可能なナビゲーションメニューを作成する方法

サイドバーナビゲーションメニューは通常、リンクの垂直リストで構成されます。 react-router-dom を使用して、React で一連のリンクを作成できます。

次の手順に従って、マテリアル UI アイコンを含むリンクを含む React サイドナビゲーションメニューを作成します。リンクをクリックすると、さまざまなページが表示されます。

React アプリケーションの作成

すでにお持ちの場合 React プロジェクト、次のステップに進んでください。

今日のメイク動画

create-react-app コマンドを使用して、React をすばやく起動して実行できます。すべての依存関係と構成がインストールされます。

次のコマンドを実行して、react-sidenav という React プロジェクトを作成します。

npx create-react-app react-sidenav

これにより、開始するためのいくつかのファイルを含む react-sidenav フォルダーが作成されます。このフォルダーを少しクリーンアップするには、src フォルダーに移動し、App.js の内容を次のように置き換えます。

tumblrブログの作り方

import './App.css'; 
  
function App() { 
  return ( 
    <div className="App"></div> 
  ); 
} 
  
export default App;

作成するナビゲーションコンポーネントは次のようになります。

とてもシンプルですが、完成したら、必要に応じて変更できるはずです。上部の二重矢印アイコンを使用して、ナビゲーションコンポーネントを折りたたむことができます。

折りたたまれていないビューを作成することから始めます。矢印アイコンとは別に、サイドバーにはアイテムのリストが含まれています。これらの各項目には、アイコンといくつかのテキストがあります。各項目の要素を繰り返し作成する代わりに、各項目のデータを配列に格納し、map 関数を使用して反復処理できます。

実際に、lib という名前の新しいフォルダーを作成し、navData.js という名前の新しいファイルを追加します。

import HomeIcon from '@mui/icons-material/Home'; 
import TravelExploreIcon from '@mui/icons-material/TravelExplore'; 
import BarChartIcon from '@mui/icons-material/BarChart'; 
import SettingsIcon from '@mui/icons-material/Settings'; 
  
export const navData = [ 
    { 
        id: 0, 
        icon: <HomeIcon/>, 
        text: "Home", 
        link: "/" 
    }, 
    { 
        id: 1, 
        icon: <TravelExploreIcon/>, 
        text: "Explore", 
        link: "explore" 
    }, 
    { 
        id: 2, 
        icon: <BarChartIcon/>, 
        text: "Statistics", 
        link: "statistics" 
    }, 
    { 
        id: 3, 
        icon: <SettingsIcon/>, 
        text: "Settings", 
        link: "settings" 
    } 
]

上記で使用されているアイコンはマテリアル UI ライブラリからのものであるため、最初に次のコマンドを使用してインストールします。

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material

次に、というフォルダを作成します。 コンポーネント という新しいコンポーネントを追加します Sidenav.js .

このファイルで、../lib から navData をインポートし、 シデナフ 関数：

// In Sidenav.js 
import { navData } from "../lib/navData"; 
export default function Sidenav() { 
  return ( 
    <div> 
    </div> 
  ) 
}

リンクを作成するには、このコンポーネントの div 要素を次のように変更します。

464D2C5E256A2FBCCAAE727DA6DA810AFA9F7EB3

このコンポーネントは、map 関数の反復ごとに、アイコンとリンクテキストを含むナビゲーションリンクを作成します。

ボタン要素は、Material UI ライブラリの左矢印アイコンを保持します。このコードを使用して、コンポーネントの上部にインポートします。

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';

クラス名がスタイルオブジェクトを参照していることにも気づいたかもしれません。これは、このチュートリアルが CSS モジュールを使用しているためです。 CSS モジュールを使用すると、React でローカルスコープのスタイルを作成できます . create-react-app を使用してこのプロジェクトを開始した場合は、何もインストールまたは構成する必要はありません。

Components フォルダーに、新しいファイルを作成します。 sidenav.module.css 以下を追加します。

.sidenav { 
    width: 250px; 
    transition: width 0.3s ease-in-out; 
    height: 100vh; 
    background-color: rgb(10,25,41); 
    padding-top: 28px; 
} 
  
.sidenavd { 
    composes: sidenav; 
    transition: width 0.3s ease-in-out; 
    width: 60px 
} 
  
.sideitem { 
    display: flex; 
    align-items: center; 
    padding: 10px 20px; 
    cursor: pointer; 
    color: #B2BAC2; 
    text-decoration: none; 
} 
  
.linkText { 
    padding-left: 16px; 
} 
  
.linkTextd { 
    composes: linkText; 
    visibility: hidden; 
} 
  
.sideitem:hover { 
    background-color: #244f7d1c; 
} 
  
.menuBtn { 
    align-self: center; 
    align-self: flex-start;   
    justify-self: flex-end; 
    color: #B2BAC2; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding-left: 20px; 
}

React ルーターのセットアップ

map 関数によって返される div 要素はリンクである必要があります。 React では、react-router-dom を使用してリンクとルートを作成できます。

ターミナルで、npm 経由で react-router-dom をインストールします。

npm install react-router-dom@latest

このコマンドは、react-router-dom の最新バージョンをインストールします。

Index.js で、App コンポーネントを Router でラップします。

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import App from './App'; 
import { BrowserRouter } from 'react-router-dom'; 
const root = ReactDOM.createRoot(document.getElementById('root')); 
  
root.render( 
  <React.StrictMode> 
    <BrowserRouter> 
	    <App /> 
    </BrowserRouter> 
  </React.StrictMode> 
);

次に、App.js でルートを追加します。

import { 
  BrowserRouter, 
  Routes, 
  Route, 
} from "react-router-dom"; 
  
import './App.css'; 
import Sidenav from './Components/Sidenav'; 
import Explore from "./Pages/Explore"; 
import Home from "./Pages/Home"; 
import Settings from "./Pages/Settings"; 
import Statistics from "./Pages/Statistics"; 
  
function App() { 
  return ( 
    <div className="App"> 
      <Sidenav/> 
      <main> 
        <Routes> 
          <Route  path="/" element={<Home />}/> 
          <Route path="/explore" element={<Explore />} /> 
          <Route path="/statistics" element={<Statistics />}/> 
          <Route path="/settings" element={<Settings />} /> 
        </Routes> 
      </main> 
    </div> 
  ); 
} 
export default App;

これらのスタイルで App.css を変更します。

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 10px; 
}

各ルートは、渡された URL に応じて異なるページを返します。パス小道具 . Pages という名前の新しいフォルダーを作成し、ホーム、探索、統計、および設定ページの 4 つのコンポーネントを追加します。次に例を示します。

export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
}

/home パスにアクセスすると、「ホーム」が表示されます。

サイドバーのリンクをクリックすると、対応するページに移動する必要があります。 Sidenav.js で、map 関数を変更して、div 要素の代わりに react-router-dom の NavLink コンポーネントを使用します。

{navData.map(item => { 
    return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
               {item.icon} 
               <span className={styles.linkText}>{item.text}</span> 
           </NavLink> 
})}

ファイルの先頭にある NavLink を忘れずにインポートしてください。

import { NavLink } from "react-router-dom";

NavLink は to プロパティを介してリンクの URL パスを受け取ります。

この時点まで、ナビゲーションバーは開いています。折りたたみ可能にするには、ユーザーが矢印ボタンをクリックしたときに CSS クラスを変更して、幅を切り替えることができます。その後、CSS クラスを再度変更して開くことができます。

このトグル機能を実現するには、サイドバーが開いているときと閉じているときを知る必要があります。

これには、useState フックを使用します。これ反応フック機能コンポーネントに状態を追加して追跡できます。

sideNav.js で、open 状態のフックを作成します。

const [open, setopen] = useState(true)

開いている状態を true に初期化して、アプリケーションの起動時にサイドバーが常に開いているようにします。

次に、この状態を切り替える関数を作成します。

const toggleOpen = () => { 
    setopen(!open) 
}

open 値を使用して、次のような動的 CSS クラスを作成できるようになりました。

<div className={open?styles.sidenav:styles.sidenavd}> 
    <button className={styles.menuBtn} onClick={toggleOpen}> 
            {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />} 
    </button> 
    {navData.map(item =>{ 
        return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
                  {item.icon} 
                   <span className={open?styles.linkText:styles.linkTextd}>{item.text}</span> 
               </NavLink> 
     })} 
</div>

使用される CSS クラス名は、開いている状態によって決まります。たとえば、open が true の場合、外側の div 要素には sidenav クラス名が含まれます。それ以外の場合、クラスは sidenavd になります。

アイコンも同様で、サイドバーを閉じると右矢印アイコンに変わります。

インポートすることを忘れないでください。

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';

サイドバーコンポーネントが折りたたみ可能になりました。

これから完全なコードを取得します GitHub リポジトリそして自分で試してみてください。

React コンポーネントのスタイリング

React を使用すると、折りたたみ可能なナビゲーションコンポーネントを簡単に作成できます。 React が提供するいくつかのツール (react-router-dom など) を使用してルーティングを処理し、フックを使用して折りたたまれた状態を追跡できます。

必須ではありませんが、CSS モジュールを使用してコンポーネントのスタイルを設定することもできます。それらを使用して、一意であり、使用されていない場合にバンドルファイルからシェイクできる、ローカルスコープのクラスを作成します。

React を使用して折りたたみ可能なナビゲーションメニューを作成する方法

React アプリケーションの作成

ナビゲーションコンポーネントの作成

React ルーターのセットアップ

ナビゲーションリンクの変更

React コンポーネントのスタイリング

React アプリケーションの作成

ナビゲーション コンポーネントの作成

React ルーターのセットアップ

ナビゲーション リンクの変更

React コンポーネントのスタイリング

ナビゲーションコンポーネントの作成

ナビゲーションリンクの変更