För bättre redability kolla detta inlägg på Medium

Letar du efter en snabb, enkel, snygg och responsiv meny?
Här är en guide för hur du uppnår en responsiv hamburgermeny med React och Tailwind.
Om du vill hoppa till koden direkt, Här är länken

Jag antar att du redan har ett reaktionsprojekt på egen hand.
Om du inte gör det kan du snabbt skapa en med:

npx create-react-app folderWhereToSetUpTheReactProject

Tailwind Css är ett populärt ramverk för användargränssnitt som tillåter att lägga till stil bara genom HTML-klasser.
Tanken är att det finns en klass för alla css-egenskaper du någonsin kommer att behöva, på så sätt behöver du inte skriva någon stil.

Ansvarsfriskrivning: Personlig åsikt framåt
Många människor använder den här typen av ramverk med tanken att de hjälper dem att bygga gränssnittet snabbare.
Jag känner att det ofta tar mig mer tid att lära mig ramverket än att skriva css själv.
Om jag stöter på ett problem måste jag också hitta en lösning relaterad till det specifika ramverket när det kanske är lättare att hitta en generell lösning.
Jag säger inte att dessa ramar är dåliga. Det beror mycket på projektkraven, teamet, kompetensnivån och så vidare.
Jag skulle bara vilja tipsa om att dessa ramverk inte magiskt löser alla dina css- och timingproblem. Tänk på att du fortfarande kommer att behöva tid för att lära dig ramverket och att du fortfarande behöver ha en anständig förståelse för CS
Hur fungerar Tailwind?

Från deras officiella sida:

Tailwind CSS fungerar genom att skanna alla dina HTML-filer, JavaScript-komponenter och alla andra mallar för klassnamn, generera motsvarande stilar och sedan skriva dem till en statisk CSS-fil.

I princip läser den alla klasser som finns i HTML- eller JS-filer, genererar css för den och skriver sedan en statisk css-fil.

Därför om vi arbetar med React betyder det att vi helt enkelt kan konfigurera medvind, skriva klasser i JSX, inkludera en stilfil och allt kommer att fungera bra.

Tailwind Css-dokumentationen är välgjord och ger oss olika guider för att sätta upp Tailwind i en annan miljö. För en react-app kan vi välja exemplet med Create React-appen:medvindsdokument

Vad vi behöver göra är att först installera alla nödvändiga beroenden och skapa den nödvändiga konfigurationsfilen:

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

Om du kollar i din projektmapp bör du nu ha en tailwind.config.js fil.
Till den här filen lägger vi till en sökväg i content: [] array.array.
Lägg till ./src/**/*.{js,jsx,ts,tsx} för att säga till medvinden att söka efter alla filer i src mapp som har js, jsx, ts, tsx förlängning.

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

Sist, lägg till medvindsdirektiv till en css-fil.
Om du skapade projektet med CRA kan du lägga till detta i src/index.css.
Annars behöver du bara lägga till dessa direktiv till alla css-filer du har i projektet. Det bör vara en överordnad css-stil, så den som inkluderar alla andra.
Den här filen måste inkluderas i index.js eller App.js eller hur din appbehållarkomponent heter. På detta sätt är vi säkra på att alla barnkomponenter ingår i Tailwind Css.

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

Nu kan du lägga till några medvindsklasser till någon av dina komponenter och se om det fungerar korrekt:

// App.js

  Hello world!

och sedan helt enkelt starta projektet

// Terminal
> npm start

Låt oss först se hur HTML/Tailwind-delen är kodad, vi kommer att lägga till React senare i den.

Så här är koden som visar hamburgerikonen på mobilen och menyalternativen på större skärmar.
I vilken komponent vi än vill visa vår meny kommer vi att ha denna JSX:

Klasserna skrivna med versaler är bara en indikator som lagts till av mig för att visa vilket UI-objekt som elementet innehåller.

Varje klass som läggs till här är en specifik Tailwind-klass som ger en specifik stil: px-8 ger horisontell utfyllnad, mb-8 ger marginal botten, flex är att ställa in displayflex, och så vidare.
Tack vare dessa klasser kan vi dölja och visa mobil- och skrivbordsmenyn:
Nära MOBILE-MENU kan du se lg:hidden vilket betyder att vänligen dölj denna DIV på en stor skärm.
På DESKTOP-MENY finns en dold klass. När är bara klassnamnet utan mediaquery-indikation, betyder det att det börjar från 0px med. Alltså mobilt eller minsta mediaquery.
Sedan säger vi lg:flex för att visa det på större mediaquery, precis när vi gömmer mobilmenyn.

Låt oss nu lägga till funktionalitet för att öppna och stänga mobilmenyn.

För att göra det måste vi använda useState-kroken.
Först importerar jag den (rad 3), sedan definierar jag värdet och sättaren för tillståndet och jag initierar isNavOpen med värdet false — För till en början är mobilmenyn nära.
Sedan på rad 17 växlar jag tillståndet vid varje klick - när användaren klickar på hamburgerikonen vill jag ändra boolean från sant till falskt och tvärtom. Så om det är nära öppnas det, om det är öppet stängs det.
Sist, på rad 27 satte jag tillståndet isNavOpen till false . Detta utlöses av ett klick från användaren på "X"-ikonen och används för att stänga mobilmenyn.
// fullständig kodlänk

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;
      }
    `}
    
  );
}

Och här är den: En enkel, stilren design, responsiv och funktionell hamburgermeny med React och Tailwind Css ramverk!