title: Ant design responsive NavBar
body: <p>I'm using AntD, thought it would be an easy and quick set up for a common and standard Responsive NavBar, but it turned out it's not responsive by default:</p>
  
  <p><a href="https://i.stack.imgur.com/4Ne2r.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4Ne2r.png" alt="squashed"></a></p>
  
  <p>As you can see, it's squashed.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;Menu
                          theme="dark"
                          mode="horizontal"
                          defaultSelectedKeys={["1"]}
                          style={{ lineHeight: '64px' }}
                          breakpoint="lg"
                          collapsedWidth="0"
                      &gt;
                                  &lt;Menu.Item key="1"&gt;nav 1&lt;/Menu.Item&gt;
                                  &lt;Menu.Item key="2"&gt;nav 2&lt;/Menu.Item&gt;
                                  &lt;Menu.Item key="3"&gt;nav 3&lt;/Menu.Item&gt;
                                  &lt;Menu.Item key="4"&gt;&lt;Icon spin={true} type="plus-circle" className="publish-btn" /&gt;&lt;/Menu.Item&gt;
                                  &lt;Menu.Item key="5"&gt;&lt;Icon spin={true} type="login" className="loggin-btn" /&gt;&lt;/Menu.Item&gt;
                      &lt;/Menu&gt;
  </code></pre>
  
  <p>So I read the document again and thought I would have to use Grid inside the Menu to make it responsive. However, it threw me errors:
  <a href="https://i.stack.imgur.com/CTaL0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CTaL0.png" alt="errors"></a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;Menu
                          theme="dark"
                          mode="horizontal"
                          defaultSelectedKeys={["1"]}
                          style={{ lineHeight: '64px' }}
                          breakpoint="lg"
                          collapsedWidth="0"
                      &gt;
  
                          &lt;Row key="1" gutter={16}&gt;
                              &lt;Col span={3} key="1"&gt;
                                  &lt;Menu.Item key="1"&gt;nav 1&lt;/Menu.Item&gt;
                              &lt;/Col&gt;
                              &lt;Col span={3} key="2"&gt;
                                  &lt;Menu.Item key="2"&gt;nav 2&lt;/Menu.Item&gt;
                              &lt;/Col&gt;
                              &lt;Col span={3} key="3"&gt;
                                  &lt;Menu.Item key="3"&gt;nav 3&lt;/Menu.Item&gt;
                              &lt;/Col&gt;
                              &lt;Col span={3} offset={9} key="4"&gt;
                                  &lt;Menu.Item key="4"&gt;&lt;Icon spin={true} type="plus-circle" className="publish-btn" /&gt;&lt;/Menu.Item&gt;
                              &lt;/Col&gt;
                              &lt;Col span={3} key="5"&gt;
                                  &lt;Menu.Item key="5"&gt;&lt;Icon type="login" className="loggin-btn" /&gt;&lt;/Menu.Item&gt;
                              &lt;/Col&gt;
                          &lt;/Row&gt;
                      &lt;/Menu&gt;
  </code></pre>
  
  <h2>Update</h2>
  
  <p>Let me clarify myself. I do not want a Sidebar(as in my case it's a small website, not many pages). All I want is to have a top NavBar when re-sizing the Menu.Items can collapse and become to a hamburger icon. Also, I need 2 menu.items on the right side. </p>