So erstellen Sie ein zusammenklappbares Navigationsmenü mit React

Ein Seitenleisten-Navigationsmenü besteht normalerweise aus einer vertikalen Liste von Links. Sie können eine Reihe von Links in React mithilfe von „react-router-dom“ erstellen.

Befolgen Sie diese Schritte, um ein seitliches React-Navigationsmenü mit Links zu erstellen, die wesentliche UI-Symbole enthalten. Die Links rendern verschiedene Seiten, wenn Sie darauf klicken.

Erstellen einer React-Anwendung

Wenn Sie bereits eine haben Projekt reagieren , können Sie gerne mit dem nächsten Schritt fortfahren.

So posten Sie ein Gif auf Instagram

MAKEUSEOF VIDEO DES TAGES

Sie können den Befehl create-react-app verwenden, um schnell mit React loszulegen. Es installiert alle Abhängigkeiten und Konfigurationen für Sie.

Führen Sie den folgenden Befehl aus, um ein React-Projekt mit dem Namen „react-sidenav“ zu erstellen.

npx create-react-app react-sidenav

Dadurch wird ein React-Sidenav-Ordner mit einigen Dateien erstellt, um Ihnen den Einstieg zu erleichtern. Um diesen Ordner ein wenig aufzuräumen, navigieren Sie zum Ordner src und ersetzen Sie den Inhalt von App.js durch diesen:

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

Die von Ihnen erstellte Navigationskomponente sieht folgendermaßen aus:

Nicht reduzierte Ansicht des React-Navigationsmenüs

Es ist ziemlich einfach, aber wenn Sie fertig sind, sollten Sie in der Lage sein, es an Ihre Bedürfnisse anzupassen. Sie können die Navigationskomponente mithilfe des Doppelpfeilsymbols oben einklappen:

Reduzierte Ansicht des React-Navigationsmenüs

Erstellen Sie zunächst die nicht reduzierte Ansicht. Neben dem Pfeilsymbol enthält die Seitenleiste eine Liste mit Elementen. Jedes dieser Elemente hat ein Symbol und etwas Text. Anstatt wiederholt ein Element für jedes Element zu erstellen, können Sie die Daten für jedes Element in einem Array speichern und dann mit einer Kartenfunktion darüber iterieren.

Erstellen Sie zur Demonstration einen neuen Ordner mit dem Namen lib und fügen Sie eine neue Datei mit dem Namen navData.js hinzu.

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" 
    } 
]

Die oben verwendeten Symbole stammen aus der Material UI-Bibliothek, also installieren Sie sie zuerst mit diesem Befehl:

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

Erstellen Sie als Nächstes einen Ordner mit dem Namen Komponenten und fügen Sie eine neue Komponente namens hinzu Sidenav.js .

Importieren Sie in diese Datei navData aus ../lib und erstellen Sie das Skelett für die Sidenav Funktion:

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

Um die Links zu erstellen, ändern Sie das div-Element in dieser Komponente wie folgt:

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

Diese Komponente erstellt einen Navigationslink, der das Symbol und den Linktext für jede Iteration in der Kartenfunktion enthält.

Das Schaltflächenelement enthält das Linkspfeilsymbol aus der Material-UI-Bibliothek. Importieren Sie es mit diesem Code oben in der Komponente.

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

Sie haben vielleicht auch bemerkt, dass die Klassennamen auf ein Stilobjekt verweisen. Dies liegt daran, dass dieses Tutorial CSS-Module verwendet. Mit CSS-Modulen können Sie in React lokal begrenzte Stile erstellen . Sie müssen nichts installieren oder konfigurieren, wenn Sie create-react-app verwendet haben, um dieses Projekt zu starten.

Erstellen Sie im Ordner „Components“ eine neue Datei mit dem Namen „ sidenav.module.css und folgendes hinzufügen:

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

