Sådan opretter du en sammenklappelig navigationsmenu ved hjælp af React

Sådan opretter du en sammenklappelig navigationsmenu ved hjælp af React

En sidebar navigationsmenu består typisk af en lodret liste over links. Du kan oprette et sæt links i React ved hjælp af react-router-dom.





Følg disse trin for at oprette en React-sidenavigationsmenu med links, der indeholder materiale-UI-ikoner. Linkene vil gengive forskellige sider, når du klikker på dem.



Oprettelse af en React-applikation

Hvis du allerede har en Reager projekt , gå gerne videre til næste trin.





MAKEUSE AF DAGENS VIDEO

Du kan bruge kommandoen create-react-app til at komme hurtigt i gang med React. Den installerer alle afhængigheder og konfigurationer for dig.

Kør følgende kommando for at oprette et React-projekt kaldet react-sidenav.



npx create-react-app react-sidenav

Dette vil oprette en react-sidenav-mappe med nogle filer for at komme i gang. For at rydde lidt op i denne mappe skal du navigere til src-mappen og erstatte indholdet af App.js med dette:

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

Oprettelse af navigationskomponenten

Navigationskomponenten, du vil oprette, vil se sådan ud:



Ikke-sammenklappet visning af React-navigationsmenuen

Det er ret simpelt, men når du er færdig, bør du være i stand til at ændre det, så det passer til dine behov. Du kan skjule navigationskomponenten ved at bruge dobbeltpilikonet øverst:

Skjult visning af React-navigationsmenuen

Start med at oprette den ikke-sammenklappede visning. Udover pileikonet indeholder sidebjælken en liste over elementer. Hver af disse elementer har et ikon og noget tekst. I stedet for gentagne gange at oprette et element for hvert element, kan du gemme dataene for hvert element i et array og derefter iterere over det ved hjælp af en kortfunktion.



For at demonstrere skal du oprette en ny mappe kaldet lib og tilføje en ny fil kaldet 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" 
    } 
]

Ikonerne ovenfor er fra Material UI-biblioteket, så installer det først ved hjælp af denne kommando:

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

Opret derefter en mappe kaldet Komponenter og tilføje en ny komponent kaldet Sidenav.js .

I denne fil skal du importere navData fra ../lib og oprette skelettet til Sidenav fungere:

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

For at oprette linkene skal du ændre div-elementet i denne komponent til dette:

hvordan man finder ud af, hvad en privat video var på youtube 
<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>

Denne komponent opretter et navigationslink, der indeholder ikonet og linkteksten for hver iteration i kortfunktionen.

Knapelementet holder venstre pilikon fra Material UI-biblioteket. Importer det øverst i komponenten ved hjælp af denne kode.

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

Du har måske også bemærket, at klassenavnene refererer til et stilobjekt. Dette er fordi denne tutorial bruger CSS-moduler. CSS-moduler giver dig mulighed for at oprette stilarter med lokalt omfang i React . Du behøver ikke at installere eller konfigurere noget, hvis du brugte create-react-app til at starte dette projekt.

I mappen Komponenter skal du oprette en ny fil kaldet sidenav.module.css og tilføje følgende:

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

Opsætning af React Router

De div-elementer, der returneres af kortfunktionen, skal være links. I React kan du oprette links og ruter ved hjælp af react-router-dom.

Installer react-router-dom via npm i terminalen.

npm install react-router-dom@latest

Denne kommando installerer den seneste version af react-router-dom.

I Index.js skal du indpakke app-komponenten med routeren.

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

Tilføj derefter dine ruter i 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;

Rediger App.css med disse stilarter.

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

Hver rute returnerer en anden side afhængigt af den URL, der sendes til sti rekvisitter . Opret en ny mappe kaldet Sider, og tilføj fire komponenter - siden Hjem, Udforsk, Statistik og Indstillinger. Her er et eksempel:

hvordan du ændrer din playstations adgangskode 
export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
}

Hvis du besøger /home-stien, skal du se 'Hjem'.

Linkene i sidebjælken skal føre til den matchende side, når du klikker på dem. I Sidenav.js skal du ændre kortfunktionen til at bruge NavLink-komponenten fra react-router-dom i stedet for div-elementet.

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

Husk at importere NavLink øverst i filen.

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

NavLink modtager URL-stien til linket gennem til prop.

Indtil dette tidspunkt er navigationslinjen åben. For at gøre den sammenklappelig kan du skifte dens bredde ved at ændre CSS-klassen, når en bruger klikker på pileknappen. Du kan derefter ændre CSS-klassen igen for at åbne den.

For at opnå denne skiftefunktion skal du vide, hvornår sidebjælken er åben og lukket.

Til dette skal du bruge useState-krogen. Dette Reaktionskrog giver dig mulighed for at tilføje og spore tilstanden i en funktionel komponent.

I sideNav.js skal du oprette krogen til den åbne tilstand.

const [open, setopen] = useState(true)

Initialiser åben tilstand til sand, så sidebjælken altid vil være åben, når du starter programmet.

Opret derefter funktionen, der skifter denne tilstand.

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

Du kan nu bruge den åbne værdi til at oprette dynamiske CSS-klasser som denne:

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

De anvendte CSS-klassenavne vil blive bestemt af den åbne tilstand. For eksempel, hvis open er sand, vil det ydre div-element have et sidenav-klassenavn. Ellers vil klassen blive sidenavd.

Dette er det samme for ikonet, som skifter til højre pil-ikon, når du lukker sidebjælken.

Husk at importere den.

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

Sidebjælkekomponenten er nu sammenklappelig.

Få fat i den komplette kode fra denne GitHub-depot og prøv det selv.

Styling af React-komponenter

React gør det ligetil at bygge en sammenklappelig navigationskomponent. Du kan bruge nogle af de værktøjer, som React leverer som react-router-dom til at håndtere routing og kroge til at holde styr på den kollapsede tilstand.

Du kan også bruge CSS-moduler til at style komponenter, selvom du ikke behøver det. Brug dem til at oprette klasser med lokalt omfang, der er unikke, og som du kan ryste fra bundlefilerne, hvis de ikke er i brug.