<p>J'essaie d'implémenter une page avec une barre de navigation fixe et une barre latérale fixe pliable à l'aide des composants <strong>React</strong> Vous trouverez ci-dessous un exemple de code. </p> <pre class="brush:php;toolbar:false;">importer { Box } depuis "@chakra-ui/react" ; exporter const App = () => retour ( <Affichage de la boîte="flex"> <Position de la boîte="fixe" largeur="200px" hauteur="100 %" bg="rouge" {/* Barre latérale */} <Box flex="1" position="fixe"> <Position de la boîte="fixe" top="0" largeur="100%" hauteur="50px" bg="bleu" {/* Barre de navigation */} <Boîte mt="50px" p="4"> {/* Rester le contenu */} ≪/Boîte> ≪/Boîte> ≪/Boîte> ); };</pré> <p>Mais maintenant, la largeur de la barre de navigation supérieure n'a jamais atteint mes attentes. C'est sa sortie actuelle. </p> <p>Je souhaite obtenir le résultat suivant. </p> <p>La case rouge est la barre latérale et la case bleue est la barre de navigation supérieure. Tous deux devraient conserver leur poste actuel. Veuillez fournir quelques suggestions sur la façon de répondre à mes attentes. Je serai très reconnaissant! </p>

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