రియాక్ట్‌ని ఉపయోగించి ధ్వంసమయ్యే నావిగేషన్ మెనుని ఎలా సృష్టించాలి

సైడ్‌బార్ నావిగేషన్ మెను సాధారణంగా నిలువుగా ఉండే లింక్‌ల జాబితాను కలిగి ఉంటుంది. మీరు react-router-domని ఉపయోగించి రియాక్ట్‌లో లింక్‌ల సమితిని సృష్టించవచ్చు.

మెటీరియల్ UI చిహ్నాలను కలిగి ఉన్న లింక్‌లతో రియాక్ట్ సైడ్ నావిగేషన్ మెనుని సృష్టించడానికి ఈ దశలను అనుసరించండి. మీరు వాటిని క్లిక్ చేసినప్పుడు లింక్‌లు వేర్వేరు పేజీలను రెండర్ చేస్తాయి.

---

---

రియాక్ట్ అప్లికేషన్‌ను సృష్టిస్తోంది

మీరు ఇప్పటికే ఒక కలిగి ఉంటే రియాక్ట్ ప్రాజెక్ట్ , తదుపరి దశకు దాటవేయడానికి సంకోచించకండి.

రోజు యొక్క వీడియోను తయారు చేయండి

మీరు త్వరగా రియాక్ట్‌తో లేచి రన్ చేయడానికి create-react-app ఆదేశాన్ని ఉపయోగించవచ్చు. ఇది మీ కోసం అన్ని డిపెండెన్సీలు మరియు కాన్ఫిగరేషన్‌లను ఇన్‌స్టాల్ చేస్తుంది.

react-sidenav అనే రియాక్ట్ ప్రాజెక్ట్‌ను సృష్టించడానికి కింది ఆదేశాన్ని అమలు చేయండి.

npx create-react-app 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" 
    } 
] 

పైన ఉపయోగించిన చిహ్నాలు మెటీరియల్ UI లైబ్రరీ నుండి వచ్చాయి, కాబట్టి ఈ ఆదేశాన్ని ఉపయోగించి దీన్ని మొదట ఇన్‌స్టాల్ చేయండి:

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

తరువాత, అనే ఫోల్డర్‌ను సృష్టించండి భాగాలు మరియు అనే కొత్త భాగాన్ని జోడించండి సిడెనవ్.జెఎస్ .

ఈ ఫైల్‌లో, ../lib నుండి navDataని దిగుమతి చేయండి మరియు దీని కోసం అస్థిపంజరాన్ని సృష్టించండి సిడెనవ్ ఫంక్షన్:

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

ఈ భాగం మ్యాప్ ఫంక్షన్‌లోని ప్రతి పునరావృతం కోసం చిహ్నం మరియు లింక్ వచనాన్ని కలిగి ఉన్న నావిగేషన్ లింక్‌ను సృష్టిస్తుంది.

బటన్ మూలకం మెటీరియల్ UI లైబ్రరీ నుండి ఎడమ బాణం చిహ్నాన్ని కలిగి ఉంటుంది. ఈ కోడ్‌ని ఉపయోగించి కాంపోనెంట్ ఎగువన దాన్ని దిగుమతి చేయండి.

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

క్లాస్ పేర్లు స్టైల్స్ ఆబ్జెక్ట్‌ని సూచిస్తాయని కూడా మీరు గమనించి ఉండవచ్చు. ఎందుకంటే ఈ ట్యుటోరియల్ CSS మాడ్యూల్‌లను ఉపయోగిస్తుంది. CSS మాడ్యూల్‌లు రియాక్ట్‌లో స్థానికంగా స్కోప్డ్ స్టైల్‌లను సృష్టించడానికి మిమ్మల్ని అనుమతిస్తాయి . మీరు ఈ ప్రాజెక్ట్‌ను ప్రారంభించడానికి create-react-appని ఉపయోగించినట్లయితే మీరు దేనినీ ఇన్‌స్టాల్ చేయనవసరం లేదా కాన్ఫిగర్ చేయాల్సిన అవసరం లేదు.

కాంపోనెంట్స్ ఫోల్డర్‌లో, అనే కొత్త ఫైల్‌ను సృష్టించండి 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; 
}

రియాక్ట్ రూటర్‌ని సెటప్ చేస్తోంది

మ్యాప్ ఫంక్షన్ ద్వారా అందించబడిన div మూలకాలు లింక్‌లుగా ఉండాలి. రియాక్ట్‌లో, మీరు react-router-domని ఉపయోగించి లింక్‌లు మరియు మార్గాలను సృష్టించవచ్చు.

టెర్మినల్‌లో, npm ద్వారా react-router-domను ఇన్‌స్టాల్ చేయండి.

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ని బట్టి వేరే పేజీని అందిస్తుంది మార్గం ఆధారాలు . పేజీలు అనే కొత్త ఫోల్డర్‌ను సృష్టించండి మరియు నాలుగు భాగాలను జోడించండి - హోమ్, అన్వేషణ, గణాంకాలు మరియు సెట్టింగ్‌ల పేజీ. ఇక్కడ ఒక ఉదాహరణ:

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

