كيفية إنشاء قائمة تنقل قابلة للطي باستخدام React

تتكون قائمة التنقل في الشريط الجانبي عادةً من قائمة عمودية من الروابط. يمكنك إنشاء مجموعة من الروابط في React باستخدام رد فعل جهاز التوجيه dom.

اتبع هذه الخطوات لإنشاء قائمة تنقل جانبية لـ React مع روابط تحتوي على رموز واجهة المستخدم المادية. ستعرض الروابط صفحات مختلفة عند النقر فوقها.

---

---

إنشاء تطبيق React

إذا كان لديك بالفعل ملف مشروع React ، لا تتردد في التخطي إلى الخطوة التالية.

اجعل فيديو اليوم

يمكنك استخدام الأمر create-reaction-app لبدء استخدام React وتشغيله بسرعة. يقوم بتثبيت جميع التبعيات والتكوين من أجلك.

قم بتشغيل الأمر التالي لإنشاء مشروع React يسمى رد فعل-sidenav.

npx create-react-app react-sidenav 

سيؤدي هذا إلى إنشاء مجلد رد فعل-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 .

في هذا الملف ، قم باستيراد navData من ../lib وأنشئ الهيكل العظمي لملف Sidenav وظيفة:

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

يقوم هذا المكون بإنشاء ارتباط تنقل يحتوي على الرمز ونص الارتباط لكل تكرار في وظيفة الخريطة.

يحتوي عنصر الزر على رمز السهم الأيسر من مكتبة Material UI. قم باستيراده في الجزء العلوي من المكون باستخدام هذا الرمز.

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

ربما لاحظت أيضًا أن أسماء الفئات تشير إلى كائن أنماط. هذا لأن هذا البرنامج التعليمي يستخدم وحدات CSS. تسمح لك وحدات CSS النمطية بإنشاء أنماط محددة النطاق محليًا في React . لا تحتاج إلى تثبيت أو تكوين أي شيء إذا كنت تستخدم تطبيق create-response-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; 
}

إعداد جهاز التوجيه React

يجب أن تكون عناصر div التي يتم إرجاعها بواسطة وظيفة الخريطة روابط. في React ، يمكنك إنشاء روابط ومسارات باستخدام React-router-dom.

في الجهاز ، قم بتثبيت React-router-dom عبر npm.

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 الذي تم تمريره إلى ملف الدعائم المسار . أنشئ مجلدًا جديدًا يسمى Pages وأضف أربعة مكونات - الصفحة الرئيسية ، والاستكشاف ، والإحصاءات ، والإعدادات الصفحة. هنا مثال:

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

إذا قمت بزيارة / مسار المنزل ، يجب أن ترى 'الصفحة الرئيسية'.

تعديل روابط التنقل

يجب أن تؤدي الروابط الموجودة في الشريط الجانبي إلى الصفحة المطابقة عند النقر فوقها. في Sidenav.js ، قم بتعديل وظيفة الخريطة لاستخدام مكون NavLink من رد فعل جهاز التوجيه dom بدلاً من عنصر div.

{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 للارتباط من خلال الخاصية to.

حتى هذه النقطة ، يكون شريط التنقل مفتوحًا. لجعله قابلاً للطي ، يمكنك تبديل عرضه عن طريق تغيير فئة CSS عندما ينقر المستخدم على زر السهم. يمكنك بعد ذلك تغيير فئة CSS مرة أخرى لفتحها.

لتحقيق وظيفة التبديل هذه ، يجب أن تعرف متى يكون الشريط الجانبي مفتوحًا ومغلقًا.

لهذا ، استخدم خطاف useState. هذه رد فعل هوك يسمح لك بإضافة وتتبع الحالة في مكون وظيفي.

في sideNav.js ، أنشئ الخطاف للحالة المفتوحة.

const [open, setopen] = useState(true) 

قم بتهيئة الحالة المفتوحة إلى true ، بحيث يكون الشريط الجانبي مفتوحًا دائمًا عند بدء التطبيق.

بعد ذلك ، قم بإنشاء الوظيفة التي من شأنها تبديل هذه الحالة.

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

يمكنك الآن استخدام القيمة المفتوحة لإنشاء فئات CSS ديناميكية مثل هذا:

كيف أسجل مكالمة هاتفية على جهاز iPhone الخاص بي

<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 المستخدمة من خلال الحالة المفتوحة. على سبيل المثال ، إذا كان open هو true ، فسيكون لعنصر div الخارجي اسم فئة sidenav. خلاف ذلك ، سيكون الفصل sidenavd.

هذا هو نفسه بالنسبة للرمز ، الذي يتغير إلى رمز السهم الأيمن عند إغلاق الشريط الجانبي.

تذكر أن تقوم باستيراده.

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

مكون الشريط الجانبي قابل للطي الآن.

احصل على الكود الكامل من هذا مستودع جيثب وجربها بنفسك.

مكونات أسلوب رد الفعل

تجعل React من السهل إنشاء مكون تنقل قابل للطي. يمكنك استخدام بعض الأدوات التي توفرها React مثل رد فعل جهاز التوجيه دوم للتعامل مع التوجيه والخطافات لتتبع الحالة المنهارة.

يمكنك أيضًا استخدام وحدات CSS النمطية لتصميم المكونات ، على الرغم من أنك لست مضطرًا لذلك. استخدمها لإنشاء فئات محددة النطاق محليًا فريدة والتي يمكنك التخلص منها من ملفات الحزمة إذا لم تكن قيد الاستخدام.