How to make hamburger menu fit to whole page in react jsx

Question

I'm new to React jsx, I'm using Tailwind and it's very good. I’m also learning as I go. So, in my navigation, I am able to display the hamburger menu, but I don't like the way they are displayed. I'm trying to make sure the entire page is filled with white, see second image below.

This is what I was able to achieve, but I don't think it looks too clean

What I want to achieve, or something like that, is to fill the entire site with white and show the options

My question now is, with my code; how can I do this? This is my navigation jsx, I would appreciate any help. I'm the only team member and there's no lead developer available to help.

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

Answer 1

To fill the entire page with white or another background color, you need an outer div with the height set to 100vh and the width set to 100vw. 100vh sets the height to 100% of the web browser screen viewport height, and 100vw sets the height to 100% of the viewport width.

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>

Setting maxWidth to 100% is to prevent the scroll bar from being displayed when the body tag has padding or other external components take up space.

The above makes the motion.nav component occupy the entire page. You may want to move the entire page div up to use the JSX of the component.

Hope this helps.