మీరు /హోమ్ పాత్‌ని సందర్శిస్తే, మీరు 'హోమ్'ని చూడాలి.

నావిగేషన్ లింక్‌లను సవరిస్తోంది

సైడ్‌బార్‌లోని లింక్‌లను మీరు క్లిక్ చేసినప్పుడు సరిపోలే పేజీకి దారి తీస్తుంది. Sidenav.jsలో, div ఎలిమెంట్‌కు బదులుగా రియాక్ట్-రూటర్-డోమ్ నుండి NavLink కాంపోనెంట్‌ను ఉపయోగించడానికి మ్యాప్ ఫంక్షన్‌ను సవరించండి.

{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 to prop ద్వారా లింక్ కోసం URL పాత్‌ను అందుకుంటుంది.

ఈ సమయం వరకు, నావిగేషన్ బార్ తెరిచి ఉంటుంది. దీన్ని ధ్వంసమయ్యేలా చేయడానికి, వినియోగదారు బాణం బటన్‌ను క్లిక్ చేసినప్పుడు CSS క్లాస్‌ని మార్చడం ద్వారా మీరు దాని వెడల్పును టోగుల్ చేయవచ్చు. మీరు CSS తరగతిని తెరవడానికి దాన్ని మళ్లీ మార్చవచ్చు.

ఈ టోగుల్ కార్యాచరణను సాధించడానికి, సైడ్‌బార్ ఎప్పుడు తెరిచి మరియు మూసివేయబడిందో మీరు తెలుసుకోవాలి.

దీని కోసం, useState hookని ఉపయోగించండి. ఈ రియాక్ట్ హుక్ ఫంక్షనల్ కాంపోనెంట్‌లో స్థితిని జోడించడానికి మరియు ట్రాక్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.

sideNav.jsలో, ఓపెన్ స్టేట్ కోసం హుక్‌ని సృష్టించండి.

const [open, setopen] = useState(true) 

ఓపెన్ స్టేట్‌ను ఒప్పుకు ప్రారంభించండి, కాబట్టి మీరు అప్లికేషన్‌ను ప్రారంభించినప్పుడు సైడ్‌బార్ ఎల్లప్పుడూ తెరిచి ఉంటుంది.

తర్వాత, ఈ స్థితిని టోగుల్ చేసే ఫంక్షన్‌ను సృష్టించండి.

const toggleOpen = () => { 
    setopen(!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 తరగతి పేర్లు ఓపెన్ స్టేట్ ద్వారా నిర్ణయించబడతాయి. ఉదాహరణకు, ఓపెన్ నిజమైతే, బాహ్య div మూలకం సైడ్‌నావ్ తరగతి పేరును కలిగి ఉంటుంది. లేదంటే క్లాస్ సైడెనవ్డ్ అవుతుంది.

మీరు సైడ్‌బార్‌ను మూసివేసినప్పుడు కుడి బాణం చిహ్నంగా మారే ఐకాన్‌కు ఇది అదే.

దీన్ని దిగుమతి చేసుకోవడం గుర్తుంచుకోండి.

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

సైడ్‌బార్ భాగం ఇప్పుడు ధ్వంసమయ్యేలా ఉంది.

విండోస్ స్వయంచాలకంగా ఈ నెట్‌వర్క్ యొక్క ప్రాక్సీ సెట్టింగ్‌లు విండోస్ 10 ని గుర్తించలేదు

దీని నుండి పూర్తి కోడ్‌ను పొందండి GitHub రిపోజిటరీ మరియు మీరే ప్రయత్నించండి.

స్టైలింగ్ రియాక్ట్ భాగాలు

రియాక్ట్ ధ్వంసమయ్యే నావిగేషన్ కాంపోనెంట్‌ను నిర్మించడాన్ని సూటిగా చేస్తుంది. మీరు రౌటింగ్‌ని నిర్వహించడానికి రియాక్ట్ అందించే రియాక్ట్-రూటర్-డోమ్ వంటి కొన్ని సాధనాలను ఉపయోగించవచ్చు మరియు కుప్పకూలిన స్థితిని ట్రాక్ చేయడానికి హుక్స్‌లను ఉపయోగించవచ్చు.

మీరు స్టైల్ భాగాలకు CSS మాడ్యూల్‌లను కూడా ఉపయోగించవచ్చు, అయినప్పటికీ మీరు ఉపయోగించాల్సిన అవసరం లేదు. స్థానికంగా స్కోప్ చేయబడిన తరగతులను సృష్టించడానికి వాటిని ఉపయోగించండి మరియు అవి ఉపయోగంలో లేకుంటే మీరు బండిల్ ఫైల్‌ల నుండి షేక్ చేయవచ్చు.