반응 jsx에서 햄버거 메뉴를 전체 페이지에 맞추는 방법
<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>
