כיצד ליצור תפריט ניווט מתקפל באמצעות React

תפריט ניווט בסרגל צד מורכב בדרך כלל מרשימה אנכית של קישורים. אתה יכול ליצור קבוצה של קישורים ב-React באמצעות react-router-dom.

בצע את השלבים הבאים כדי ליצור תפריט ניווט בצד React עם קישורים המכילים סמלי ממשק משתמש מהותיים. הקישורים יעבדו דפים שונים כאשר תלחץ עליהם.

יצירת אפליקציית React

אם כבר יש לך א פרויקט תגובה, אל תהסס לדלג לשלב הבא.

אתה יכול להשתמש בפקודה create-react-app כדי להתחיל לעבוד עם React במהירות. זה מתקין עבורך את כל התלות והתצורה.

הפעל את הפקודה הבאה כדי ליצור פרויקט React בשם react-sidenav.

npx לִיצוֹר-react-app react-sidenav

פעולה זו תיצור תיקיית react-sidenav עם כמה קבצים כדי להתחיל. כדי לנקות קצת את התיקיה הזו, נווט לתיקיית src והחלף את התוכן של App.js בזה:

יְבוּא './App.css';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<div className="אפליקציה"></div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

יצירת רכיב הניווט

רכיב הניווט שתיצור ייראה כך:

זה די פשוט, אבל ברגע שתסיים, אתה אמור להיות מסוגל לשנות אותו כך שיתאים לצרכים שלך. ניתן לכווץ את רכיב הניווט באמצעות סמל החץ הכפול בחלק העליון:

התחל ביצירת התצוגה הלא מכווץ. מלבד סמל החץ, סרגל הצד מכיל רשימה של פריטים. לכל אחד מהפריטים הללו יש סמל וטקסט כלשהו. במקום ליצור שוב ושוב אלמנט עבור כל אחד מהם, אתה יכול לאחסן את הנתונים עבור כל פריט במערך ולאחר מכן לחזור עליו באמצעות פונקציית מפה.

כדי להדגים, צור תיקיה חדשה בשם lib והוסף קובץ חדש בשם navData.js.

יְבוּא HomeIcon מ '@mui/icons-material/Home';
יְבוּא TravelExploreIcon מ '@mui/icons-material/TravelExplore';
יְבוּא BarChartIcon מ '@mui/icons-material/BarChart';
יְבוּא סמל הגדרות מ '@mui/icons-material/Settings';
יְצוּאconst navData = [
 {
 מזהה: 0,
 סמל: <HomeIcon/>,
 טֶקסט: "בית",
 קישור: "/"
 },
 {
 מזהה: 1,
 סמל: <TravelExploreIcon/>,
 טֶקסט: "לַחקוֹר",
 קישור: "לַחקוֹר"
 },
 {
 מזהה: 2,
 סמל: <BarChartIcon/>,
 טֶקסט: "סטָטִיסטִיקָה",
 קישור: "סטָטִיסטִיקָה"
 },
 {
 מזהה: 3,
 סמל: <סמל הגדרות/>,
 טֶקסט: "הגדרות",
 קישור: "הגדרות"
 }
]

הסמלים שבהם נעשה שימוש למעלה הם מספריית ממשק המשתמש של החומר, אז התקן אותו תחילה באמצעות הפקודה הזו:

npm להתקין @mui/material @רֶגֶשׁ/react @רֶגֶשׁ/styled
npm להתקין @mui/icons-material

לאחר מכן, צור תיקייה בשם רכיבים ולהוסיף רכיב חדש בשם Sidenav.js.

בקובץ זה, ייבא את navData מ-../lib וצור את השלד עבור סידנב פוּנקצִיָה:

// ב-Sidenav.js
יְבוּא { navData } מ "../lib/navData";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהסידנב() {
לַחֲזוֹר (
<div>
</div>
 )
}

כדי ליצור את הקישורים, שנה את רכיב ה-div ברכיב זה לזה:

