Cách tạo Menu điều hướng có thể thu gọn bằng React

Cách tạo Menu điều hướng có thể thu gọn bằng React

Một menu điều hướng thanh bên thường bao gồm một danh sách các liên kết theo chiều dọc. Bạn có thể tạo một tập hợp các liên kết trong React bằng cách sử dụng react-router-dom.





Làm theo các bước sau để tạo menu điều hướng bên React với các liên kết chứa các biểu tượng giao diện người dùng vật liệu. Các liên kết sẽ hiển thị các trang khác nhau khi bạn nhấp vào chúng.



Tạo một ứng dụng React

Nếu bạn đã có một Dự án phản ứng , vui lòng bỏ qua bước tiếp theo.





nhạc phim trò chơi điện tử hay nhất để học
LÀM VIDEO TRONG NGÀY

Bạn có thể sử dụng lệnh create-react-app để bắt đầu và chạy React một cách nhanh chóng. Nó cài đặt tất cả các phụ thuộc và cấu hình cho bạn.

Chạy lệnh sau để tạo một dự án React có tên là react-sidenav.



npx create-react-app react-sidenav

Thao tác này sẽ tạo một thư mục react-sidenav với một số tệp để bạn bắt đầu. Để dọn dẹp thư mục này một chút, hãy điều hướng đến thư mục src và thay thế nội dung của App.js bằng:

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

Tạo thành phần điều hướng

Thành phần điều hướng bạn sẽ tạo sẽ giống như sau:



Chế độ xem không thu gọn của menu điều hướng React

Nó khá đơn giản, nhưng sau khi hoàn thành, bạn sẽ có thể sửa đổi nó cho phù hợp với nhu cầu của mình. Bạn có thể thu gọn thành phần điều hướng bằng biểu tượng mũi tên kép ở trên cùng:

Chế độ xem thu gọn của menu điều hướng React

Bắt đầu bằng cách tạo chế độ xem không thu gọn. Ngoài biểu tượng mũi tên, thanh bên còn chứa danh sách các mục. Mỗi mục này có một biểu tượng và một số văn bản. Thay vì tạo lặp đi lặp lại một phần tử cho mỗi mục, bạn có thể lưu trữ dữ liệu cho từng mục trong một mảng và sau đó lặp lại nó bằng cách sử dụng một hàm bản đồ.



Để chứng minh, hãy tạo một thư mục mới có tên lib và thêm một tệp mới có tên 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" 
    } 
]

Các biểu tượng được sử dụng ở trên là từ thư viện Material UI, vì vậy hãy cài đặt nó trước bằng lệnh sau:

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

Tiếp theo, tạo một thư mục có tên Các thành phần và thêm một thành phần mới được gọi là Sidenav.js .

Trong tệp này, nhập navData từ ../lib và tạo khung cho Sidenav hàm số:

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

Để tạo các liên kết, hãy sửa đổi phần tử div trong thành phần này thành:

<div> 
    <button className={styles.menuBtn}> 
        <KeyboardDoubleArrowLeftIcon /> 
    </button> 
    {navData.map(item =>{ 
        return <div key={item.id} className={styles.sideitem}> 
	                {item.icon} 
	                <span className={styles.linkText}>{item.text}</span> 
		       </div> 
        })} 
 </div>

Thành phần này tạo một liên kết điều hướng có chứa biểu tượng và văn bản liên kết cho mỗi lần lặp lại trong chức năng bản đồ.

Phần tử nút giữ biểu tượng mũi tên trái từ thư viện Material UI. Nhập nó ở đầu thành phần bằng cách sử dụng mã này.

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

Bạn cũng có thể nhận thấy rằng các tên lớp tham chiếu đến một đối tượng kiểu. Điều này là do hướng dẫn này sử dụng mô-đun CSS. Các mô-đun CSS cho phép bạn tạo các kiểu phạm vi cục bộ trong React . Bạn không cần cài đặt hoặc định cấu hình bất kỳ thứ gì nếu bạn đã sử dụng ứng dụng create-react để bắt đầu dự án này.

