antD examples.md

responsive navbar

const Navbar = () => {
  const [openMenu, setOpenMenu] = useState(false);
  return (
    <div>
      {/* mobile menu opener icon */}
      <div className="menuIcon">
        <MenuOutlined onClick={() => setOpenMenu(true)} />
      </div>
      <span className={styles.headerMenu}>
        <AppMenu />
      </span>

      <Drawer
        placement="left"
        open={openMenu}
        onClose={() => setOpenMenu(false)}
        closable={false}
      >
        <AppMenu />
      </Drawer>
    </div>
  );
};

export default Navbar;

const AppMenu = ({ isInline = false }) => {
  return (
    <div>
      <Menu
        mode={isInline ? "inline" : "horizontal"}
        items={[
          { label: "Home", key: "home" },
          { label: "Contact", key: "contact" },
          { label: "About us", key: "about" },
        ]}
      ></Menu>
    </div>
  );
};

export default AppMenu;

@media (max-width: 600px) {
  .headerMenu {
    display: "none";
  }
}

@media (min-width: 500px) {
  .menuIcon {
    display: "block";
  }
}