<div>
<button className={styles.menuBtn}>
<KeyboardDouble ArrowLeftIcon />
</button>
 {navData.map (פריט =>{
 לַחֲזוֹר <div key={item.id} className={styles.sideitem}>
 {item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
 })}
</div>

רכיב זה יוצר קישור ניווט המכיל את הסמל ואת טקסט הקישור עבור כל איטרציה בפונקציית המפה.

רכיב הלחצן מחזיק את סמל החץ שמאלה מספריית ממשק המשתמש של החומר. ייבא אותו בחלק העליון של הרכיב באמצעות קוד זה.

יְבוּא KeyboardDouble ArrowLeftIcon מ '@mui/icons-material/KeyboardDoubleArrowLeft';

אולי גם שמתם לב ששמות המחלקות מתייחסים לאובייקט סגנונות. הסיבה לכך היא שמדריך זה משתמש במודולי CSS. מודולי CSS מאפשרים לך ליצור סגנונות בהיקף מקומי ב-React. אינך צריך להתקין או להגדיר שום דבר אם השתמשת ב-create-react-app כדי להתחיל את הפרויקט הזה.

בתיקייה Components, צור קובץ חדש בשם sidenav.module.css והוסיפו את הדברים הבאים:

.sidenav {
 רוחב: 250 פיקסלים;
מַעֲבָר: רוֹחַב 0.3 שניותקלות-in-out;
 גובה: 100Vh;
 צבע רקע: rgb (10,25,41);
 ריפוד העליון: 28px;
}
.sidenav סגור {
 מלחין: sidenav;
מַעֲבָר: רוֹחַב 0.3 שניותקלות-in-out;
 רוחב: 60 פיקסלים
}
.sideitem {
 תצוגה: flex;
 align-items: center;
 ריפוד: 10px 20px;
 סמן: מצביע;
 צֶבַע: #B2BAC2;
 קישוט טקסט: אין;
}
.linkText {
 padding-left: 16px;
}
.linkTextClosed {
 מלחין: linkText;
 נראות: מוסתר;
}
.sideitem:לְרַחֵף {
 צבע רקע: #244f7d1c;
}
.menuBtn {
 יישר-עצמי: מרכז;
 ליישר-עצמי: להגמיש-הַתחָלָה; 
 להצדיק את עצמי: להגמיש-סוֹף;
 צֶבַע: #B2BAC2;
 צבע רקע: שקוף;
 גבול: אין;
 סמן: מצביע;
 padding-left: 20px;
}

הגדרת נתב React

רכיבי ה-div המוחזרים על ידי פונקציית המפה צריכים להיות קישורים. ב-React, אתה יכול ליצור קישורים ומסלולים באמצעות react-router-dom.

בטרמינל, התקן את react-router-dom דרך npm.

npm להתקין react-router-dom@הכי מאוחר

פקודה זו מתקינה את הגרסה האחרונה של react-router-dom.

ב-Index.js, עטפו את רכיב האפליקציה עם הנתב.

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא ReactDOM מ 'react-dom/client';
יְבוּא אפליקציה מ './אפליקציה';
יְבוּא { BrowserRouter } מ 'react-router-dom';
const root = ReactDOM.createRoot(מסמך.getElementById('root'));
שורש.לְדַקלֵם(
<לְהָגִיב. StrictMode>
<נתב דפדפן>
<אפליקציה />
</BrowserRouter>
</React.StrictMode>
);

לאחר מכן, ב-App.js, הוסף את המסלולים שלך.

יְבוּא {
 נתב דפדפן,
 מסלולים,
 מַסלוּל,
} מ "תגובה-נתב-דום";
יְבוּא './App.css';
יְבוּא סידנב מ './רכיבים/סידנב';
יְבוּא לַחקוֹר מ "./Pages/Explore";
יְבוּא בית מ "./Pages/Home";
יְבוּא הגדרות מ "./Pages/Settings";
יְבוּא סטָטִיסטִיקָה מ "./Pages/Statistics";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<div className="אפליקציה">
<סידנב/>
<רָאשִׁי>
<מסלולים>
<נתיב מסלול="/" element={<בית />}/>
<נתיב מסלול="/explore" element={<גלה />} />
<נתיב מסלול="/statistics" element={<סטטיסטיקה />}/>
<נתיב מסלול="/settings" element={<הגדרות />} />
</Routes>
</main>
</div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

שנה את App.css עם הסגנונות האלה.

גוף {
 שוליים: 0;
 ריפוד: 0;
}
.אפליקציה {
 תצוגה: flex;
}
ראשי {
 ריפוד: 10px;
}

כל מסלול מחזיר עמוד אחר בהתאם לכתובת האתר המועברת ל- אביזרי נתיב. צור תיקייה חדשה בשם דפים והוסף ארבעה רכיבים - דף הבית, חקור, סטטיסטיקות והגדרות. הנה דוגמה:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהבית() {
לַחֲזוֹר (
<div>בית</div>
 )
}

אם אתה מבקר בנתיב /home, אתה אמור לראות "בית".

הקישורים בסרגל הצד צריכים להוביל לדף התואם כשאתה לוחץ עליהם. ב-Sidenav.js, שנה את פונקציית המפה כדי להשתמש ברכיב NavLink מ-react-router-dom במקום באלמנט div.

{navData.map (פריט => {
 לַחֲזוֹר <NavLink key={item.id} className={styles.sideitem} to={item.link}>
 {item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}

זכור לייבא את NavLink בחלק העליון של הקובץ.

יְבוּא { NavLink } מ "react-router-dom";

NavLink מקבל את נתיב ה-URL עבור הקישור דרך ה-to prop.

עד לנקודה זו, סרגל הניווט פתוח. כדי להפוך אותו למתקפל, אתה יכול לשנות את הרוחב שלו על ידי שינוי מחלקת ה-CSS כאשר משתמש לוחץ על לחצן החץ. לאחר מכן תוכל לשנות שוב את מחלקת ה-CSS כדי לפתוח אותה.

כדי להשיג את פונקציונליות ההחלפה הזו, עליך לדעת מתי סרגל הצד פתוח וסגור.

לשם כך, השתמש ב- useState hook. זֶה וו תגובה מאפשר לך להוסיף ולעקוב אחר המצב ברכיב פונקציונלי.

ב-sideNav.js, צור את ה-hook למצב הפתוח.

const [open, setopen] = useState(נָכוֹן)

אתחול המצב הפתוח למצב נכון, כך שהסרגל הצדדי תמיד יהיה פתוח כאשר אתה מפעיל את היישום.

לאחר מכן, צור את הפונקציה שתחליף מצב זה.

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

כעת אתה יכול להשתמש בערך הפתוח כדי ליצור מחלקות CSS דינמיות כמו זה:

<div className={פתוח? styles.sidenav: styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
 {לִפְתוֹחַ? <KeyboardDouble ArrowLeftIcon />: <KeyboardDouble ArrowRightIcon />}
</button>
 {navData.map (פריט =>{
 לַחֲזוֹר <NavLink key={item.id} className={styles.sideitem} to={item.link}>
 {item.icon}
<span className={פתוח? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
 })}
</div>

שמות מחלקות ה-CSS בשימוש ייקבעו לפי המצב הפתוח. לדוגמה, אם open הוא true, לרכיב החיצוני div יהיה שם מחלקה sidenav. אחרת, הכיתה תהיה סגורה.

זה זהה לסמל, שמשתנה לסמל החץ הימני כאשר אתה סוגר את סרגל הצד.

זכור לייבא אותו.

יְבוּא KeyboardDouble ArrowRightIcon מ '@mui/icons-material/KeyboardDoubleArrowRight';

רכיב סרגל הצד ניתן כעת לקיפול.

קח את הקוד המלא מכאן מאגר GitHub ותנסה את זה בעצמך.

עיצוב רכיבי React

React עושה את זה פשוט לבנות רכיב ניווט מתקפל. אתה יכול להשתמש בחלק מהכלים ש-React מספקת כמו react-router-dom כדי לטפל בניתוב ו-hooks כדי לעקוב אחר המצב הממוטט.

אתה יכול גם להשתמש במודולי CSS כדי לסגנן רכיבים, אם כי אינך חייב. השתמש בהם כדי ליצור מחלקות בהיקף מקומי שהן ייחודיות ושניתן לנער אותן מקבצי החבילה אם הן אינן בשימוש.