React를 사용하여 고정 탐색 모음 및 접을 수 있는 고정 사이드바 페이지 구현

Question

React 및 chakra-ui 구성 요소를 사용하여 고정 탐색 표시줄과 접을 수 있는 고정 사이드바가 있는 페이지를 구현하려고 합니다. 아래는 샘플 코드입니다.

"@chakra-ui/react"에서 { Box } 가져오기;;

const 앱 내보내기 = () =>
  반품 (
    <박스 디스플레이="플렉스">
      <상자 위치='고정' 너비='200px' 높이='100%' bg='빨간색' />
      <박스 플렉스="1" 위치="고정">
        <상자 위치='0' 폭 = '50px' bg='파란색' />
        <박스 mt="50px" p="4">
          {/* 나머지 내용 */}
        </박스>
      </박스>
    </박스>
  );
};

하지만 이제 상단 탐색 모음의 너비는 기대에 미치지 못했습니다. 이것이 현재 출력입니다.

저는 다음과 같은 결과를 얻고 싶습니다.

빨간색 상자는 사이드바이고 파란색 상자는 상단 탐색 모음입니다. 두 사람 모두 현재 위치를 유지할 것으로 예상된다. 내 기대를 달성하는 방법에 대한 몇 가지 제안을 제공해주십시오. 나는 매우 감사할 것이다!

Answer 1

해볼 수 있는 방법:

으아악

사이드바 너비는 200px입니다