Update:
Let me clarify myself. I do not want a sidebar (since in my case it is a small site, not many pages). All I want is to have a top navigation bar when resizing the menu. Elements can be collapsed and turned into a hamburger icon. I also need 2 menu.items on the right side.
I use AntD, I thought that it would be a simple and quick setup for the standard and standard adaptive NavBar, but it turned out that it does not respond by default:
As you can see, it is crushed.
Here is the code:
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={["1"]}
style={{ lineHeight: '64px' }}
breakpoint="lg"
collapsedWidth="0"
>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
<Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
<Menu.Item key="5"><Icon spin={true} type="login" className="loggin-btn" /></Menu.Item>
</Menu>
So I read the document again and thought that I would have to use the Grid inside the menu to make it responsive. However, this threw me errors:
Here is the code:
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={["1"]}
style={{ lineHeight: '64px' }}
breakpoint="lg"
collapsedWidth="0"
>
<Row key="1" gutter={16}>
<Col span={3} key="1">
<Menu.Item key="1">nav 1</Menu.Item>
</Col>
<Col span={3} key="2">
<Menu.Item key="2">nav 2</Menu.Item>
</Col>
<Col span={3} key="3">
<Menu.Item key="3">nav 3</Menu.Item>
</Col>
<Col span={3} offset={9} key="4">
<Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
</Col>
<Col span={3} key="5">
<Menu.Item key="5"><Icon type="login" className="loggin-btn" /></Menu.Item>
</Col>
</Row>
</Menu>
Please help. thank
source
share