亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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

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>