Bagaimana untuk menjadikan menu hamburger sesuai dengan keseluruhan halaman dalam react jsx

Question

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.

Inilah yang saya dapat capai, tetapi saya rasa ia tidak kelihatan terlalu bersih

Apa yang saya ingin capai, atau sesuatu seperti itu, ialah mengisi seluruh tapak dengan warna putih dan menunjukkan pilihan

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.

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

Answer 1

Untuk mengisi keseluruhan halaman dengan warna putih atau warna latar belakang yang lain, anda memerlukan div luar, tetapkan ketinggian kepada 100vh dan lebar kepada 100vw. 100vh menetapkan ketinggian kepada 100% daripada ketinggian port pandangan skrin pelayar web, dan 100vw menetapkan ketinggian kepada 100% daripada lebar port pandangan.

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>

Menetapkan maxWidth kepada 100% adalah untuk mengelakkan bar skrol daripada dipaparkan apabila tag badan mempunyai padding atau komponen luaran lain mengambil ruang.

Di atas menjadikan komponen motion.nav menduduki seluruh halaman. Anda mungkin mahu mengalihkan keseluruhan div halaman ke atas untuk menggunakan JSX komponen.

Semoga ini membantu.