How can I align the menu to the right in antd?
https://i.sstatic.net/xmh6E.png
Please Note: The image has been edited using Photoshop and is not real.
I attempted to declare a className = "Menu" and set .Menu {align-items: right;} but it didn't work. Here is the code snippet I used:
<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 type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<Icon type="user" />
<span className="nav-text">nav 4</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }} />
<Content style={{ margin: '24px 16px 0' }}>
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>
I also tried adding the align= "right" attribute to
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>If anyone has any suggestions on how to solve this issue, please let me know.