So passen Sie das Hamburger-Menü in React JSX an die gesamte Seite an
<p>Ich bin neu bei React jsx, ich verwende Tailwind und es ist sehr gut. Ich lerne auch, während ich gehe. In meiner Navigation kann ich also Hamburger-Menüs anzeigen, aber die Art und Weise, wie sie angezeigt werden, gefällt mir nicht. Ich versuche sicherzustellen, dass die gesamte Seite mit Weiß gefüllt ist, siehe zweites Bild unten. </p>
<p>Das ist es, was ich erreichen konnte, aber ich glaube nicht, dass es allzu sauber aussieht</p>
<p>Was ich erreichen möchte, oder so etwas in der Art, ist, die gesamte Site mit Weiß zu füllen und die Optionen anzuzeigen</p>
<p>Meine Frage ist nun, wie kann ich das mit meinem Code machen? Das ist mein Navigations-JSX, ich würde mich über jede Hilfe freuen. Ich bin das einzige Teammitglied und es steht kein leitender Entwickler zur Verfügung, der helfen könnte.</p>
<pre class="brush:php;toolbar:false;">Logo importieren aus "./favicon.png";
import {motion} aus „framer-motion“;
import { useInView } from "react-intersection-observer";
importiere MenuDropdown aus "./MenuDropdown";
import { Link } from "react-router-dom";
import { useState } aus "react";
Standardfunktion Navigation() exportieren {
const [ref, inView] = useInView({ triggerOnce: false });
const [isOpen, setIsOpen] = useState(false);
const [navVisible, setNaVisible] = useState(false);
const megaMenu = document.getElementById("mega-menu");
zurückkehren (
<motion.nav
className="flex items-center justify-between flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto"
ref={ref}
initial={{ y: -10, Deckkraft: 0 }}
animate={inView ? { y: 0, Deckkraft: 1 } : {}}
exit={{ y: -10, Deckkraft: 0 }}
Übergang={{ Dauer: 0,5 }}
>
<a
href="/"
className="flex flex-row items-center flex-shrink-0 text-white mr-6 lg:pr-16 space-x-2"
>
<img src={logo} className="w-8 h-8" alt="Logo"></img>
<h2 className="font-bold text-2xl tracking-tight">Jibu Labs</h2>
</a>
<div id="menu" className="block lg:hidden">
<-Taste
className="flex items-center px-3 py-2 border abgerundet text-slate-200 border-slate-400 duration-100 hover:text-white hover:border-white"
onClick={() => setNaVisible(!navVisible)}
>
<svg
className="fill-current h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menü</title>
<Pfad d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div
className={`
${
navVisible
? "w-full block flex-grow g:flex lg:items-center lg:w-auto"
: "lg:flex flex-none w-6/12 versteckt lg:content-right"
}`}
>
<div
className={`
${
navVisible
? "lg:flex-grow flex flex-col text-sm"
: "lg:flex-grow flex flex-rows space-x-12 text-sm "
}`}
>
<div
className={`${
!navVisible
? „flex flex-rows items-center space-x-2 text-white“
: "flex flex-rows items-center space-x-2 text-white justify-end pr-12"
}`}
>
<span className="ring-1 p-0,5 ring-white abgerundet-voll"></span>
<Link
to="Projekte"
className={`${
!navVisible
? "block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
: "block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end "
}`}
>
Arbeiten
</Link>
</div>
{!navVisible ? (
<div
id="Mega-Menü"
className={`flex items-center space-x-2 flex-rows text-white
`}
onClick={() => setIsOpen((prev) => !prev)}
>
<span className="ring-1 p-0,5 ring-white abgerundet-voll"></span>
<div className="block mt-4 lg:inline-block lg:mt-0 mr-4 Cursor-Pointer">
Effizienzen
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
StrokeWidth={1}
Stroke="currentColor"
className="w-4 h-4"
>
<Pfad
StrokeLinecap="rund"
StrokeLinejoin="rund"
d = „M19,5 8,25l-7,5 7,5-7,5-7,5“
/>
</svg>
</div>
) : (
<div
className={`${
!navVisible
? „flex flex-rows items-center space-x-2 text-white“
: "flex flex-rows items-center space-x-2 text-white justify-end"
}`}
>
<span className="ring-1 p-0,5 ring-white abgerundet-voll"></span>
<Link
to="Strategie"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1"
>
Effizienzen
</Link>
</div>
)}
<div
className={`${
!navVisible
? „flex flex-rows items-center space-x-2 text-white“
: "flex flex-rows items-center space-x-2 text-white justify-end pr-10"
}`}
>
<span className="ring-1 p-0,5 ring-white abgerundet-voll"></span>
<a
href="about"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
>
Um
</a>
</div>
<div
className={`${
!navVisible
? „flex flex-rows items-center space-x-2 text-white“
: "flex flex-rows items-center space-x-2 text-white justify-end pr-7"
}`}
>
<span className="ring-1 p-0,5 ring-white abgerundet-voll"></span>
<a
href="Karriere"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-7"
>
Karriere
</a>
</div>
<div
className={`${
!navVisible
? „flex flex-rows items-center space-x-2 text-white“
: "flex flex-rows items-center space-x-2 text-white justify-end pr-7"
}`}
>
<span className="ring-1 p-0,5 ring-white abgerundet-voll"></span>
<a
href="Kontakt"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
>
Kontakt
</a>
</div>
</div>
</div>
<MenuDropdown isOpen={isOpen} setIsOpen={setIsOpen} />
</motion.nav>
);
}</pre></p>
