Me gustaría una barra lateral con un encabezado fijo en la parte superior de la página y el contenido. Siguiendo la documentación de Ant Design, tengo el encabezado y la posición del contenido debajo de la barra lateral en lugar de al lado.

Esto se copia de la sección de responsive aquí .

Código

 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> ); }

Imagen

¿Cómo puedo mostrar el encabezado y el contenido en el lado derecho de la barra lateral?