react-icons/md#MdMenu JavaScript Examples

The following examples show how to use react-icons/md#MdMenu. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: navbar.js    From strapi-starter-next-corporate with MIT License 5 votes vote down vote up 
Navbar = ({ navbar, pageContext }) => {
  const router = useRouter()
  const [mobileMenuIsShown, setMobileMenuIsShown] = useState(false)

  return (
    <>
      {/* The actual navbar */}
      <nav className="border-gray-200 border-b-2 py-6 sm:py-2">
        <div className="container flex flex-row items-center justify-between">
          {/* Content aligned to the left */}
          <div className="flex flex-row items-center">
            <Link href="/">
              <a className="h-8 w-32">
                <NextImage width="120" height="33" media={navbar.logo} />
              </a>
            </Link>
            {/* List of links on desktop */}
            <ul className="hidden list-none md:flex flex-row gap-4 items-baseline ml-10">
              {navbar.links.map((navLink) => (
                <li key={navLink.id}>
                  <CustomLink link={navLink} locale={router.locale}>
                    <div className="hover:text-gray-900 px-2 py-1">
                      {navLink.text}
                    </div>
                  </CustomLink>
                </li>
              ))}
            </ul>
          </div>
          <div className="flex">
            {/* Locale Switch Mobile */}
            {pageContext.localizedPaths && (
              <div className="md:hidden">
                <LocaleSwitch pageContext={pageContext} />
              </div>
            )}
            {/* Hamburger menu on mobile */}
            <button
              onClick={() => setMobileMenuIsShown(true)}
              className="p-1 block md:hidden"
            >
              <MdMenu className="h-8 w-auto" />
            </button>
            {/* CTA button on desktop */}
            {navbar.button && (
              <div className="hidden md:block">
                <ButtonLink
                  button={navbar.button}
                  appearance={getButtonAppearance(navbar.button.type, "light")}
                  compact
                />
              </div>
            )}
            {/* Locale Switch Desktop */}
            {pageContext.localizedPaths && (
              <div className="hidden md:block">
                <LocaleSwitch pageContext={pageContext} />
              </div>
            )}
          </div>
        </div>
      </nav>

      {/* Mobile navigation menu panel */}
      {mobileMenuIsShown && (
        <MobileNavMenu
          navbar={navbar}
          closeSelf={() => setMobileMenuIsShown(false)}
        />
      )}
    </>
  )
}
Example #2
Source File: index.js    From hackchat-client with Do What The F*ck You Want To Public License 4 votes vote down vote up 
export function MainMenu({
  mainMenuIsOpen,
  usersMenuIsOpen,
  ChannelsModalIsOpen,
  joinMenuIsOpen,
  localeMenuIsOpen,
  onOpenMainMenu,
  onCloseMainMenu,
  onOpenUsersModal,
  onCloseUsersModal,
  onOpenChannelsModal,
  onCloseChannelsModal,
  onOpenJoinMenu,
  onCloseJoinMenu,
  onOpenLocaleMenu,
  onCloseLocaleMenu,
  history,
  intl,
}) {
  useInjectReducer({ key: 'mainMenu', reducer });

  const usersBtnToolTip = intl.formatMessage(messages.usersBtnToolTip);
  const channelsBtnToolTip = intl.formatMessage(messages.channelsBtnToolTip);
  const joinBtnToolTip = intl.formatMessage(messages.joinBtnToolTip);
  const languageBtnToolTip = intl.formatMessage(messages.languageBtnToolTip);

  const mainIcon = mainMenuIsOpen ? <MdClose /> : <MdMenu />;
  const menuBtnText = intl.formatMessage(messages.menuBtnToolTip);
  const settingsBtnText = intl.formatMessage(messages.settingsBtnToolTip);

  return (
    <div>
      <Collapse className="fixed-bottom" isOpen={mainMenuIsOpen}>
        <Container fluid>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (ChannelsModalIsOpen) {
                    onCloseUsersModal();
                  } else {
                    onOpenUsersModal();
                  }
                }}
                toolTip={usersBtnToolTip}
              >
                <MdPeople />
              </MenuButton>
              <UsersModal open={usersMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (ChannelsModalIsOpen) {
                    onCloseChannelsModal();
                  } else {
                    onOpenChannelsModal();
                  }
                }}
                toolTip={channelsBtnToolTip}
              >
                <MdForum />
              </MenuButton>
              <ChannelsModal open={ChannelsModalIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (joinMenuIsOpen) {
                    onCloseJoinMenu();
                  } else {
                    onOpenJoinMenu();
                  }
                }}
                toolTip={joinBtnToolTip}
              >
                <FaPlus />
              </MenuButton>
              <JoinModal open={joinMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  if (localeMenuIsOpen) {
                    onCloseLocaleMenu();
                  } else {
                    onOpenLocaleMenu();
                  }
                }}
                toolTip={languageBtnToolTip}
              >
                <MdLanguage />
              </MenuButton>
              <LocaleModal open={localeMenuIsOpen} />
            </Col>
          </Row>
          <Row className="mx-auto">
            <Col>
              <MenuButton
                onClick={() => {
                  history.push('/settings');
                }}
                toolTip={settingsBtnText}
              >
                <MdSettings />
              </MenuButton>
            </Col>
          </Row>
          <Row>
            <Col>
              <Spacer />
            </Col>
          </Row>
        </Container>
      </Collapse>

      <MenuButton
        isMain
        className="fixed-bottom"
        onClick={() => {
          if (mainMenuIsOpen) {
            onCloseMainMenu();
          } else {
            onOpenMainMenu();
          }
        }}
        toolTip={menuBtnText}
      >
        {mainIcon}
      </MenuButton>
    </div>
  );
}