我对 React jsx 很陌生，我正在使用 Tailwind，它非常好。我也在边走边学。因此，在我的导航中，我能够显示汉堡菜单，但我不喜欢它们的显示方式。我试图确保整个页面都充满白色页面，请参见下面的第二张图片。

这就是我能够实现的目标，但我认为它看起来不太干净

我想要实现的目标，或类似的目标，白色填充整个网站并显示选项

我现在的问题是，用我的代码；我怎样才能做到这一点？这是我的导航 jsx，我将不胜感激任何帮助。我是唯一的团队成员，没有首席开发人员可以提供帮助。

import logo from "./favicon.png";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";
import MenuDropdown from "./MenuDropdown";
import { Link } from "react-router-dom";
import { useState } from "react";

export default function Navigation() {
  const [ref, inView] = useInView({ triggerOnce: false });
  const [isOpen, setIsOpen] = useState(false);

  const [navVisible, setNaVisible] = useState(false);

  const megaMenu = document.getElementById("mega-menu");

  return (
    <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, opacity: 0 }}
      animate={inView ? { y: 0, opacity: 1 } : {}}
      exit={{ y: -10, opacity: 0 }}
      transition={{ duration: 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">
        <button
          className="flex items-center px-3 py-2 border rounded 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>Menu</title>
            <path 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 hidden 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 rounded-full"></span>
            <Link
              to="projects"
              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 "
              }`}
            >
              Work
            </Link>
          </div>

          {!navVisible ? (
            <div
              id="mega-menu"
              className={`flex items-center space-x-2 flex-rows text-white  
          
            `}
              onClick={() => setIsOpen((prev) => !prev)}
            >
              <span className="ring-1 p-0.5 ring-white rounded-full"></span>
              <div className="block mt-4 lg:inline-block lg:mt-0 mr-4 cursor-pointer">
                Effeciencies
              </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"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  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 rounded-full"></span>
              <Link
                to="strategy"
                className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1"
              >
                Effeciencies
              </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 rounded-full"></span>
            <a
              href="about"
              className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
            >
              About
            </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 rounded-full"></span>
            <a
              href="careers"
              className="block mt-4 lg:inline-block lg:mt-0 text-white mr-7"
            >
              Careers
            </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 rounded-full"></span>
            <a
              href="contact"
              className="block mt-4 lg:inline-block lg:mt-0 text-white mr-4"
            >
              Contact
            </a>
          </div>
        </div>
      </div>

      <MenuDropdown isOpen={isOpen} setIsOpen={setIsOpen} />
      
    </motion.nav>
  );
}