Die von der map-Funktion zurückgegebenen div-Elemente sollten Links sein. In React können Sie Links und Routen mit React-Router-Dom erstellen.

Wie aktiviere ich die Sprachausgabe auf Android?

Installieren Sie im Terminal React-Router-Dom über npm.

npm install react-router-dom@latest

Dieser Befehl installiert die neueste Version von „react-router-dom“.

Umschließen Sie in Index.js die App-Komponente mit dem Router.

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

Fügen Sie als Nächstes in App.js Ihre Routen hinzu.

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;

Ändern Sie App.css mit diesen Stilen.

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

Jede Route gibt abhängig von der an die übergebenen URL eine andere Seite zurück Pfad Requisiten . Erstellen Sie einen neuen Ordner namens Pages und fügen Sie vier Komponenten hinzu – die Seite Home, Explore, Statistics und Settings. Hier ist ein Beispiel:

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

Wenn Sie den /home-Pfad besuchen, sollten Sie 'Home' sehen.

Die Links in der Seitenleiste sollten beim Anklicken zur passenden Seite führen. Ändern Sie in Sidenav.js die Kartenfunktion so, dass sie die NavLink-Komponente von „react-router-dom“ anstelle des „div“-Elements verwendet.

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

Denken Sie daran, NavLink am Anfang der Datei zu importieren.

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

NavLink erhält den URL-Pfad für den Link über die to-Prop.

Bis zu diesem Punkt ist die Navigationsleiste geöffnet. Um es reduzierbar zu machen, können Sie seine Breite umschalten, indem Sie die CSS-Klasse ändern, wenn ein Benutzer auf die Pfeilschaltfläche klickt. Sie können die CSS-Klasse dann erneut ändern, um sie zu öffnen.

Um diese Umschaltfunktion zu erreichen, müssen Sie wissen, wann die Seitenleiste geöffnet und geschlossen ist.

Verwenden Sie dazu den useState-Hook. Dies Haken reagieren ermöglicht es Ihnen, den Status in einer funktionalen Komponente hinzuzufügen und zu verfolgen.

Erstellen Sie in sideNav.js den Hook für den offenen Zustand.

const [open, setopen] = useState(true)

Initialisieren Sie den offenen Zustand auf true, damit die Seitenleiste immer geöffnet ist, wenn Sie die Anwendung starten.

Erstellen Sie als Nächstes die Funktion, die diesen Zustand umschaltet.

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

Sie können jetzt den offenen Wert verwenden, um dynamische CSS-Klassen wie folgt zu erstellen:

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

Die verwendeten CSS-Klassennamen werden durch den offenen Zustand bestimmt. Wenn beispielsweise open wahr ist, hat das äußere div-Element einen Sidenav-Klassennamen. Andernfalls wird die Klasse sidenavd.

So kehren Sie die Bildsuche auf dem Telefon um

Dies gilt auch für das Symbol, das sich beim Schließen der Seitenleiste in das Rechtspfeil-Symbol ändert.

Denken Sie daran, es zu importieren.

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

Die Seitenleistenkomponente ist jetzt einklappbar.

Holen Sie sich den vollständigen Code daraus GitHub-Repository und probiere es selbst aus.

Styling-Reaktionskomponenten

React macht es einfach, eine zusammenklappbare Navigationskomponente zu erstellen. Sie können einige der von React bereitgestellten Tools verwenden, z.

Sie können auch CSS-Module verwenden, um Komponenten zu stylen, müssen es aber nicht. Verwenden Sie sie, um lokal begrenzte Klassen zu erstellen, die eindeutig sind und die Sie aus den Bundle-Dateien schütteln können, wenn sie nicht verwendet werden.

So erstellen Sie ein zusammenklappbares Navigationsmenü mit React

Erstellen einer React-Anwendung

Erstellen der Navigationskomponente

React-Router einrichten

Ändern von Navigationslinks

Styling-Reaktionskomponenten