לאפשרות אדומה טובה יותר, עיין בפוסט הזה בינוני

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

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

npx create-react-app folderWhereToSetUpTheReactProject

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

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

מהעמוד הרשמי שלהם:

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

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

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

תיעוד Tailwind Css עשוי היטב ונותן לנו מדריכים שונים להגדרת Tailwind בסביבה אחרת. עבור אפליקציית react נוכל לבחור את הדוגמה באמצעות Create React App:מסמכי רוח גב

מה שנצטרך לעשות הוא קודם כל להתקין את כל התלות הנדרשת וליצור את קובץ התצורה הנדרש:

// Terminal
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init

אם אתה בודק בתיקיית הפרויקט שלך, אמור להיות לך כעת א tailwind.config.js קובץ.
לקובץ זה, אנו מוסיפים נתיב ב- content: [] מערך.
להוסיף ./src/**/*.{js,jsx,ts,tsx} להורות לרוח הגבית לסרוק את כל הקבצים ב- src תיקייה שיש js, jsx, ts, tsx סיומת.

// tailwind.config.js
module.exports = {  content: [
    './src/**/*.{js,jsx,ts,tsx}' 
  ],  theme: {  extend: {},  },  plugins: [],}

לבסוף, הוסף הנחיות רוח גבית לקובץ css.
אם יצרת את הפרויקט עם CRA, תוכל להוסיף את זה ל- src/index.css.
אחרת, אתה רק צריך להוסיף את ההנחיות האלה לכל קובץ css שיש לך בפרויקט. זה צריך להיות סגנון css אב, אז זה שכולל את כל השאר.
יש לכלול את הקובץ הזה ב-index.js או App.js, או איך קוראים לרכיב המכיל של האפליקציה שלך. בצורה זו אנו בטוחים שכל רכיבי הילדים כלולים ב-Tailwind Css.

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

עכשיו אתה יכול להוסיף כמה מחלקות רוח גבית לכל אחד מהרכיבים שלך ולראות אם זה עובד כמו שצריך:

// App.js

  Hello world!

ואז פשוט להתחיל את הפרויקט

// Terminal
> npm start

ראשית, בואו נראה איך מקודד החלק HTML/Tailwind, נוסיף לו את React מאוחר יותר.

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

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

כל מחלקה שנוספה כאן היא מחלקה ספציפית של Tailwind שנותנת סגנון ספציפי: px-8 נותן ריפוד אופקי, mb-8 נותן שוליים תחתית, flex הוא להגדיר פלקס של התצוגה, וכן הלאה.
הודות לשיעורים הללו נוכל להסתיר ולהציג את התפריט לנייד ולשולחן העבודה:
ליד MOBILE-MENU אתה יכול לראות את lg:hidden כלומר בבקשה הסתר את ה-DIV הזה על מסך גדול.
ב-DESKTOP-MENU יש שיעור נסתר. מתי הוא רק שם המחלקה ללא חיווי Mediaquery, זה אומר שהוא יתחיל מ-0px עם. אז נייד או המדיה הקטנה ביותר.
אז אנחנו אומרים lg:flex כדי להציג אותו ב-mediaquery גדול יותר, בדיוק כשאנחנו מסתירים את התפריט הנייד.

כעת נוסיף פונקציונליות כדי לפתוח ולסגור את תפריט הנייד.

כדי לעשות זאת, עלינו להשתמש ב- useState hook.
ראשית, אני מייבא את זה (שורה 3), אחר כך אני מגדיר את הערך ואת הקובע של המצב ואני מתחיל את ה-isNavOpen עם הערך של false - כי בהתחלה, התפריט הנייד קרוב.
ואז בשורה 17, אני משנה את המצב בכל לחיצה - בכל פעם שהמשתמש לוחץ על סמל ההמבורגר אני רוצה לשנות את הערך בוליאני מאמת לשקר ולהיפך. אז אם הוא קרוב הוא ייפתח, אם הוא פתוח הוא ייסגר.
לבסוף, בשורה 27 הגדרתי את המצב isNavOpen ל-false . זה מופעל על ידי לחיצה מהמשתמש על הסמל 'X' ומשמש לסגירת תפריט הנייד.
// קישור קוד מלא

import { useState } from "react"; // import state

export default function Header() {
  const [isNavOpen, setIsNavOpen] = useState(false); // initiate isNavOpen state with false

  return (
    

      
        
      
      
      {`
      .hideMenuNav {
        display: none;
      }
      .showMenuNav {
        display: block;
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background: white;
        z-index: 10;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
    `}
    
  );
}

והנה: תפריט המבורגרים פשוט ונקי, רספונסיבי ופונקציונלי עם מסגרת React ו-Tailwind Css!