<p>저는 React jsx를 처음 접하고 Tailwind를 사용하고 있는데 매우 좋습니다. 저도 가면서 배우고 있어요. 그래서 내 네비게이션에서 햄버거 메뉴를 표시할 수 있지만 표시되는 방식이 마음에 들지 않습니다. 전체 페이지가 흰색으로 채워졌는지 확인하려고 합니다. 아래 두 번째 이미지를 참조하세요. </p> <p>이게 제가 달성할 수 있었던 것이지만, 그다지 깔끔해 보이지는 않는 것 같습니다</p> <p>제가 이루고 싶은 것, 혹은 그와 유사한 것은 전체 사이트를 흰색으로 채우고 옵션을 표시하는 것입니다</p> <p>지금 제 질문은 제 코드로 어떻게 할 수 있느냐는 것입니다. 이것은 내 탐색 jsx입니다. 도움을 주시면 감사하겠습니다. 저는 유일한 팀원이고 도움을 줄 수 있는 수석 개발자가 없습니다.</p> <pre class="brush:php;toolbar:false;">"./favicon.png"에서 로고 가져오기;; "framer-motion"에서 {모션}을 가져옵니다. "react-intersection-observer"에서 import { useInView }를;; "./MenuDropdown"에서 MenuDropdown을 가져옵니다. import { Link } from "react-router-dom" import { useState } from "반응" 기본 함수 Navigation() 내보내기 { const [ref, inView] = useInView({ TriggerOnce: false }); const [isOpen, setIsOpen] = useState(false); const [navVisible, setNaVisible] = useState(false); const megaMenu = document.getElementById("메가 메뉴"); 반품 ( <모션.nav className="flex items-center justify-between flex-wrap px-6 lg:px-12 py-8 max-w-full mx-auto" 참조={참조} 초기={{ y: -10, 불투명도: 0 }} 애니메이션={inView ? { y: 0, 불투명도: 1 } : {}} 종료={{ y: -10, 불투명도: 0 }} 전환={{ 기간: 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="로고"></img> <h2 className="font-bold text-2xl Tracking-Tight">Jibu Labs</h2> </a> <div id="메뉴" className="lg:숨김 차단"> <버튼 className="flex items-center px-3 py-2 테두리 둥근 text-slate-200 border-slate-400 Duration-100 hover:text-white hover:border-white" onClick={() => setNaVisible(!navVisible)} > <svg className="충전 전류 h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <title>메뉴</title> <경로 d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /> </svg> </버튼> </div> <div 클래스명={` ${ navVisible ? "w-전체 블록 flex-grow g:flex lg:items-center lg:w-auto" : "lg:flex flex-none w-6/12 숨겨진 lg:content-right" }`} > <div 클래스명={` ${ navVisible ? "lg:flex-grow flex flex-col text-sm" : "lg:flex-grow flex flex-rows space-x-12 text-sm " }`} > <div 클래스이름={`${ !nav표시됨 ? "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> <링크 to="프로젝트" 클래스이름={`${ !nav표시됨 ? "mt-4 lg:inline-block lg:mt-0 text-white mr-4 차단" : "mt-4 차단 lg:inline-block lg:mt-0 text-white mr-4 justify-end " }`} > 일하다 </링크> </div> {!navVisible ? ( <div id="메가메뉴" className={`flex items-center space-x-2 flex-rows text-white `} onClick={() => setIsOpen((이전) => !prev)} > <span className="ring-1 p-0.5 ring-white rounded-full"></span> <div className="블록 mt-4 lg:inline-block lg:mt-0 mr-4 커서 포인터"> 효율성 </div> <svg xmlns="http://www.w3.org/2000/svg" fill="없음" viewBox="0 0 24 24" 스트로크 폭={1} 스트로크="현재색상" className="w-4 h-4" > <경로 스트로크라인캡="둥근" 뇌졸중라인조인="라운드" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /> </svg> </div> ) : ( <div 클래스이름={`${ !nav표시됨 ? "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> <링크 to="전략" className="mt-4 차단 lg:inline-block lg:mt-0 text-white mr-4 justify-end pr-1" > 효율성 </링크> </div> )} <div 클래스이름={`${ !nav표시됨 ? "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="정보" className="mt-4 차단 lg:inline-block lg:mt-0 text-white mr-4" > 에 대한 </a> </div> <div 클래스이름={`${ !nav표시됨 ? "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="경력" className="mt-4 차단 lg:inline-block lg:mt-0 text-white mr-7" > 채용 </a> </div> <div 클래스이름={`${ !nav표시됨 ? "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="연락처" className="mt-4 차단 lg:inline-block lg:mt-0 text-white mr-4" > 연락하다 </a> </div> </div> </div> <MenuDropdown isOpen={isOpen} setIsOpen={setIsOpen} /> </motion.nav> ); }</pre></p>