Как да създадете сгъваемо навигационно меню с помощта на React

Менюто за навигация в страничната лента обикновено се състои от вертикален списък с връзки. Можете да създадете набор от връзки в React с помощта на react-router-dom.

Следвайте тези стъпки, за да създадете странично навигационно меню на React с връзки, съдържащи материални икони на потребителския интерфейс. Връзките ще изобразяват различни страници, когато щракнете върху тях.

Създаване на React приложение

Ако вече имате a Проект React , не се колебайте да преминете към следващата стъпка.

MAKEUSEOF ВИДЕО НА ДЕНЯ

Можете да използвате командата create-react-app, за да започнете бързо да работите с React. Той инсталира всички зависимости и конфигурация вместо вас.

Изпълнете следната команда, за да създадете проект на React, наречен react-sidenav.

npx create-react-app react-sidenav

Това ще създаде папка react-sidenav с някои файлове, за да започнете. За да почистите малко тази папка, отидете до папката src и заменете съдържанието на App.js с това:

сензорният екран на лаптопа не работи

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

Навигационният компонент, който ще създадете, ще изглежда така:

Несвит изглед на навигационното меню на React

Това е доста просто, но след като приключите, трябва да можете да го промените, за да отговаря на вашите нужди. Можете да свиете навигационния компонент, като използвате иконата с двойна стрелка в горната част:

Свит изглед на навигационното меню на React

Започнете със създаване на несвит изглед. Освен иконата със стрелка, страничната лента съдържа списък с елементи. Всеки от тези елементи има икона и някакъв текст. Вместо многократно да създавате елемент за всеки, можете да съхранявате данните за всеки елемент в масив и след това да го обхождате с помощта на функция за карта.

За да демонстрирате, създайте нова папка, наречена 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" 
    } 
]

Иконите, използвани по-горе, са от библиотеката Material UI, така че първо я инсталирайте, като използвате тази команда:

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

След това създайте папка, наречена Компоненти и добавете нов компонент, наречен Sidenav.js .

В този файл импортирайте navData от ../lib и създайте скелета за Sidenav функция:

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

За да създадете връзките, променете елемента div в този компонент на следното:

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

Този компонент създава навигационна връзка, съдържаща иконата и текста на връзката за всяка итерация във функцията за карта.

Елементът на бутона държи иконата със стрелка наляво от библиотеката 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 Router

Елементите div, върнати от функцията map, трябва да бъдат връзки. В React можете да създавате връзки и маршрути с помощта на react-router-dom.

В терминала инсталирайте react-router-dom чрез npm.

npm install react-router-dom@latest

Тази команда инсталира най-новата версия на react-router-dom.

В Index.js обвийте компонента на приложението с рутера.

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 адреса, подаден на подпори за път . Създайте нова папка, наречена „Страници“, и добавете четири компонента — страницата „Начало“, „Изследване“, „Статистика“ и „Настройки“. Ето един пример:

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

Ако посетите пътеката /home, трябва да видите „Начало“.

Връзките в страничната лента трябва да водят до съответната страница, когато щракнете върху тях. В Sidenav.js променете функцията map, за да използвате компонента NavLink от react-router-dom вместо елемента 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> 
})}

Не забравяйте да импортирате NavLink в горната част на файла.

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

NavLink получава URL пътя за връзката през to prop.

До този момент лентата за навигация е отворена. За да го направите сгъваем, можете да превключите ширината му, като промените CSS класа, когато потребител щракне върху бутона със стрелка. След това можете отново да промените CSS класа, за да го отворите.

За да постигнете тази функция за превключване, трябва да знаете кога страничната лента е отворена и затворена.

За целта използвайте куката useState. Това Реагирайте куката ви позволява да добавяте и проследявате състоянието във функционален компонент.

В sideNav.js създайте куката за отворено състояние.

const [open, setopen] = useState(true)

Инициализирайте отвореното състояние на true, така че страничната лента винаги да бъде отворена, когато стартирате приложението.

След това създайте функцията, която ще превключва това състояние.

const toggleOpen = () => { 
    setopen(!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 Router

Промяна на връзките за навигация

Оформяне на React компоненти