<p>Saya cuba melaksanakan halaman dengan bar navigasi tetap dan bar sisi tetap boleh dilipat menggunakan <strong>React</strong> dan <strong>chakra-ui</strong> Di bawah adalah contoh kod. </p> <pre class="brush:php;toolbar:false;">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> ); };</pre> <p>Tetapi kini lebar bar navigasi atas tidak pernah mencapai jangkaan saya. Ini adalah keluaran semasanya. </p> <p>Saya mahu mencapai output berikut. </p> <p>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! </p>

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