Question

我试图创建一个视图，该视图的左侧有水平导航栏（主栏）和垂直侧栏，并在其中渲染内容，对于主栏，我使用了Semantic UI menu和{{3} }用于侧边栏，而内容是react-sidenav，问题在于该侧边栏同时覆盖了内容和主栏，如该图所示，并且在切换时它不推送内容，而是覆盖了内容（ group of items也会出现相同的问题。

Semantic UI vertical menu

this image shows how the bars appear

不过，我要寻找的是将主工具栏放在所有内容的顶部，而在其下方，侧边栏用于推送内容而不覆盖其内容，如下所示。我不知道问题出在哪里。

also this image shows toggled sidebar

this image shows wanted appearance and behavior

这是我的代码：

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;

我们非常感谢您的帮助。

React Sidenav涵盖内容

0 个答案: