رد عمل کا استعمال کرتے ہوئے کولیپس ایبل نیویگیشن مینو کیسے بنایا جائے۔

سائڈبار نیویگیشن مینو عام طور پر لنکس کی عمودی فہرست پر مشتمل ہوتا ہے۔ آپ react-router-dom کا استعمال کرتے ہوئے React میں لنکس کا ایک سیٹ بنا سکتے ہیں۔

مواد UI شبیہیں پر مشتمل لنکس کے ساتھ رد عمل کی طرف نیویگیشن مینو بنانے کے لیے ان اقدامات پر عمل کریں۔ جب آپ ان پر کلک کریں گے تو لنکس مختلف صفحات پیش کریں گے۔

---

---

ری ایکٹ ایپلی کیشن بنانا

اگر آپ کے پاس پہلے سے ہی ایک ہے۔ پروجیکٹ کا رد عمل ، اگلے مرحلے پر جانے کے لئے آزاد محسوس کریں۔

دن کی ویڈیو کا میک یوز

آپ جلدی سے اٹھنے اور ری ایکٹ کے ساتھ چلانے کے لیے create-react-app کمانڈ استعمال کر سکتے ہیں۔ یہ آپ کے لیے تمام انحصار اور کنفیگریشن انسٹال کرتا ہے۔

انٹرنیٹ پر کسی کے ساتھ فلم دیکھنے کا طریقہ

React-sidenav نامی ری ایکٹ پروجیکٹ بنانے کے لیے درج ذیل کمانڈ کو چلائیں۔

npx create-react-app react-sidenav 

یہ آپ کو شروع کرنے کے لیے کچھ فائلوں کے ساتھ ایک 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" 
    } 
] 

اوپر استعمال شدہ شبیہیں Material UI لائبریری سے ہیں، لہذا اس کمانڈ کو استعمال کرتے ہوئے اسے پہلے انسٹال کریں:

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

اگلا، نامی ایک فولڈر بنائیں اجزاء اور ایک نیا جزو شامل کریں جسے کہا جاتا ہے۔ Sidenav.js .

اس فائل میں، ../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 ماڈیولز آپ کو React میں مقامی طور پر اسکوپڈ اسٹائل بنانے کی اجازت دیتے ہیں۔ . اگر آپ نے اس پروجیکٹ کو شروع کرنے کے لیے 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 میں، آپ react-router-dom کا استعمال کرتے ہوئے لنکس اور روٹس بنا سکتے ہیں۔

ٹرمینل میں، npm کے ذریعے react-router-dom انسٹال کریں۔

npm install react-router-dom@latest 

یہ کمانڈ react-router-dom کا تازہ ترین ورژن انسٹال کرتی ہے۔

Index.js میں، راؤٹر کے ساتھ ایپ کے جزو کو لپیٹیں۔

ونڈوز 10 اسٹارٹ مینو کی شبیہیں تبدیل کرتا ہے۔

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 عنصر کے بجائے react-router-dom سے 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 ہک استعمال کریں۔ یہ ردعمل ہک آپ کو ایک فعال جزو میں ریاست کو شامل کرنے اور ٹریک کرنے کی اجازت دیتا ہے۔

sideNav.js میں، کھلی حالت کے لیے ہک بنائیں۔

const [open, setopen] = useState(true) 

کھلی حالت کو سچ میں شروع کریں، لہذا جب آپ ایپلیکیشن شروع کریں گے تو سائڈبار ہمیشہ کھلا رہے گا۔

اگلا، فنکشن بنائیں جو اس حالت کو ٹوگل کرے گا۔

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

اب آپ اس طرح کی ڈائنامک سی ایس ایس کلاسز بنانے کے لیے اوپن ویلیو استعمال کر سکتے ہیں:

<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 عنصر کا ایک sidenav کلاس کا نام ہوگا۔ دوسری صورت میں، کلاس sidenavd ہو جائے گا.

یہ آئیکن کے لیے بھی ایسا ہی ہے، جو سائڈبار کو بند کرنے پر دائیں تیر والے آئیکن میں تبدیل ہو جاتا ہے۔

پی سی پر انسٹاگرام پیغامات کیسے دیکھیں

اسے درآمد کرنا یاد رکھیں۔

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

سائڈبار کا جزو اب ٹوٹنے والا ہے۔

اس سے مکمل کوڈ حاصل کریں۔ GitHub ذخیرہ اور اپنے آپ کو آزمائیں.

اسٹائل ری ایکٹ اجزاء

رد عمل ایک ٹوٹنے والا نیویگیشن جزو بنانا سیدھا بناتا ہے۔ آپ کچھ ٹولز استعمال کر سکتے ہیں جو React فراہم کرتا ہے جیسے کہ روٹنگ کو ہینڈل کرنے کے لیے react-router-dom اور منہدم ہونے والی حالت پر نظر رکھنے کے لیے ہکس۔

آپ اجزاء کو اسٹائل کرنے کے لیے CSS ماڈیول بھی استعمال کر سکتے ہیں، حالانکہ آپ کو ایسا کرنے کی ضرورت نہیں ہے۔ مقامی طور پر اسکوپڈ کلاسز بنانے کے لیے ان کا استعمال کریں جو منفرد ہیں اور اگر وہ استعمال میں نہیں ہیں تو آپ بنڈل فائلوں سے ہلا سکتے ہیں۔