প্রতিক্রিয়া ব্যবহার করে কীভাবে একটি সংকোচনযোগ্য নেভিগেশন মেনু তৈরি করবেন

একটি সাইডবার নেভিগেশন মেনুতে সাধারণত লিঙ্কগুলির একটি উল্লম্ব তালিকা থাকে। আপনি প্রতিক্রিয়া-রাউটার-ডোম ব্যবহার করে প্রতিক্রিয়াতে লিঙ্কগুলির একটি সেট তৈরি করতে পারেন।

উপাদান UI আইকন ধারণকারী লিঙ্ক সহ একটি প্রতিক্রিয়া পার্শ্ব নেভিগেশন মেনু তৈরি করতে এই পদক্ষেপগুলি অনুসরণ করুন৷ আপনি যখন সেগুলিতে ক্লিক করেন তখন লিঙ্কগুলি বিভিন্ন পৃষ্ঠাগুলিকে রেন্ডার করবে।

---

---

একটি প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করা

আপনি যদি ইতিমধ্যে একটি আছে প্রতিক্রিয়া প্রকল্প , নির্দ্বিধায় পরবর্তী ধাপে চলে যান।

দিনের মেকইউজের ভিডিও

আপনি তৈরি-প্রতিক্রিয়া-অ্যাপ কমান্ডটি ব্যবহার করতে পারেন এবং দ্রুত প্রতিক্রিয়া সহ চালানোর জন্য। এটি আপনার জন্য সমস্ত নির্ভরতা এবং কনফিগারেশন ইনস্টল করে।

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 

পরবর্তী, নামক একটি ফোল্ডার তৈরি করুন উপাদান এবং নামক একটি নতুন উপাদান যোগ করুন 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 মডিউলগুলি আপনাকে প্রতিক্রিয়াতে স্থানীয়ভাবে স্কোপযুক্ত শৈলী তৈরি করতে দেয় . আপনি যদি এই প্রকল্পটি শুরু করার জন্য তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করেন তবে আপনাকে কিছু ইনস্টল বা কনফিগার করার দরকার নেই।

কম্পোনেন্ট ফোল্ডারে, নামক একটি নতুন ফাইল তৈরি করুন 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 উপাদানগুলি লিঙ্ক হওয়া উচিত। প্রতিক্রিয়াতে, আপনি প্রতিক্রিয়া-রাউটার-ডোম ব্যবহার করে লিঙ্ক এবং রুট তৈরি করতে পারেন।

আপনার ম্যাককে আপনার রুকুতে ওয়্যারলেস মিরর করুন

টার্মিনালে, 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 এলিমেন্টের পরিবর্তে 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 টু প্রপের মাধ্যমে লিঙ্কটির URL পাথ পায়।

এই বিন্দু পর্যন্ত, নেভিগেশন বার খোলা আছে। এটিকে সঙ্কুচিত করার জন্য, আপনি যখন একজন ব্যবহারকারী তীর বোতামে ক্লিক করেন তখন আপনি CSS ক্লাস পরিবর্তন করে এর প্রস্থ টগল করতে পারেন। তারপরে আপনি এটি খুলতে আবার CSS ক্লাস পরিবর্তন করতে পারেন।

এই টগল কার্যকারিতা অর্জন করার জন্য, আপনাকে জানতে হবে সাইডবার কখন খোলা এবং বন্ধ।

এর জন্য useState হুক ব্যবহার করুন। এই হুক প্রতিক্রিয়া আপনাকে একটি কার্যকরী উপাদানে রাজ্য যোগ করতে এবং ট্র্যাক করতে দেয়।

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 উপাদানটির একটি sidenav শ্রেণীর নাম থাকবে। অন্যথায়, ক্লাস sidenavd হবে.

এটি আইকনের জন্য একই, যা আপনি সাইডবার বন্ধ করার সময় ডান তীর আইকনে পরিবর্তিত হয়।

এটি আমদানি করতে মনে রাখবেন।

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

সাইডবার কম্পোনেন্ট এখন বন্ধ করা যায়।

এটি থেকে সম্পূর্ণ কোড ধরুন GitHub সংগ্রহস্থল এবং নিজে চেষ্টা করুন।

স্টাইলিং প্রতিক্রিয়া উপাদান

প্রতিক্রিয়া একটি সঙ্কুচিত নেভিগেশন উপাদান তৈরি করা সহজ করে তোলে। আপনি কিছু সরঞ্জাম ব্যবহার করতে পারেন যা প্রতিক্রিয়া প্রদান করে যেমন প্রতিক্রিয়া-রাউটার-ডোম রাউটিং পরিচালনা করতে এবং হুকগুলি ভেঙে পড়া অবস্থার উপর নজর রাখতে।

আপনি CSS মডিউল স্টাইল উপাদান ব্যবহার করতে পারেন, যদিও আপনাকে তা করতে হবে না। স্থানীয়ভাবে স্কোপড ক্লাস তৈরি করতে সেগুলি ব্যবহার করুন যা অনন্য এবং আপনি বান্ডেল ফাইলগুলি ব্যবহার না করলে তা থেকে কাঁপতে পারেন৷