Bagaimana untuk menjadikan menu hamburger sesuai dengan keseluruhan halaman dalam react jsx
<p>Saya baru menggunakan React jsx, saya menggunakan Tailwind dan ia sangat bagus. Saya juga sedang belajar sambil berjalan. Jadi dalam navigasi saya, saya boleh memaparkan menu hamburger tetapi saya tidak suka cara ia dipaparkan. Saya cuba memastikan keseluruhan halaman diisi dengan warna putih, lihat imej kedua di bawah. </p>
<p>Inilah yang saya dapat capai, tetapi saya rasa ia tidak kelihatan terlalu bersih</p>
<p>Apa yang saya ingin capai, atau sesuatu seperti itu, ialah mengisi seluruh tapak dengan warna putih dan menunjukkan pilihan</p>
<p>Soalan saya sekarang ialah, dengan kod saya; Ini adalah jsx navigasi saya, saya akan menghargai sebarang bantuan. Saya satu-satunya ahli pasukan dan tiada pembangun utama tersedia untuk membantu.</p>
<pre class="brush:php;toolbar:false;">import logo dari "./favicon.png";
import { motion } daripada "framer-motion";
import { useInView } daripada "react-intersection-observer";
import MenuDropdown daripada "./MenuDropdown";
import { Pautan } daripada "react-router-dom";
import { useState } daripada "react";
eksport fungsi lalai Navigation() {
const [ref, inView] = useInView({ triggerOnce: false });
const [isOpen, setIsOpen] = useState(false);
const [navVisible, setNaVisible] = useState(false);
const megaMenu = document.getElementById("mega-menu");
kembali (
<motion.nav
className="lenturkan item-pusat justify-antara flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto"
ref={ref}
permulaan={{ y: -10, kelegapan: 0 }}
animate={inView ? { y: 0, kelegapan: 1 } : {}}
keluar={{ y: -10, kelegapan: 0 }}
peralihan={{ tempoh: 0.5 }}
>
<a
href="/"
className="item baris lentur lentur-pusat lentur-mengecut-0 teks-putih mr-6 lg:pr-16 ruang-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="sekat lg:tersembunyi">
<butang
className="lentur item-pusat px-3 py-2 sempadan bulat teks-slate-200 sempadan-slate-400 duration-100 hover:teks-white hover:border-white"
onClick={() => setNaVisible(!navVisible)}
>
<svg
className="isi-semasa h-3 w-3"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<title>Menu</title>
<laluan d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</butang>
</div>
<div
Nama kelas={`
${
navVisible
? "w-blok penuh flex-grow g:flex lg:item-center lg:w-auto"
: "lg:flex flex-tiada w-6/12 tersembunyi lg:kanan-kanan"
}`}
>
<div
Nama kelas={`
${
navVisible
? "lg:flex-grow flex flex-col text-sm"
: "lg:flex-grow flex flex-rows space-x-12 text-sm "
}`}
>
<div
Nama kelas={`${
!navVisible
? "item baris lentur-lentur-ruang tengah-x-2 teks-putih"
: "lenturkan-baris item-ruang tengah-x-2 teks-putih justify-tamat pr-12"
}`}
>
<span className="cincin-1 p-0.5 cincin-putih bulat-penuh"></span>
<Pautan
kepada="projek"
Nama kelas={`${
!navVisible
? "block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
: "sekat mt-4 lg:sekat-sebaris lg:mt-0 teks-putih mr-4 justify-end "
}`}
>
Kerja
</Pautan>
</div>
{!navVisible ? (
<div
id="mega-menu"
className={`flex item-center space-x-2 flex-rows text-white
`}
onClick={() => setIsOpen((sebelum) => !sebelumnya)}
>
<span className="cincin-1 p-0.5 cincin-putih bulat-penuh"></span>
<div className="block mt-4 lg:inline-block lg:mt-0 mr-4 cursor-pointer">
Kecekapan
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
isi="tiada"
viewBox="0 0 24 24"
strokeWidth={1}
stroke="warna semasa"
className="w-4 h-4"
>
<laluan
strokeLinecap="pusingan"
strokeLinejoin="pusingan"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
) : (
<div
Nama kelas={`${
!navVisible
? "item baris lentur-lentur-ruang tengah-x-2 teks-putih"
: "lenturkan-baris item-ruang tengah-x-2 teks-putih justify-end"
}`}
>
<span className="cincin-1 p-0.5 cincin-putih bulat-penuh"></span>
<Pautan
kepada="strategi"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1"
>
Kecekapan
</Pautan>
</div>
)}
<div
Nama kelas={`${
!navVisible
? "item baris lentur-lentur-ruang tengah-x-2 teks-putih"
: "lenturkan-baris item-ruang tengah-x-2 teks-putih justify-tamat pr-10"
}`}
>
<span className="ring-1 p-0.5 cincin-putih bulat-penuh"></span>
<a
href="tentang"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
>
Tentang
</a>
</div>
<div
Nama kelas={`${
!navVisible
? "item baris lentur-lentur-ruang tengah-x-2 teks-putih"
: "lenturkan-baris item-ruang tengah-x-2 teks-putih justify-akhir pr-7"
}`}
>
<span className="ring-1 p-0.5 cincin-putih bulat-penuh"></span>
<a
href="kerjaya"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-7"
>
Kerjaya
</a>
</div>
<div
Nama kelas={`${
!navVisible
? "item baris lentur-lentur-ruang tengah-x-2 teks-putih"
: "lenturkan-baris item-ruang tengah-x-2 teks-putih justify-end pr-7"
}`}
>
<span className="cincin-1 p-0.5 cincin-putih bulat-penuh"></span>
<a
href="hubungi"
className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
>
Kenalan
</a>
</div>
</div>
</div>
<MenuDropdown isOpen={isOpen} setIsOpen={setIsOpen} />
</motion.nav>
);
}</pre></p>
