How to make hamburger menu fit to whole page in react jsx
<p>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. </p>
<p>This is what I was able to achieve, but I don't think it looks too clean</p>
<p>What I want to achieve, or something like that, is to fill the entire site with white and show the options</p>
<p>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.</p>
<pre class="brush:php;toolbar:false;">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>
);
}</pre></p>
