Verwenden Sie React, um eine feste Navigationsleiste und zusammenklappbare feste Seitenleistenseiten zu implementieren

Question

Ich versuche, eine Seite mit einer festen Navigationsleiste und einer ausklappbaren festen Seitenleiste zu implementieren, indem ich die Komponenten React verwende. Unten finden Sie Beispielcode.

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

export const App = () =>
  zurückkehren (
    <Box display="flex">
      <Box position="fixed" height="100%"
      <Box flex="1" position="fixed">
        "Box position="fixed" width="50px"
        <Box mt="50px" p="4">
          {/* Restlicher Inhalt */}
        </Box>
      </Box>
    </Box>
  );
};

Aber jetzt hat die Breite der oberen Navigationsleiste nie meine Erwartungen erreicht. Dies ist die aktuelle Ausgabe.

Ich möchte die folgende Ausgabe erreichen.

Das rote Feld ist die Seitenleiste und das blaue Feld ist die obere Navigationsleiste. Es wird erwartet, dass beide in ihren derzeitigen Positionen bleiben. Bitte machen Sie einige Vorschläge, wie ich meine Erwartungen erfüllen kann. Ich werde sehr dankbar sein!

Answer 1

你可以尝试：

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

注意 200px 是侧边栏宽度