Hur man skapar en hopfällbar navigeringsmeny med hjälp av React

Hur man skapar en hopfällbar navigeringsmeny med hjälp av React

En navigeringsmeny i sidofältet består vanligtvis av en vertikal lista med länkar. Du kan skapa en uppsättning länkar i React med hjälp av react-router-dom.





Följ dessa steg för att skapa en React-sidonavigeringsmeny med länkar som innehåller materiella UI-ikoner. Länkarna renderar olika sidor när du klickar på dem.



Skapa en React-applikation

Om du redan har en Reagera projekt , hoppa gärna till nästa steg.





MAKEUSE AV DAGENS VIDEO

Du kan använda kommandot create-react-app för att snabbt komma igång med React. Den installerar alla beroenden och konfigurationer åt dig.

Kör följande kommando för att skapa ett React-projekt som heter react-sidenav.



npx create-react-app react-sidenav

Detta kommer att skapa en react-sidenav-mapp med några filer för att komma igång. För att rensa upp den här mappen lite, navigera till mappen src och ersätt innehållet i App.js med detta:

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

Skapa navigationskomponenten

Navigationskomponenten du skapar kommer att se ut så här:



Ej komprimerad vy av React-navigeringsmenyn

Det är ganska enkelt, men när du är klar bör du kunna modifiera den för att passa dina behov. Du kan komprimera navigeringskomponenten med hjälp av dubbelpilikonen högst upp:

Komprimerad vy av React-navigeringsmenyn

Börja med att skapa den icke-komprimerade vyn. Förutom pilikonen innehåller sidofältet en lista med objekt. Var och en av dessa objekt har en ikon och lite text. Istället för att upprepade gånger skapa ett element för varje, kan du lagra data för varje objekt i en array och sedan iterera över det med hjälp av en kartfunktion.



För att demonstrera, skapa en ny mapp som heter lib och lägg till en ny fil som heter 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" 
    } 
]

Ikonerna som används ovan är från Material UI-biblioteket, så installera det först med det här kommandot:

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

Skapa sedan en mapp som heter Komponenter och lägg till en ny komponent som heter Sidenav.js .

I den här filen, importera navData från ../lib och skapa skelettet för Sidenav fungera:

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

För att skapa länkarna, ändra div-elementet i den här komponenten till detta:

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

Denna komponent skapar en navigeringslänk som innehåller ikonen och länktexten för varje iteration i kartfunktionen.

Knappelementet håller den vänstra pilikonen från Material UI-biblioteket. Importera den överst i komponenten med den här koden.

hur man fixar iphone fast på apple -logotypen 
import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';

Du kanske också har märkt att klassnamnen refererar till ett stilobjekt. Detta beror på att denna handledning använder CSS-moduler. CSS-moduler låter dig skapa stilar med lokal omfattning i React . Du behöver inte installera eller konfigurera något om du använde create-react-app för att starta det här projektet.

Skapa en ny fil som heter i mappen Komponenter sidanav.module.css och lägg till följande:

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

Konfigurera React Router

De div-element som returneras av kartfunktionen bör vara länkar. I React kan du skapa länkar och rutter med hjälp av react-router-dom.

Installera react-router-dom via npm i terminalen.

npm install react-router-dom@latest

Detta kommando installerar den senaste versionen av react-router-dom.

I Index.js lindar du appkomponenten med routern.

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

Lägg sedan till dina rutter 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;

Ändra App.css med dessa stilar.

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

Varje rutt returnerar en annan sida beroende på webbadressen som skickas till väg rekvisita . Skapa en ny mapp som heter Sidor och lägg till fyra komponenter - sidan Hem, Utforska, Statistik och Inställningar. Här är ett exempel:

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

Om du besöker /hemvägen bör du se 'Hem'.

Länkarna i sidofältet ska leda till den matchande sidan när du klickar på dem. I Sidenav.js, modifiera kartfunktionen för att använda NavLink-komponenten från react-router-dom istället för 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> 
})}

Kom ihåg att importera NavLink överst i filen.

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

NavLink tar emot URL-sökvägen för länken genom till prop.

Fram till denna punkt är navigeringsfältet öppet. För att göra den hopfällbar kan du ändra dess bredd genom att ändra CSS-klassen när en användare klickar på pilknappen. Du kan sedan ändra CSS-klassen igen för att öppna den.

För att uppnå denna växlingsfunktion måste du veta när sidofältet är öppet och stängt.

För detta, använd useState-kroken. Detta Reagera krok låter dig lägga till och spåra tillståndet i en funktionell komponent.

I sideNav.js skapar du kroken för öppet tillstånd.

const [open, setopen] = useState(true)

Initiera öppet tillstånd till sant, så att sidofältet alltid är öppet när du startar programmet.

Skapa sedan funktionen som växlar detta tillstånd.

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

Du kan nu använda det öppna värdet för att skapa dynamiska CSS-klasser så här:

<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-klassnamnen som används bestäms av det öppna tillståndet. Till exempel, om open är sant, kommer det yttre div-elementet att ha ett sidanav-klassnamn. Annars kommer klassen att vara sidanavd.

Detta är samma sak för ikonen, som ändras till högerpilikonen när du stänger sidofältet.

Kom ihåg att importera den.

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

Sidofältskomponenten är nu hopfällbar.

Ta hela koden från detta GitHub-förråd och prova själv.

Styling React-komponenter

React gör det enkelt att bygga en hopfällbar navigeringskomponent. Du kan använda några av verktygen som React tillhandahåller som react-router-dom för att hantera routing och krokar för att hålla reda på det kollapsade tillståndet.

Du kan också använda CSS-moduler för att utforma komponenter, även om du inte behöver. Använd dem för att skapa lokalt omfångade klasser som är unika och som du kan skaka från paketfilerna om de inte används.