how to implement sidebar in <div>

Version

2.13.1

Environment

Windows 10 x64, Chrom 61, react 15.4, react-router 4

Reproduction link

https://codepen.io/anon/pen/XeWPog?editors=001

Steps to reproduce

Create CustomSider

const CustomSider = ({sensors, dispatch}) => {
  // console.log({sensors.sensors});
  return (
    <Sider style={{background: '#fff', borderRight: 'solid', borderColor:'#ddd', borderWidth:'5px'}}>
      <Menu mode="inline" theme="light">
          <Menu.Item key="dev1">Device 1</Menu.Item>
          <Menu.Item key="dev2">Device 2</Menu.Item>
          <Menu.Item key="dev3">Device 3</Menu.Item>
      </Menu>
    </Sider>
  );
}

Then add CustomSider.__ANT_LAYOUT_SIDER = true.

For the DOMRender, add

ReactDOM.render(
  <Layout>
    <div><CustomSider></CustomSider></div>
    <Content>Content</Content>
  </Layout>
, mountNode);

That’s all.

What is expected?

Content to the right of Sider

What is actually happening?

Content under Sider

---

This happened when I want to put CustomSider in my <Route/> to hide the CustomSider in some routes.

[yasinuslu]

Of course this is not that important but i would be happier if it just worked. I just lost some time trying to figure out why it doesn’t work. 😃

It’s not ideal but i was thinking of doing something like this

[yasinuslu]

Hi @nikogu,

I just had the same issue and digged into ant design’s source code. I found following code in here:

React.Children.forEach(children, (element: any) => {
  if (element && element.type && element.type.__ANT_LAYOUT_SIDER) {
    hasSider = true;
  }
});
const divCls = classNames(className, prefixCls, {
  [`${prefixCls}-has-sider`]: hasSider,
});

It could be easily implemented using contexts, is this by design ? If so could you explain your reasoning behind this behaviour ?