Как остановить наложение боковой панели на другие компоненты в Semanti c -UI React

Question

Я хочу создать панель с боковым меню, используя Semanti c -UI React. Я поместил свойство animation='push' для компонента Sidebar, который выполнил свою работу, но только для полного экрана:

Когда я начинаю уменьшаться окно боковой панели по-прежнему перекрывает компонент контента:

Это мой App:

<Router>
  <Switch>
    <PublicRoute exact path='/' component={Home} layout={LandingLayout} />
    <PublicRoute path='/login' component={Login} layout={LandingLayout} />
    <PrivateRoute path='/counter' component={Counter} layout={DashboardLayout} />
  </Switch>
</Router>

PrivateRoute это декоратор маршрута:

const PrivateRoute = ({ component: Component, layout: Layout, ...rest }) => (
    <Route {...rest} render={props => (
        <Layout>
            <Component {...props} />
        </Layout>
    )}
    />
);

Вот что возвращает DashboardLayout:

<div>
  <SidebarMenu />
  <Container>
    {this.props.children}
  </Container>
</div>

И, наконец, мой SidebarMenu компонент:

<Sidebar as={Menu} animation='push' icon='labeled' inverted vertical visible width='wide'>
  <Menu.Item as={Link} to="/">
    <Icon name='building' />
    Financial Statement
 </Menu.Item>
  <Menu.Item as='a'>
    <Icon name='user' />
    Ratios
 </Menu.Item>
  <Menu.Item as='a'>
    <Icon name='user' />
    Private Data
 </Menu.Item>
</Sidebar>

Что я здесь скучаю?