Ant Design Sidebar is wrapping content below

Question

I would like a sidebar with a fixed header at the top of the page and content. Following the Ant Design documentation I'm having the header and content position below the sidebar instead of next to it.

This is copied from the responsive section here .

Code

function HomePage() {
    return (
        <Layout>
            <Sider
                breakpoint="lg"
                collapsedWidth="0"
                onBreakpoint={broken => {
                    console.log(broken);
                }}
                onCollapse={(collapsed, type) => {
                    console.log(collapsed, type);
                }}
            >
                <div className="logo"/>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
                    <Menu.Item key="1" icon={<UserOutlined/>}>
                        nav 1
                    </Menu.Item>
                    <Menu.Item key="2" icon={<VideoCameraOutlined/>}>
                        nav 2
                    </Menu.Item>
                    <Menu.Item key="3" icon={<UploadOutlined/>}>
                        nav 3
                    </Menu.Item>
                    <Menu.Item key="4" icon={<UserOutlined/>}>
                        nav 4
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout>
                <Header className="site-layout-sub-header-background" style={{padding: 0}}/>
                <Content style={{margin: '24px 16px 0'}}>
                    <div className="site-layout-background" style={{padding: 24, minHeight: 360}}>
                        content
                    </div>
                </Content>
                <Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
            </Layout>
        </Layout>
    );
}

Image

How can I display the header and content to the right side of the sidebar?

Answer 1

Setting up the Flex Direction on Layout might help you.

<Layout style={{flexDirection: 'initial'}}>
  Content
</Layout>