Trong thư mục Thành phần, tạo một tệp mới có tên sidenav.module.css và thêm những thứ sau:

.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; 
}

Thiết lập bộ định tuyến React

Các phần tử div được trả về bởi hàm bản đồ phải là các liên kết. Trong React, bạn có thể tạo liên kết và định tuyến bằng cách sử dụng react-router-dom.

Trong thiết bị đầu cuối, cài đặt react-router-dom qua npm.

npm install react-router-dom@latest

Lệnh này cài đặt phiên bản mới nhất của react-router-dom.

Trong Index.js, bọc thành phần Ứng dụng với Bộ định tuyến.

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> 
);

Tiếp theo, trong App.js, hãy thêm các tuyến đường của bạn.

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;

Sửa đổi App.css với các kiểu này.

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

Mỗi tuyến đường trả về một trang khác nhau tùy thuộc vào URL được chuyển đến đạo cụ đường dẫn . Tạo một thư mục mới có tên là Pages và thêm bốn thành phần - trang Trang chủ, Khám phá, Thống kê và Cài đặt. Đây là một ví dụ:

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

Nếu bạn truy cập đường dẫn / home, bạn sẽ thấy 'Trang chủ'.

Các liên kết trong thanh bên phải dẫn đến trang phù hợp khi bạn nhấp vào chúng. Trong Sidenav.js, sửa đổi chức năng bản đồ để sử dụng thành phần NavLink từ react-router-dom thay vì phần tử div.

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

Hãy nhớ nhập NavLink ở đầu tệp.

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

NavLink nhận đường dẫn URL cho liên kết thông qua to prop.

Cho đến thời điểm này, thanh điều hướng đã mở. Để làm cho nó có thể thu gọn, bạn có thể chuyển đổi chiều rộng của nó bằng cách thay đổi lớp CSS khi người dùng nhấp vào nút mũi tên. Sau đó, bạn có thể thay đổi lại lớp CSS để mở nó.

Để đạt được chức năng bật tắt này, bạn cần biết khi nào thanh bên mở và đóng.

Đối với điều này, hãy sử dụng hook useState. Đây Phản ứng móc cho phép bạn thêm và theo dõi trạng thái trong một thành phần chức năng.

Trong sideNav.js, tạo hook cho trạng thái mở.

const [open, setopen] = useState(true)

Khởi tạo trạng thái mở thành true, vì vậy thanh bên sẽ luôn mở khi bạn khởi động ứng dụng.

Tiếp theo, tạo hàm sẽ chuyển trạng thái này.

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

Bây giờ bạn có thể sử dụng giá trị mở để tạo các lớp CSS động như sau:

<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>

Tên lớp CSS được sử dụng sẽ được xác định bởi trạng thái mở. Ví dụ: nếu open là true, phần tử div bên ngoài sẽ có tên lớp sidenav. Nếu không, lớp sẽ là sidenavd.

Điều này cũng tương tự đối với biểu tượng, biểu tượng này sẽ thay đổi thành biểu tượng mũi tên phải khi bạn đóng thanh bên.

Hãy nhớ nhập nó.

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

Thành phần thanh bên hiện có thể thu gọn.

Lấy mã hoàn chỉnh từ này Kho lưu trữ GitHub và tự mình thử.

Các thành phần tạo kiểu phản ứng

React giúp bạn dễ dàng xây dựng một thành phần điều hướng có thể thu gọn. Bạn có thể sử dụng một số công cụ mà React cung cấp như react-router-dom để xử lý định tuyến và hook để theo dõi trạng thái đã thu gọn.

Bạn cũng có thể sử dụng các mô-đun CSS để tạo kiểu cho các thành phần, mặc dù bạn không cần phải làm như vậy. Sử dụng chúng để tạo các lớp có phạm vi cục bộ là duy nhất và bạn có thể tách khỏi các tệp gói nếu chúng không được sử dụng.