CODEWITHSUNDEEP
htmlcssreactjsantd
Mostafa Ghadimi
Mostafa Ghadimi

Reputation: 6736

Align Right Menu of Antd from Layout Component

I wanna align right the menu of antd.

Here is what I mean

Note: This photo is edited by Photoshop it's not real.

I tried to declare a className = "Menu" and set .Menu {align-items: right;} here is my code. 

<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>

after that I tried another way, I tried to add align= "right" attribute to <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}> but it still doesn't work.

I don't have any idea what to do with it.

Upvotes: 1

Views: 5425

Answers (1)

Vincro
Vincro

Reputation: 248

@mostafa, if you review the layout portion of the docs:

https://ant.design/components/layout/

You will see that they have the Sider component aligned to right by placing the code after the Content component:

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

I would suggest altering the code composition.

Upvotes: 5

Related Questions