react-icons/fi#FiMenu JavaScript Examples

The following examples show how to use react-icons/fi#FiMenu. 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: index.js    From dashboard-reactjs with MIT License 6 votes vote down vote up 
export default function Sis() {

    const [ drag, setDrag ] = useState(false);
    return (
        <Wrap>
            <Sidebar drag={drag} />
            <Main>
                <NavBar>
                    {/* <FiMenu className="toggle" style={{ marginLeft: drag ? 145 : 0}} onClick={(e) => drag ? setDrag(false) : setDrag(true)} /> */}
                    <FiMenu className="toggle" style={{ marginLeft: drag ? 170 : 0}} onClick={(e) => drag ? setDrag(false) : setDrag(true)} />
                    <span>Olá, <span className="name">{ 'Luis Otávio' }</span></span>
                </NavBar>
                <div className="content">
                    <div className="row">
                        <Suspense fallback={
                            <div style={{ height: '100vh', width: '100%', display: 'flex', justifyContent: 'center'}}>
                                <div className="loader"></div>
                            </div>
                        }>
                            {/* Your pages */}
                            <Switch>
                                <Route exact path='/' component={Dashboard} />
                                <Route path='/tables' component={Tables}/>
                                <Route path='/buttons' component={Buttons}/>
                                <Route path='/cards' component={Cards}/>
                                <Route path='/forms' component={Forms}/>
                                <Route path='/alerts' component={Alerts}/>
                                <Route path='/modals' component={Modals}/>
                            </Switch>
                        </Suspense>
                    </div>
                </div>
            </Main>
        </Wrap>
    );
}
Example #2
Source File: NavTopbar.js    From codeursenseine.com with MIT License 5 votes vote down vote up 
NavTopbar = ({ onNavOpen = () => {}, ...props }) => {
  const theme = useTheme();

  const data = useStaticQuery(graphql`
    query NavTopbarQuery {
      site {
        siteMetadata {
          currentYear
        }
      }
    }
  `);

  return (
    <Flex
      as="nav"
      display={{ base: "flex", md: "none" }}
      background={theme.gradients.brand}
      justifyContent="space-between"
      color="white"
      position="fixed"
      top="0"
      left="0"
      right="0"
      zIndex="2"
      align="center"
      {...props}
    >
      <Link to={`/${data.site.siteMetadata.currentYear}`}>
        <Logo w="4.5" h="2.5rem" pl="2" />
      </Link>
      <Box textAlign="center">
        <Text fontFamily="heading" fontSize="0.6rem">
          {theme.data.pretitle}
        </Text>
        <Heading as="h4" size="xs" fontSize="0.7rem">
          {theme.data.title}
        </Heading>
      </Box>
      <IconButton
        variant="unstyled"
        aria-label="Menu"
        d="inline-flex"
        icon={<FiMenu />}
        size="lg"
        onClick={() => onNavOpen()}
      />
    </Flex>
  );
}
Example #3
Source File: navbar.js    From velocitypowered.com with MIT License 5 votes vote down vote up 
export default function Navbar({ location, themeName, setThemeName }) {
  const [ mobileMenuExpanded, setMobileMenuExpanded ] = useState(false)

  function flipExpanded() {
    setMobileMenuExpanded(!mobileMenuExpanded)
  }

  return (
    <NavbarContainer>
      <NavbarList>
        <NavbarLogo>
          <Link
            to={"/"}
            css={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              color: `var(--navbar-text) !important`,
              fontWeight: 'bold'
            }
          }>
            <VelocityNavbarLogo />
            <span>Velocity</span>
          </Link>
        </NavbarLogo>

        <NavbarExpand onClick={flipExpanded}>
          <IconContext.Provider value={{ size: "16px" }}>
            <FiMenu />
          </IconContext.Provider>
        </NavbarExpand>

        <NavbarItems>
          <NavbarItemContents location={location} />
          <div css={{ padding: '15px 10px' }}>
            <ThemeSwitcher themeName={themeName} setThemeName={setThemeName} />
          </div>
        </NavbarItems>
      </NavbarList>

      <MobileNavbarItems mobileShown={mobileMenuExpanded}>
        <NavbarItemContents location={location} onMobileClick={flipExpanded} />
      </MobileNavbarItems>
    </NavbarContainer>
  )
}