React Sidenav покрывает контент

Question

Я пытаюсь создать представление с горизонтальной панелью навигации (Основная панель) и вертикальной боковой панелью слева и отображать содержимое внутри основной панели, я использовал Semanti c Меню пользовательского интерфейса и react-sidenav для боковой панели, а содержимое представляет собой группу элементов , проблема в том, что боковая панель закрывает как содержимое, так и основную панель, как показано на этом изображении, и при переключении он не выводит sh содержимое, а покрывает его (такая же проблема возникает с Semanti c вертикальное меню пользовательского интерфейса ).

это изображение показывает как появляются полосы

также это изображение показывает переключенную боковую панель

Однако то, что я ищу, - это поместить основную панель поверх всего, а под ней боковая панель и содержимое pu sh, не закрывая его, как показано ниже. Я не знаю, в чем проблема.

это изображение показывает требуемый внешний вид и поведение

это изображение показывает желаемый внешний вид и поведение при переключении боковой панели

Вот мой код:

Mainbar.tsx:

import React from "react";
import { Menu } from "semantic-ui-react";

export const Mainbar = () => {
  return (
    <Menu inverted>
      <Menu.Item name="home" />
      <Menu.Item name="messages" />
      <Menu.Item name="friends" />
    </Menu>
  );
};
export default Mainbar;

SideNavbar.tsx:

import React from "react";
import { Icon } from "semantic-ui-react";
import SideNav, { NavItem, NavIcon, NavText } from "@trendmicro/react-sidenav";
import "@trendmicro/react-sidenav/dist/react-sidenav.css";

export const SideNavbar = () => {
  return (
    <SideNav>
      <SideNav.Toggle />

      <SideNav.Nav defaultSelected="home">
        <NavItem eventKey="home">
          <NavIcon>
            <Icon name="home" />
          </NavIcon>
          <NavText>Home</NavText>
        </NavItem>
        <NavItem eventKey="charts">
          <NavIcon>
            <Icon name="chart area" />
          </NavIcon>
          <NavText>Charts</NavText>
          <NavItem eventKey="charts/linechart">
            <NavText>Line Chart</NavText>
          </NavItem>
          <NavItem eventKey="charts/barchart">
            <NavText>Bar Chart</NavText>
          </NavItem>
        </NavItem>
      </SideNav.Nav>
    </SideNav>
  );
};
export default SideNavbar;

Content.tsx:

import React from "react";
import { Item, Image } from "semantic-ui-react";

export const Content = () => {
  return (
    <Item.Group>
      <Item>
        <Item.Image
          size="tiny"
          src="https://www.gravatar.com/avatar/00000000000000000000000000000000"
        />

        <Item.Content>
          <Item.Header>Arrowhead Valley Camp</Item.Header>
          <Item.Meta>
            <span className="price">$1200</span>
            <span className="stay">1 Month</span>
          </Item.Meta>
          <Item.Description>description</Item.Description>
        </Item.Content>
      </Item>

      <Item>
        <Item.Image
          size="tiny"
          src="https://www.gravatar.com/avatar/00000000000000000000000000000000"
        />

        <Item.Content>
          <Item.Header>Buck's Homebrew Stayaway</Item.Header>
          <Item.Meta content="$1000 2 Weeks" />
          <Item.Description>description</Item.Description>
        </Item.Content>
      </Item>

      <Item>
        <Item.Image
          size="tiny"
          src="https://www.gravatar.com/avatar/00000000000000000000000000000000"
        />
        <Item.Content header="Arrowhead Valley Camp" meta="$1200 1 Month" />
      </Item>
    </Item.Group>
  );
};
export default Content;

App.tsx:

import React, { Fragment } from "react";
import { Container } from "semantic-ui-react";

import SideNavbar from "./components/SideNavbar";
import Mainbar from "./components/Mainbar";
import Content from "./components/Content";

const App = () => {
  return (
    <Fragment>
      <Fragment>
        <Mainbar />
        <SideNavbar />
        <Container>
          <Content />
        </Container>
      </Fragment>
      )
    </Fragment>
  );
};

export default App;

Любая помощь приветствуется.