React Semanti c UI Fixed Vertical Menu охватывает контент - PullRequest
Новая
       65

React Semanti c UI Fixed Vertical Menu охватывает контент

0 голосов
/ 26 мая 2020

Я использую React Semanti c Фиксированное вертикальное меню пользовательского интерфейса, однако оно охватывает другой контент. Интересно, как заставить его раскрывать контент и предотвратить его перекрытие с контентом при изменении размера окна. Вот мой код, в чем может быть проблема?

Горизонтальное меню: Эта ссылка

Вертикальное меню: Эта ссылка

Группа товаров в содержании: Эта ссылка 

 import React, { Fragment } from "react";
    import { Container, Menu, Label, Input, Item } from "semantic-ui-react";

    function App() {
      return (
        <Fragment>
          <Menu inverted>
            <Menu.Item name="home" />
            <Menu.Item name="messages" />
            <Menu.Item name="friends" />
            <Menu.Item name="settings" />
            <Menu.Item name="profile" />
          </Menu>

          <Menu vertical fixed="left">
            <Menu.Item name="inbox">
              <Label color="teal">1</Label>
              Inbox
            </Menu.Item>

            <Menu.Item name="spam">
              <Label>51</Label>
              Spam
            </Menu.Item>

            <Menu.Item name="updates">
              <Label>1</Label>
              Updates
            </Menu.Item>
            <Menu.Item>
              <Input icon="search" placeholder="Search mail..." />
            </Menu.Item>
          </Menu>
          <Container>
            <Item.Group link>
              <Item>
                <Item.Image size="tiny" src="https://www.gravatar.com/avatar/0" />

                <Item.Content>
                  <Item.Header>Stevie Feliciano</Item.Header>
                  <Item.Description>Text</Item.Description>
                </Item.Content>
              </Item>

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

                <Item.Content>
                  <Item.Header>Veronika Ossi</Item.Header>
                  <Item.Description>Text</Item.Description>
                </Item.Content>
              </Item>

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

                <Item.Content>
                  <Item.Header>Jenny Hess</Item.Header>
                  <Item.Description>Text</Item.Description>
                </Item.Content>
              </Item>
            </Item.Group>
          </Container>
        </Fragment>
      );
    }

export default App;

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

...