반응 jsx에서 햄버거 메뉴를 전체 페이지에 맞추는 방법

Question

저는 React jsx를 처음 접하고 Tailwind를 사용하고 있는데 매우 좋습니다. 저도 가면서 배우고 있어요. 그래서 내 네비게이션에서 햄버거 메뉴를 표시할 수 있지만 표시되는 방식이 마음에 들지 않습니다. 전체 페이지가 흰색으로 채워졌는지 확인하려고 합니다. 아래 두 번째 이미지를 참조하세요.

이게 제가 달성할 수 있었던 것이지만, 그다지 깔끔해 보이지는 않는 것 같습니다

제가 이루고 싶은 것, 혹은 그와 유사한 것은 전체 사이트를 흰색으로 채우고 옵션을 표시하는 것입니다

지금 제 질문은 제 코드로 어떻게 할 수 있느냐는 것입니다. 이것은 내 탐색 jsx입니다. 도움을 주시면 감사하겠습니다. 저는 유일한 팀원이고 도움을 줄 수 있는 수석 개발자가 없습니다.

"./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>
  );
}

Answer 1

전체 페이지를 흰색이나 다른 배경색으로 채우려면 외부 div가 필요하며 높이를 100vh로, 너비를 100vw로 설정하세요. 100vh는 높이를 웹 브라우저 화면 뷰포트 높이의 100%로 설정하고, 100vw는 높이를 뷰포트 너비의 100%로 설정합니다.

으아악

maxWidth를 100%로 설정하면 body 태그에 패딩이나 기타 외부 구성 요소가 공간을 차지할 때 스크롤 막대가 표시되는 것을 방지할 수 있습니다.

위에서는 Motion.nav 구성 요소가 전체 페이지를 차지하게 됩니다. 구성 요소의 JSX를 사용하려면 전체 페이지 div를 위로 이동할 수 있습니다.

도움이 되기를 바랍니다.