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

Меню навигации боковой панели обычно состоит из вертикального списка ссылок. Вы можете создать набор ссылок в React, используя react-router-dom.

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

Создание React-приложения

Если у вас уже есть Реагировать на проект , смело переходите к следующему шагу.

СДЕЛАТЬ ВИДЕО ДНЯ

Вы можете использовать команду create-react-app, чтобы быстро приступить к работе с React. Он устанавливает все зависимости и конфигурацию для вас.

Выполните следующую команду, чтобы создать проект React с именем react-sidenav.

31А3690Б89БФ46053Д334812ЭББ1ДД1778ДФБАФ1

Это создаст папку react-sidenav с некоторыми файлами, которые помогут вам начать работу. Чтобы немного очистить эту папку, перейдите в папку src и замените содержимое App.js следующим:

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

Навигационный компонент, который вы создадите, будет выглядеть следующим образом:

Это довольно просто, но как только вы закончите, вы сможете изменить его в соответствии со своими потребностями. Вы можете свернуть компонент навигации, используя значок двойной стрелки вверху:

Начните с создания несвернутого представления. Помимо значка стрелки, боковая панель содержит список элементов. Каждый из этих элементов имеет значок и некоторый текст. Вместо того, чтобы повторно создавать элемент для каждого, вы можете хранить данные для каждого элемента в массиве, а затем перебирать его, используя функцию карты.

Для демонстрации создайте новую папку с именем 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" 
    } 
]

Значки, используемые выше, взяты из библиотеки пользовательского интерфейса материалов, поэтому сначала установите ее с помощью этой команды:

как изменить свое имя в Steam

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

Далее создайте папку с именем Составные части и добавьте новый компонент с именем Sidenav.js .

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

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

Этот компонент создает навигационную ссылку, содержащую значок и текст ссылки для каждой итерации в функции карты.

Элемент кнопки содержит значок со стрелкой влево из библиотеки пользовательского интерфейса материалов. Импортируйте его вверху компонента, используя этот код.

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

Элементы div, возвращаемые функцией карты, должны быть ссылками. В 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-адреса, переданного в путь реквизит . Создайте новую папку под названием «Страницы» и добавьте четыре компонента — страницу «Главная», «Обзор», «Статистика» и «Настройки». Вот пример:

6А793АА95ЭД66024ФББФ346Ф36Б202858037Э2Б9

Если вы перейдете по пути /home, вы должны увидеть «Домой».

Ссылки на боковой панели должны вести на соответствующую страницу при нажатии на них. В Sidenav.js измените функцию карты, чтобы использовать компонент 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.

До этого момента панель навигации открыта. Чтобы сделать его складным, вы можете изменить его ширину, изменив класс CSS, когда пользователь нажимает кнопку со стрелкой. Затем вы можете снова изменить класс CSS, чтобы открыть его.

Чтобы реализовать эту функцию переключения, вам нужно знать, когда боковая панель открыта и закрыта.

Для этого используйте хук useState. Этот Реагировать крючок позволяет добавлять и отслеживать состояние функционального компонента.

В sideNav.js создайте хук для открытого состояния.

EA51AEF81376372D47EFFCFC1E3FE8A9369CDDFB6

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

Затем создайте функцию, которая будет переключать это состояние.

А6Д959027917Ф61Е4ДАФ69Д45050927Е4Ф10ФФ9Б

Теперь вы можете использовать значение 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. В противном случае класс будет сиденавд.

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

Не забудьте импортировать его.

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

Компонент боковой панели теперь можно свернуть.

почему карты google перестают работать

Возьмите полный код отсюда Репозиторий GitHub и попробуйте сами.

Стилизация компонентов React

React упрощает создание складного навигационного компонента. Вы можете использовать некоторые инструменты, предоставляемые React, такие как react-router-dom, для обработки маршрутизации и перехватчиков, чтобы отслеживать свернутое состояние.

Вы также можете использовать модули CSS для стилизации компонентов, хотя это и не обязательно. Используйте их для создания уникальных классов с локальной областью действия, которые можно извлечь из файлов пакетов, если они не используются.

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

Создание React-приложения

Создание компонента навигации

Настройка маршрутизатора React

Изменение навигационных ссылок

Стилизация компонентов React