Содержание страницы не отображается с помощью semanti c sidebar с использованием flexbox - PullRequest
Новая
       27

Содержание страницы не отображается с помощью semanti c sidebar с использованием flexbox

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

У меня есть боковая панель с многостраничным содержимым страницы от SUIR . Попробовав справедливую долю подходов, я не смог получить желаемый результат. Кажется, я близок к flexbox, но не могу понять, почему мой основной контент отображается неправильно.

Для начала вот мой компонент <Sidebar>. Он начинается в расширенном представлении, а затем может быть свернут. 

const SidebarExample = props => {
  const [visible, setVisible] = useState(true);

  const show = (e, data) => {
    setVisible(true);
  };

  const collapse = (e, data) => {
    setVisible(false);
  };

  return (
    <div id="container">
      <div className="sidebar">
        <Sidebar.Pushable as={Segment}>
          <div className="sidebar-content">
            {visible ? (
              <Sidebar
                as={Menu}
                animation="push"
                icon="labeled"
                vertical
                visible={visible}
                width="thin"
                inverted
                style={{
                  overflowX: "hidden",
                  flexDirection: "column",
                  display: "flex"
                }}
              >
                <Menu.Item as="a">
                  <Icon name="users" />
                  Users
                </Menu.Item>
                <Menu.Item as="a">
                  <Icon name="settings" />
                  Settings
                </Menu.Item>
                <Button
                  onClick={collapse}
                  fluid
                  style={{
                    whiteSpace: "nowrap",
                    width: "100%",
                    flex: 1
                  }}
                >
                  <Icon name="angle double left" />
                  Collapse Sidebar
                </Button>
              </Sidebar>
            ) : !visible ? (
              <Sidebar
                as={Menu}
                animation="push"
                icon="labeled"
                vertical
                visible={!visible}
                width="very thin"
                inverted
                style={{
                  overflowX: "hidden",
                  flexDirection: "column",
                  display: "flex"
                }}
              >
                <Menu.Item>
                  <Dropdown simple icon="user">
                    <Dropdown.Menu>
                      <Input
                        icon="search"
                        iconPosition="left"
                        className="search"
                      />
                      <Dropdown.Divider />
                      <Dropdown.Header icon="tags" content="Tag Label" />
                    </Dropdown.Menu>
                  </Dropdown>
                </Menu.Item>
                <Button onClick={show}>
                  <Icon name="angle double right" />
                </Button>
              </Sidebar>
            ) : null}
          </div>

          <Sidebar.Pusher>
            <div className="main">{props.children}</div>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    </div>
  );
};

Я применил следующие правила 

html,
body {
  height: 100%;
  margin: 0;
}

#container {
  min-height: 100%;
  display: flex;
}

.sidebar {
  display: flex;
  flex-direction: column;
  background: #00f200;
  width: 100px;
}

.sidebar > .sidebar-content {
  flex: 1;
}

.main {
  flex: 1;
  background: black;
}

И я рендеринг компонента Sidebar в моем * Компонент 1013 * вместе с содержимым, переданным в 

const Dashboard = props => {
  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <div>
        <PageHeader />
      </div>
      <div style={{ flex: 1 }}>
        <SidebarExample>
          <DashboardContent />
        </SidebarExample>
      </div>
    </div>
  );
};

const DashboardContent = props => {
  return (
    <h1> Dashboard content </h1>
  );
};

Я не могу понять, как отобразить содержимое моей главной страницы справа от боковой панели, когда оно свернуто / не свернуто.

У меня есть коды и поле здесь: пример

...