React を使用して固定ナビゲーション バーと折りたたみ可能な固定サイドバー ページを実装する

Question

React および chakra-ui コンポーネントを使用して、固定ナビゲーション バーと折りたたみ可能な固定サイドバーを備えたページを実装しようとしています。以下はサンプルコードです。

import { Box } from "@chakra-ui/react";

エクスポート const App = () => {
  戻る （
    <ボックス表示="フレックス">
      <ボックスの位置="固定" 幅="200px" 高さ="100%" bg="red" /> {/* サイドバー */}
      <ボックス フレックス = "1" 位置 = "固定" >
        <ボックスの位置="固定" top="0" width="100%" height="50px" bg="blue" /> {/* ナビゲーションバー */}
        <ボックス mt="50px" p="4">
          {/* 残りのコンテンツ */}
        </ボックス>
      </ボックス>
    </ボックス>
  );
};

しかし、上部のナビゲーション バーの幅は私の期待に達することはありませんでした。これが現在の出力です。

次の出力を実現したいと考えています。

赤いボックスはサイドバー、青いボックスはトップナビゲーションバーです。両氏は現職に留まる見通し。私の期待を達成する方法についていくつかの提案をお願いします。とても感謝します！

Answer 1

＃＃＃あなたが試すことができます：＃＃＃ リーリー

200px はサイドバーの幅であることに注意してください