Gunakan React untuk melaksanakan bar navigasi tetap dan halaman bar sisi tetap yang boleh dilipat

Question

Saya cuba melaksanakan halaman dengan bar navigasi tetap dan bar sisi tetap boleh dilipat menggunakan React dan chakra-ui Di bawah adalah contoh kod.

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

eksport const App = () =>
  kembali (
    <Paparan kotak="flex">
      <Kedudukan kotak="lebar"200px"tinggi="100%"
      <Kotak flex="1" kedudukan="tetap">
        <Kedudukan kotak="tetap" atas="0" lebar="100%"
        <Kotak mt="50px" p="4">
          {/* Kandungan rehat */}
        </Kotak>
      </Kotak>
    </Kotak>
  );
};

Tetapi kini lebar bar navigasi atas tidak pernah mencapai jangkaan saya. Ini adalah keluaran semasanya.

Saya mahu mencapai output berikut.

Kotak merah ialah bar sisi dan kotak biru ialah bar navigasi atas. Kedua-duanya dijangka kekal dalam kedudukan mereka sekarang. Sila berikan beberapa cadangan tentang cara mencapai jangkaan saya. Saya akan sangat berterima kasih!

Answer 1

Anda boleh mencuba:

<Box position="fixed" top="0" right="0" width="calc(100vh - 200px)" height="50px" bg="blue" /> {/* Navbar */}

Perhatikan bahawa 200px ialah lebar bar sisi