Jak stworzyć składane menu nawigacyjne za pomocą React

Jak stworzyć składane menu nawigacyjne za pomocą React

Menu nawigacyjne paska bocznego zazwyczaj składa się z pionowej listy linków. Możesz utworzyć zestaw linków w React za pomocą React-router-dom.





Wykonaj poniższe czynności, aby utworzyć boczne menu nawigacyjne React z linkami zawierającymi ikony interfejsu materiałów. Po kliknięciu łącza będą renderować różne strony.





Tworzenie aplikacji React

Jeśli masz już Reaguj projekt , możesz przejść do następnego kroku.





MAKEUSEOF WIDEO DNIA

Możesz użyć polecenia create-react-app, aby szybko rozpocząć pracę z Reactem. Instaluje dla Ciebie wszystkie zależności i konfigurację.

Uruchom następujące polecenie, aby utworzyć projekt React o nazwie React-sidenav.



npx create-react-app react-sidenav 

Spowoduje to utworzenie folderu React-sidenav z kilkoma plikami, aby rozpocząć. Aby trochę wyczyścić ten folder, przejdź do folderu src i zastąp zawartość App.js następującym:

import './App.css'; 

function App() {
return (
<div className="App"></div>
);
}

export default App;

Tworzenie komponentu nawigacyjnego

Komponent nawigacyjny, który utworzysz, będzie wyglądał tak:





  Niezwinięty widok menu nawigacyjnego React

Jest to dość proste, ale kiedy skończysz, powinieneś być w stanie zmodyfikować go do swoich potrzeb. Możesz zwinąć komponent nawigacji, używając ikony podwójnej strzałki u góry:

  Zwinięty widok menu nawigacyjnego React

Zacznij od utworzenia niezwiniętego widoku. Oprócz ikony strzałki pasek boczny zawiera listę elementów. Każdy z tych elementów ma ikonę i trochę tekstu. Zamiast powtarzać tworzenie elementu dla każdego elementu, możesz przechowywać dane dla każdego elementu w tablicy, a następnie iterować nad nim za pomocą funkcji mapowania.





Aby to zademonstrować, utwórz nowy folder o nazwie lib i dodaj nowy plik o nazwie 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"
}
]

Ikony użyte powyżej pochodzą z biblioteki Material UI, więc zainstaluj ją najpierw za pomocą tego polecenia:

oglądaj filmy kinowe online za darmo w dobrej jakości
npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material

Następnie utwórz folder o nazwie składniki i dodaj nowy komponent o nazwie Sidenav.js .

W tym pliku zaimportuj navData z ../lib i utwórz szkielet dla Sidenav funkcjonować:

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

Aby utworzyć łącza, zmień element div w tym komponencie na:

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

Ten komponent tworzy łącze nawigacyjne zawierające ikonę i tekst łącza dla każdej iteracji funkcji mapy.

Element przycisku zawiera ikonę strzałki w lewo z biblioteki interfejsu użytkownika materiałów. Zaimportuj go u góry komponentu za pomocą tego kodu.

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

Mogłeś również zauważyć, że nazwy klas odwołują się do obiektu stylów. Dzieje się tak, ponieważ ten samouczek używa modułów CSS. Moduły CSS umożliwiają tworzenie stylów o zasięgu lokalnym w React . Nie musisz niczego instalować ani konfigurować, jeśli użyłeś create-react-app do uruchomienia tego projektu.

W folderze Components utwórz nowy plik o nazwie sidenav.module.css i dodaj następujące:

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

Konfigurowanie routera React

Elementy div zwracane przez funkcję map powinny być linkami. W Reakcie możesz tworzyć łącza i trasy za pomocą React-router-dom.

W terminalu zainstaluj react-router-dom przez npm.

npm install react-router-dom@latest 

To polecenie instaluje najnowszą wersję programu React-router-dom.

W Index.js opakuj komponent App z routerem.

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

Następnie w App.js dodaj swoje trasy.

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;

Zmodyfikuj App.css za pomocą tych stylów.

body { 
margin: 0;
padding: 0;
}

.App {
display: flex;
}

main {
padding: 10px;
}

Każda trasa zwraca inną stronę w zależności od adresu URL przekazanego do rekwizyty ścieżki . Utwórz nowy folder o nazwie Strony i dodaj cztery składniki — Strona główna, Eksploruj, Statystyki i Ustawienia. Oto przykład:

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

Jeśli odwiedzasz ścieżkę /home, powinieneś zobaczyć 'Dom'.

Po kliknięciu łącza na pasku bocznym powinny prowadzić do pasującej strony. W Sidenav.js zmodyfikuj funkcję mapy tak, aby używała komponentu NavLink z reakcji-router-dom zamiast elementu 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>
})}

Pamiętaj, aby zaimportować NavLink na górze pliku.

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

NavLink otrzymuje ścieżkę URL dla łącza za pośrednictwem to prop.

Do tego momentu pasek nawigacyjny jest otwarty. Aby był zwijany, możesz przełączać jego szerokość, zmieniając klasę CSS, gdy użytkownik kliknie przycisk strzałki. Następnie możesz ponownie zmienić klasę CSS, aby ją otworzyć.

Aby osiągnąć tę funkcję przełączania, musisz wiedzieć, kiedy pasek boczny jest otwarty, a kiedy zamknięty.

W tym celu użyj haka useState. Ten Reaguj hak umożliwia dodawanie i śledzenie stanu w funkcjonalnym komponencie.

W sideNav.js utwórz zaczep dla stanu otwartego.

const [open, setopen] = useState(true) 

Zainicjuj stan otwarty na true, aby pasek boczny był zawsze otwarty po uruchomieniu aplikacji.

Następnie utwórz funkcję, która będzie przełączać ten stan.

jak zrobić filtr na snapchacie
const toggleOpen = () => { 
setopen(!open)
}

Możesz teraz użyć wartości open do tworzenia dynamicznych klas CSS w następujący sposób:

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

Używane nazwy klas CSS będą określone przez stan otwarty. Na przykład, jeśli open ma wartość true, zewnętrzny element div będzie miał nazwę klasy sidenav. W przeciwnym razie klasa będzie sidenavd.

To samo dotyczy ikony, która po zamknięciu paska bocznego zmienia się w ikonę strzałki w prawo.

Pamiętaj, aby go zaimportować.

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

Komponent paska bocznego jest teraz zwijany.

Pobierz cały kod z tego Repozytorium GitHub i spróbuj sam.

Stylizacja komponentów React

React ułatwia budowanie zwijanego komponentu nawigacyjnego. Możesz użyć niektórych narzędzi, które zapewnia React, takich jak reakcja-router-dom do obsługi routingu i hooków do śledzenia stanu zwiniętego.

Możesz także użyć modułów CSS do stylizacji komponentów, chociaż nie musisz. Używaj ich do tworzenia klas o zasięgu lokalnym, które są unikalne i które można wyrzucić z plików pakunków, jeśli nie są używane.