<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>

return (
   <div style={{height: "100vh", width: "100vw", maxWidth: "100%", background: "white"}}>
    <motion.nav
      className="flex items-center justify-between flex-wrap px-6 lg:px-12 
   ...
    </motion.nav>
  </div>