@fortawesome/free-solid-svg-icons#faBars JavaScript Examples

TopicsModal = ({ topics, activeDoc, activeTopic }) => {
  const [show, set] = useState(false)

  const onClick = () => set(!show)
  
  useEffect(() => set(false), [activeTopic, activeDoc])

  return (
    <>
      <button className='d-lg-none position-absolute btn btn-light' style={{ zIndex: 11, top: '90%', right: '2rem' }} onClick={onClick}><FontAwesomeIcon icon={show? faTimes : faBars} /></button>
      <div className={`d-lg-none position-absolute bg-white ${!show? 'd-none' : ''}`} style={{ width: '100%', height: '100%', zIndex: 10 }} >
        <Container>
          <TopicLinks topics={topics} activeDoc={activeDoc} activeTopic={activeTopic} />
        </Container>
      </div>
    </>
  );
}

constructor(taskService, store, router) {
    this.taskService = taskService;
    this.store = store;
    this.router = router;
    this.faPlus = faPlus;
    this.faCheck = faCheck;
    this.faBars = faBars;
    this.subscription = this.store.state.subscribe(
      (state) => (this.state = state)
    );
  }

export default function LteToggler() {
  return (
    <NavItem>
      <button className='btn nav-link' data-widget='pushmenu' type='button'>
        <FontAwesomeIcon icon={faBars} />
      </button>
    </NavItem>
  );
}

library.add(
  faFileDownload,
  faTrash,
  faBars,
  faCheckSquare,
  faCheck,
  faPlus,
  faCogs,
  faServer,
  faLaptop,
  faMobileAlt
);

Toolbar = ({ onDrawerOpenClick }) => (
    <FlexContainer>
        <Box height={36}>
            <Logo src={logo} />
        </Box>
        <Flex alignItems="center" height="100%">
            <Box ml={3} onClick={onDrawerOpenClick}>
                <PointableIcon icon={faBars} />
            </Box>
        </Flex>
    </FlexContainer>
)

library.add(
  faBars,
  faTimes,
  faChevronDown,
  faChevronUp,
  faCalendarAlt,
  faTelegramPlane,
  faTwitter,
  faMediumM,
  faRedditAlien,
  faQuestionCircle,
  faCheck,
  faSearch,
);

ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}

SideBar = ({ children }) => {
    const [expanded, setExpanded] = useState(false);

    let sidebarClass = classNames('sidebar', {
        expanded: expanded,
        collapsed: !expanded
    });

    let burgerClass = classNames('btn-icon', {
        'float-right': expanded
    });

    let icon = expanded ? faTimes : faBars;

    return (
        <div className={sidebarClass}>
            <a href='#' className={burgerClass} onClick={() => setExpanded(!expanded)}>
                <FontAwesomeIcon icon={icon} />
            </a>
            {expanded && children}
        </div>
    );
}

render() {
    return (
      <Navbar>
        <div>
          <MenuIcon icon={this.props.menuToggled ? faTimes : faBars} onClick={this.props.onMenuToggle} />
          <Text>MyHome logo</Text>
        </div>
        <div>
          <span className="fa-layers fa-fw">
            <FontAwesomeIcon icon={faBell} color={styles.colors.grey} size="lg" />
            <Text className="fa-layers-counter" color={styles.colors.white} fontSize="2em" backgroundColor={styles.colors.red}>2</Text>
          </span>
          <span>
            <Avatar src="https://http.cat/400" margin="0 10px" width="25px" height="25px" />
            <Text
              fontWeight="500"
              dropdownMargin="0 0 0 -30px"
              dropdown={
                <ItemList>
                  {this.props.currentUser ?
                    <Item onClick={this.doSignOut}>
                      <FontAwesomeIcon icon={faSignOutAlt} />
                      <Text padding="0 0 0 5px">Logout</Text>
                    </Item>
                  :
                    <>
                      <Item onClick={this.goToSignUp}>
                        <FontAwesomeIcon icon={faUserPlus} />
                        <Text padding="0 0 0 5px">Sign Up</Text>
                      </Item>
                      <Item onClick={this.goToLogin}>
                        <FontAwesomeIcon icon={faSignInAlt} />
                        <Text padding="0 0 0 5px">Login</Text>
                      </Item>
                    </>
                  }
                </ItemList>
              }
            >
              {this.props.currentUser ? 'Tony Stark' : 'Guest'}
            </Text>
          </span>
        </div>
      </Navbar>
    )
  }

BarsIcon = makeFAIcon(faBars)

Toolbar = ({ showSearch }) => {
  const [isSidebarVisible, setSidebarVisibilty] = React.useState(false)

  const toggleSidebarVisibilty = () => {
    setSidebarVisibilty(!isSidebarVisible)
  }

  const searchStyle = () => {
    if (!showSearch) {
      return {
        display: "none",
      }
    }
    return {}
  }

  const getLogo = () => {
    return showSearch ? (
      <Logo />
    ) : (
      <Link to="/">
        <Logo />
      </Link>
    )
  }

  return (
    <div className="mobile-toolbar">
      <div className="mobile-toolbar-logo noselect">
        <center>{getLogo()}</center>
      </div>
      <div className="mobile-toolbar-search" style={searchStyle()}>
        <center>
          <Search />
        </center>
      </div>
      <div
        className="mobile-toolbar-sidebar-toggle noselect"
        onClick={toggleSidebarVisibilty}
      >
        <center>
          <FontAwesomeIcon icon={faBars} />
        </center>
      </div>
      <Dimmer
        onClick={toggleSidebarVisibilty}
        isSidebarVisible={isSidebarVisible}
      />
      <Sidebar
        config={{
          mode: "mobile",
          visible: isSidebarVisible,
        }}
        showFilters={showSearch}
      />
    </div>
  )
}

Navbar = forwardRef((
  {
    handleClick,
    links,
    location,
    transform,
  },
  ref,
) => {
  const navLinks = getLinks(links);

  return (
    <div className="nav">
      <Icon location={location} />
      <div
        className="nav__menu"
        style={{ transform }}
      >
        <ButtonIcon
          ariaLabel="navigation menu"
          icon={faBars}
          kind="primary"
          onClick={handleClick}
          type="button"
        />
        <div
          className="nav__menu-links"
          ref={ref}
        >
          <Link to="/">Home</Link>
          {navLinks}
          <Theme />
        </div>
      </div>
      <div className="nav__right">
        {navLinks}
        <Theme />
      </div>
    </div>
  );
})

Navbar = () => {
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0()
  const [showMenu, setShowMenu] = useState(false)

  const toggleMenu = () => setShowMenu(!showMenu)

  return (
    <nav className="border-b border-gray-300 fixed top-0 inset-x-0 z-10 bg-white">
      <div className="max-w-screen-xl mx-auto px-2 flex flex-col lg:flex-row">
        <div className="flex flex-grow">
          <Link className="px-2 sm:px-3 flex flex-none" to="/">
            <img
              src={GoodHereLogo}
              alt="Good Here Logo"
              className="self-center w-56 h-auto hidden sm:inline"
            />
            <img
              src={GoodHereMark}
              alt="Good Here Logo"
              className="self-center h-8 w-8 sm:hidden"
            />
          </Link>

          <div className="flex flex-grow m-2 sm:mx-8 md:mx-12 xl:mx-16">
            <Search />
          </div>

          <button
            onClick={toggleMenu}
            className="flex-shrink-0 px-2 sm:px-3 lg:hidden"
          >
            <FontAwesomeIcon
              fixedWidth
              size="lg"
              icon={showMenu ? faTimes : faBars}
              className="text-gray-700"
            />
          </button>
        </div>

        <div
          className={classnames(
            "text-md flex-none text-gray-600 flex text-left flex-shrink-0 flex-col mb-2",
            { hidden: !showMenu },
            "lg:flex lg:flex-row lg:items-center lg:mb-0"
          )}
        >
          <NavLink to="/contribute">About</NavLink>
          <NavLink to="/organizations">Startups</NavLink>
          <NavLink to="/capital">Funding</NavLink>
          <a className="mr-1 p-2 hover:text-gray-900" href="https://goodhere.discourse.group/">Community</a>

          {isAuthenticated ? (
            <>
              <NavLink to="/favorites">Favorites</NavLink>
              <button
                className="p-2 hover:text-gray-900 text-left"
                onClick={() => logout()}
              >
                Sign out
              </button>
            </>
          ) : (
              <button
                className="mx-3 px-4 my-2 py-1 border rounded border-grey-600 hover:text-red-900 hover:border-red-800"
                onClick={() => loginWithRedirect()}
              >
                Sign in
              </button>
            )}
        </div>
      </div>
    </nav>
  )
}

render() {
    const { classes } = this.props;
    return (
      <div className={classes.navbar}>
        <div className={classes.logo}>
          <img src={logo} alt="logo" />
        </div>
        <nav className={classes.nav}>
          <FontAwesomeIcon
            icon={faBars}
            className={classes.hamburger}
            onClick={this.handleToggle}
          />
          <ul
            className={classNames([classes.navItems], {
              [classes.expand]: this.state.isExpanded,
            })}
          >
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon icon={faHome} className={classes.icons} />
                  <p>Overview</p>
                </div>
              </NavLink>
            </li>
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/symptoms"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon
                    icon={faHeadSideCough}
                    className={classes.icons}
                  />
                  <p>Symptoms</p>
                </div>
              </NavLink>
            </li>
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/stay-safe"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon icon={faFlask} className={classes.icons} />
                  <p>Prevention</p>
                </div>
              </NavLink>
            </li>
            <li className={classes.navItem}>
              <NavLink
                exact
                to="/essentials"
                className={classes.navLinks}
                activeClassName={classes.active}
              >
                <div className={classes.iconBox}>
                  <FontAwesomeIcon icon={faBox} className={classes.icons} />
                  <p>Essentials</p>
                </div>
              </NavLink>
            </li>
          </ul>
        </nav>
      </div>
    );
  }

render() {
    const { theme, toggle } = this.context;
    let { isMenuOpened } = this.state;
    return (
      <nav
        className="navbar navbar-expand-lg fixed-top d-flex"
        aria-label="site"
      >
        <a
          className="skip__link"
          href="#mainContent"
          onClick={this.skipToMainContent}
        >
          Skip to main content
        </a>
        <button
          className="navbar-toggler ml-2"
          type="button"
          aria-label="Toggle navigation"
          title="Show Side Menu"
          data-testid="side-drawer-toggler"
          onClick={() => this.setOpenState(!isMenuOpened)}
        >
          <FontAwesomeIcon icon={faBars} size="2x" />
        </button>
        <a className="navbar-brand ml-lg-5 mx-auto" href="/">
          <img
            src={theme === "light" ? Logo : LogoWhite}
            width="80"
            height="80"
            alt=""
            title="IEEE-Azhar Student Branch"
          />
        </a>

        <SideDrawer
          isOpened={isMenuOpened}
          closeSideDrawer={() => this.setOpenState(false)}
        />
        <div className="collapse navbar-collapse" id="navbarNavDropdown">
          <ul
            className="navbar-nav ml-auto text-right"
            data-testid="navbar-list"
          >
            {this.renderNavbarLinks()}
          </ul>
          <div className="text-center theme-toggler">
            <ThemeButton toggle={toggle} theme={theme} />
          </div>
        </div>
      </nav>
    );
  }

Navbar = () => {
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0()
  const [showMenu, setShowMenu] = useState(false)

  const toggleMenu = () => setShowMenu(!showMenu)

  return (
    <div className="fixed top-0 inset-x-0 z-10">
      <a
        className="block bg-windigo"
        href="https://dash.climatescape.org/?ref=OrgBanner"
      >
        <p className="max-w-screen-xl mx-auto px-4 py-2 text-center text-white text-sm tracking-wide">
          <span className="mr-2" role="img" aria-label="Rocket ship">
            ?
          </span>
          Announcing <strong>Climatescape Dash</strong>
          <span className="hidden sm:inline">
            , our new platform for professionals in climate tech.
          </span>
        </p>
      </a>
      <nav className="border-b border-gray-300 bg-white">
        <div className="max-w-screen-xl mx-auto px-2 flex flex-col lg:flex-row">
          <div className="flex flex-grow">
            <Link className="px-2 sm:px-3 flex flex-none" to="/">
              <img
                src={ClimatescapeLogo}
                alt="Climatescape Logo"
                className="self-center w-56 h-auto hidden sm:inline"
              />
              <img
                src={ClimatescapeMark}
                alt="Climatescape Logo"
                className="self-center h-8 w-8 sm:hidden"
              />
            </Link>

            <div className="flex flex-grow m-2 sm:mx-8 md:mx-12 xl:mx-16">
              <Search />
            </div>

            <button
              onClick={toggleMenu}
              className="flex-shrink-0 px-2 sm:px-3 lg:hidden"
            >
              <FontAwesomeIcon
                fixedWidth
                size="lg"
                icon={showMenu ? faTimes : faBars}
                className="text-gray-700"
              />
            </button>
          </div>

          <div
            className={classnames(
              "text-md flex-none text-gray-600 flex text-left flex-shrink-0 flex-col mb-2",
              { hidden: !showMenu },
              "lg:flex lg:flex-row lg:items-center lg:mb-0"
            )}
          >
            <NavLink to="/organizations">Organizations</NavLink>
            <NavLink to="/capital">Capital</NavLink>
            <NavLink to="/about">About</NavLink>

            {isAuthenticated ? (
              <button
                className="p-2 hover:text-gray-900 text-left"
                onClick={() => logout()}
              >
                Sign out
              </button>
            ) : (
              <button
                className="mx-3 px-4 my-2 py-1 border rounded border-gray-600 hover:text-gray-900 hover:border-gray-800"
                onClick={() => loginWithRedirect()}
              >
                Sign in
              </button>
            )}
          </div>
        </div>
      </nav>
    </div>
  )
}

function Header() {
  const [isExpanded, toggleExpansion] = useState(false);
  const { site } = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  const navbarLinks = [
    {
      route: `/`,
      title: `Home`,
    },
    {
      route: `/about`,
      title: `About`,
    },
    {
      route: `/code-of-conduct`,
      title: `Code Of Conduct`,
    },
  ];
  const currentPathname =
    typeof window !== `undefined` ? window.location.pathname : '/';
  const logo = path => {
    if (path !== '/')
      return (
        <OrangeFCCLogo
          className={`${componentStyles.logo} ${componentStyles.logoOrange}`}
          alt={`${site.siteMetadata.title} Orange Logo`}
        />
      );
    return (
      <BlueFCCLogo
        className={`${componentStyles.logo} ${componentStyles.logoBlue}`}
        alt={`${site.siteMetadata.title} Blue Logo`}
      />
    );
  };

  return (
    <header className="bg-white">
      <div className={componentStyles.navBar}>
        <Link to="/">
          <span className="sr-only">Go to homepage</span>
          {logo(currentPathname)}
        </Link>

        <button
          className={`${componentStyles.navMenuButton} relative`}
          onClick={() => toggleExpansion(!isExpanded)}
        >
          <span className="sr-only">
            {isExpanded ? 'Close menu' : 'Open menu'}
          </span>
          <FontAwesomeIcon
            icon={faTimes}
            size="2x"
            className={`${componentStyles.timesIcon} ${
              isExpanded ? `${componentStyles.isExpanded}` : ``
            } fill-current text-white`}
          />
          <FontAwesomeIcon
            icon={faBars}
            size="2x"
            className={`${componentStyles.barsIcon} ${
              isExpanded ? `${componentStyles.isExpanded}` : ``
            } fill-current text-gray-700`}
          />
        </button>

        <MobileNavbar navbarLinks={navbarLinks} isExpanded={isExpanded} />

        <nav className={componentStyles.navMenu}>
          {navbarLinks.map(link => (
            <Link
              className={componentStyles.navMenuItems}
              key={link.title}
              to={link.route}
            >
              {link.title}
            </Link>
          ))}
        </nav>
      </div>
    </header>
  );
}

export default function NavBar() {
  const { myShoppingCart } = useContext(GlobalCartContext);
  const [toggleNav, setToggelNav] = useState(false);

  function handleToggle(e) {
    e.preventDefault();
    setToggelNav(!toggleNav);
  }
  return (
    <div>
      <header>
        <div className="container-nav">
          <nav className={` ${toggleNav ? "active" : ""}`}>
            <div className="menu-icon">
              <FontAwesomeIcon
                icon={faBars}
                className="menu-icon-bar"
                onClick={(e) => handleToggle(e)}
              />
              <FontAwesomeIcon
                icon={faTimes}
                className="menu-icon-close"
                onClick={(e) => handleToggle(e)}
              />
            </div>

            <ul className="navigation-list">
              <li>
                <Link to="/">
                Home
                </Link>
                {/* <a href="/">Home</a>     */}
              </li>
              <li>
              <Link to="#">
              Products
              <i className="icon ">
                    <FontAwesomeIcon icon={faCaretDown} />
                  </i>
                </Link>
               
                <ul className="products-cat">
                  <li>
                    <Link to="/collections">All</Link>
                    
                  </li>
                  <li>
                    <Link to="/collections/men">Men</Link>
                  </li>
                  <li>
                    <Link to="/collections/women">Women</Link>
                  </li>
                  <li>
                    <Link to="/collections/kids">Kids</Link>
                  </li>
                </ul>
              </li>
              <li>
                <Link to="#">
                  Collections
                  <i className="icon ">
                    <FontAwesomeIcon icon={faCaretDown} />
                  </i>
                </Link>
                <ul className="products-cat">
                  <li>
                    <Link to="/trend/New">New Arrival</Link>
                  </li>
                  <li>
                    <Link to="/trend/Trending">Trending</Link>
                  </li>
                </ul>
              </li>

              <li>
                <Link to="/search">Search</Link>
              </li>

              <li className="nav-shopping-cart">
                <Link
                  to="/cart"
                  className="cart position-relative d-inline-flex"
                >
                  <FontAwesomeIcon
                    icon={faShoppingCart}
                    className="store-cart-icon"
                  />
                  <span className="cart-basket d-flex align-items-center justify-content-center ">
                    {myShoppingCart.length}{" "}
                  </span>
                </Link>
              </li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  );
}

export default function DemoDashboard() {
  return (
    <>
      <LteContentHeader title='Dashboard' />
      <LteContent>
        <Row>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
          </Col>
          <div className='clearfix hidden-md-up' />
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
          </Col>
          <Col xs='12' sm='6' md='3'>
            <LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
          </Col>
        </Row>

        <Row>
          <Col lg='3' xs='6'>
            <LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
          </Col>
          <Col lg='3' xs='6'>
            <LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
          </Col>
        </Row>

        <Row>
          <Col lg='8'>
            <Card>
              <CardHeader className='border-transparent'>
                <CardTitle>Latest Orders</CardTitle>
                <LteCardTools>
                  <Button color='' className='btn-tool' data-card-widget='collapse'>
                    <FontAwesomeIcon icon={faMinus} />
                  </Button>
                  <Button color='' className='btn-tool' data-card-widget='remove'>
                    <FontAwesomeIcon icon={faTimes} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody className='p-0'>
                <Table responsive>
                  <thead>
                    <tr>
                      <th>Order ID</th>
                      <th>Item</th>
                      <th>Status</th>
                      <th>Popularity</th>
                    </tr>
                  </thead>

                  <tbody>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='info'>
                          Processing
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00c0ef' data-height='20'>
                          90,80,-90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR1848</td>
                      <td>Samsung Smart TV</td>
                      <td>
                        <Badge tag='span' color='warning'>
                          Pending
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f39c12' data-height='20'>
                          90,80,-90,70,61,-83,68
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR7429</td>
                      <td>iPhone 6 Plus</td>
                      <td>
                        <Badge tag='span' color='danger'>
                          Delivered
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#f56954' data-height='20'>
                          90,-80,90,70,-61,83,63
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td>OR9842</td>
                      <td>Call of Duty IV</td>
                      <td>
                        <Badge tag='span' color='success'>
                          Shipped
                        </Badge>
                      </td>
                      <td>
                        <div className='sparkbar' data-color='#00a65a' data-height='20'>
                          90,80,90,-70,61,-83,63
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </Table>
              </CardBody>
            </Card>

            <Row>
              <Col lg='6'>
                <LteDirectChat color='warning'>
                  <CardHeader>
                    <CardTitle>Direct Chat</CardTitle>
                    <LteCardTools>
                      <Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
                        3
                      </Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button
                        color=''
                        className='btn-tool'
                        data-toggle='tooltip'
                        title='Contacts'
                        data-widget='chat-pane-toggle'
                      >
                        <FontAwesomeIcon icon={faComments} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody>
                    <LteDirectChatMessages>
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 2:00 pm'
                        image={user1}
                        message="Is this template really for free? That's unbelievable!"
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 2:05 pm'
                        image={user3}
                        message='You better believe it!'
                      />
                      <LteDirectChatMsg
                        name='Alexander Pierce'
                        date='23 Jan 5:37 pm'
                        image={user1}
                        message='Working with AdminLTE on a great new app! Wanna join?'
                      />
                      <LteDirectChatMsg
                        right
                        name='Sarah Bullock'
                        date='23 Jan 6:10 pm'
                        image={user3}
                        message='I would love to.'
                      />
                    </LteDirectChatMessages>
                    <LteDirectChatContacts>
                      <LteContactsList>
                        <LteContactsListItem
                          href='/contacts'
                          image={user1}
                          name='Count Dracula'
                          date='2/28/2015'
                          message='How have you been? I was...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user7}
                          name='Sarah Doe'
                          date='2/23/2015'
                          message='I will be waiting for...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user3}
                          name='Nadia Jolie'
                          date='2/20/2015'
                          message="I'll call you back at..."
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user5}
                          name='Nora S. Vans'
                          date='2/10/2015'
                          message='Where is your new...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user6}
                          name='John K.'
                          date='1/27/2015'
                          message='Can I take a look at...'
                        />
                        <LteContactsListItem
                          href='/contacts'
                          image={user8}
                          name='Kenneth M.'
                          date='1/4/2015'
                          message='Never mind I found...'
                        />
                      </LteContactsList>
                    </LteDirectChatContacts>
                  </CardBody>
                  <CardFooter>
                    <Form>
                      <InputGroup>
                        <Input placeholder='Type Message ...' />
                        <InputGroupAddon addonType='append'>
                          <Button color='warning'>Send</Button>
                        </InputGroupAddon>
                      </InputGroup>
                    </Form>
                  </CardFooter>
                </LteDirectChat>
              </Col>
              <Col lg='6'>
                <Card>
                  <CardHeader>
                    <CardTitle>Latest Members</CardTitle>
                    <LteCardTools>
                      <Badge color='danger'>8 New Members</Badge>
                      <Button className='btn-tool' color='' data-card-widget='collapse'>
                        <FontAwesomeIcon icon={faMinus} />
                      </Button>
                      <Button color='' className='btn-tool' data-card-widget='remove'>
                        <FontAwesomeIcon icon={faTimes} />
                      </Button>
                    </LteCardTools>
                  </CardHeader>
                  <CardBody className='p-0'>
                    <LteUsersList>
                      <LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
                      <LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
                      <LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
                      <LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
                      <LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
                      <LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
                      <LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
                      <LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
                    </LteUsersList>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Col>
          <Col lg='4'>
            <LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
            <LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
            <LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
            <LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
            <Card>
              <CardHeader className='border-0'>
                <CardTitle>Online Store Overview</CardTitle>
                <LteCardTools>
                  <Button className='btn-tool' color=''>
                    <FontAwesomeIcon icon={faDownload} />
                  </Button>
                  <Button color='' className='btn-tool'>
                    <FontAwesomeIcon icon={faBars} />
                  </Button>
                </LteCardTools>
              </CardHeader>
              <CardBody>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-success text-xl'>
                    <FontAwesomeIcon icon={faRedo} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-success' />
                      12%
                    </span>
                    <span className='text-muted'>CONVERSION RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
                  <p className='text-warning text-xl'>
                    <FontAwesomeIcon icon={faShoppingCart} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
                    </span>
                    <span className='text-muted'>SALES RATE</span>
                  </p>
                </div>
                <div className='d-flex justify-content-between align-items-center mb-0'>
                  <p className='text-danger text-xl'>
                    <FontAwesomeIcon icon={faUsers} />
                  </p>
                  <p className='d-flex flex-column text-right'>
                    <span className='font-weight-bold'>
                      <FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
                    </span>
                    <span className='text-muted'>REGISTRATION RATE</span>
                  </p>
                </div>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </LteContent>
    </>
  );
}

NavBarWithIcons = ({ firstName, secondName, categories, iconList }) => {
  const [drawerOpen, setDrawerOpen] = useState(false)
  const classes = Styles()
  const matchesMD = useMediaQuery(theme => theme.breakpoints.down("sm"))
  const activeIndex = () => {
    const filter = categories.filter(
      category => category.route === window.location.pathname
    )
    const index = categories.indexOf(filter[0])
    return index
  }
  const tabs = (
    <Tabs value={activeIndex()} classes={{ root: classes.tabsStyle }}>
      {categories.map(category => (
        <Tab
          component={Link}
          to={category.route}
          label={category.name}
          key={category.id}
          classes={{ root: classes.tabStyle }}
        />
      ))}
    </Tabs>
  )

  const iconSet = iconList.map(iconObject => (
    <IconButton
      key={iconObject.alt}
      component={Link}
      to={iconObject.link}
      classes={{ root: classes.iconStyle }}
    >
      <FontAwesomeIcon icon={iconObject.icon} size="1x" />
    </IconButton>
  ))
  const drawer = (
    <SwipeableDrawer
      open={drawerOpen}
      onOpen={() => setDrawerOpen(true)}
      onClose={() => setDrawerOpen(false)}
      classes={{ paper: classes.drawerStyle }}
    >
      <List disablePadding>
        {categories.map((category, i) => (
          <ListItem
            selected={activeIndex() === i}
            component={Link}
            to={category.route}
            divider
            button
            key={category.id}
          >
            <ListItemText
              classes={{ primary: classes.listItemTextStyle }}
              primary={category.name}
            />
          </ListItem>
        ))}
      </List>
    </SwipeableDrawer>
  )

  return (
    <AppBar color="transparent" position="static">
      <Toolbar>
        <Button classes={{ root: classes.logoContainer }}>
          {firstName && (
            <Typography variant="h1">
              {firstName}
              {secondName && (
                <span className={classes.decoratedHeader}>{secondName}</span>
              )}
            </Typography>
          )}
        </Button>
        {matchesMD ? drawer : tabs}
        {matchesMD ? (
          <IconButton
            classes={{ root: classes.iconStyle }}
            onClick={() => setDrawerOpen(true)}
          >
            <FontAwesomeIcon icon={faBars} size="1x" />
          </IconButton>
        ) : (
          iconSet
        )}
      </Toolbar>
    </AppBar>
  )
}

export default function Navbar() {
  const [scroll, setScroll] = useState(0);

  const [opened, setOpened] = useState(false);

  const [loggedIn, setLoggetIn] = useState(
    Object.keys(authHeader()).length ? true : false
  );

  useEffect(() => {
    const handleScroll = () => {
      const scrollCheck = window.scrollY > 100;
      if (scrollCheck !== scroll) {
        setScroll(scrollCheck);
      }
    };

    // check the scroll to add class to the navbar
    document.addEventListener("scroll", handleScroll);

    // cleanup
    return () => {
      document.removeEventListener("scroll", handleScroll);
    };
  }, [scroll]);

  useEffect(() => {
    // hide the menu when click the body
    document.body.addEventListener("click", (e) => {
      setOpened(false);
    });
  }, []);

  // close the menu
  const closeMenu = (e) => {
    e.stopPropagation();

    setOpened(false);
  };

  // handle navlink click
  const handleNavLinkClick = () => {
    setScroll(0);
    window.scrollTo(0, 0);
  };

  // log out
  const logOut = () => {
    loginServices.logout();
    setLoggetIn(false);
    window.location.reload();
  };

  return (
    <nav
      data-testid="navbar"
      className={`navbar fixed-top navbar-expand-sm ${scroll ? "bg-dark" : ""}`}
    >
      <div className="container">
        <Link className={`navbar-brand ${scroll ? "img-scrolled" : ""}`} to="/">
          <img
            className="logo-img"
            src={logo}
            alt="Energia's Logo"
            title="logo of the team"
          />
        </Link>
        <button
          className="navbar-toggler"
          data-testid="toggler"
          type="button"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
          onClick={() => setOpened(true)}
        >
          <FontAwesomeIcon icon={faBars} className="navbar-toggler-icon" />
        </button>
        <div
          data-testid="side-menu"
          style={{ right: opened ? "0" : "-90%" }}
          className="navbar-collapse"
          id="navbarNav"
          // to prevent the closing action when clicking anywhere on the menu
          onClick={() => setOpened(true)}
        >
          <button
            className="menu-close"
            data-testid="closer"
            onClick={(e) => closeMenu(e)}
          >
            <FontAwesomeIcon icon={faTimes} />
          </button>
          <ul
            className="navbar-nav ml-auto"
            // to prevent the closing action when clicking anywhere on the menu
            onClick={(e) => closeMenu(e)}
            data-testid="menu-list"
          >
            {routes &&
              routes.length > 0 &&
              routes.slice(0, routes.length - 2).map((route) => {
                return route.inNavbar.shown ? (
                  <li key={route.path} className="nav-item">
                    <NavLink
                      exact
                      data-testid="navlinks"
                      className="nav-link"
                      to={route.path}
                      onClick={() => handleNavLinkClick()}
                    >
                      {route.inNavbar.label}
                    </NavLink>
                  </li>
                ) : null;
              })}
            {loggedIn ? (
              <li className="nav-item">
                <span className="nav-link" onClick={logOut}>
                  Log Out
                </span>
              </li>
            ) : (
              routes.slice(routes.length - 2).map((route) => (
                <li key={route.path} className="nav-item">
                  <NavLink
                    exact
                    data-testid="navlinks"
                    className="nav-link"
                    to={route.path}
                    onClick={() => handleNavLinkClick()}
                  >
                    {route.inNavbar.label}
                  </NavLink>
                </li>
              ))
            )}
          </ul>
        </div>
      </div>
    </nav>
  );
}

function MobileHeader() {
    const dispatch = useDispatch();
    const history = useHistory();
    const { user } = useSelector((state) => state.auth);
    const [open, setOpen] = useState(false);

    const close = () => setOpen(false);
    const onSignout = () => history.push('/');

    return (
        <>
            <Link to="/" className="header__logo" onClick={close}>
                <img src={ponceFleur} alt="Ponce fleur" />
            </Link>

            <FontAwesomeIcon
                icon={open ? faTimes : faBars}
                className="header__hamburger"
                onClick={() => setOpen(!open)}
            />

            <AnimatePresence>
                {open && (
                    <motion.div
                        style={{ flexBasis: '100%' }}
                        initial={{
                            opacity: 0,
                            y: '-50px',
                        }}
                        animate={{
                            opacity: 1,
                            y: 0,
                        }}
                        exit={{
                            opacity: 0,
                            y: '-20px',
                        }}
                    >
                        <ul className="header__smNavList">
                            <li>
                                <NavLink
                                    to="/history"
                                    activeClassName="header__smNavListItem--active"
                                    onClick={close}
                                >
                                    Historique
                                </NavLink>
                            </li>
                            <li>
                                <NavLink
                                    to="/races"
                                    activeClassName="header__smNavListItem--active"
                                    onClick={close}
                                >
                                    Circuits joués
                                </NavLink>
                            </li>
                            <li>
                                <NavLink
                                    to="/statistics"
                                    activeClassName="header__smNavListItem--active"
                                    onClick={close}
                                >
                                    Statistiques
                                </NavLink>
                            </li>
                            {user && user.isAdmin && (
                                <li>
                                    <NavLink
                                        to="/admin"
                                        activeClassName="header__smNavListItem--active"
                                        onClick={close}
                                    >
                                        Administration
                                    </NavLink>
                                </li>
                            )}
                        </ul>

                        <hr />

                        {user ? (
                            <div className="header__smProfilWrapper">
                                <Row align="center">
                                    <Col xs="content">
                                        <FontAwesomeIcon
                                            icon={faUserCircle}
                                            size="2x"
                                            className="header__profilPicture"
                                            onClick={() => setOpen(!open)}
                                        />
                                    </Col>
                                    <Col>
                                        <strong>{user.username}</strong>
                                    </Col>
                                </Row>

                                <Row className="header__smProfilLinks">
                                    <Col xs={6}>
                                        <NavLink
                                            to={`/users/${user.username}`}
                                            onClick={close}
                                        >
                                            Profil
                                        </NavLink>
                                    </Col>
                                    <Col xs={6}>
                                        <NavLink to="/settings" onClick={close}>
                                            Paramètres
                                        </NavLink>
                                    </Col>
                                    <Col
                                        xs={6}
                                        onClick={() => {
                                            close();
                                            dispatch(signout(onSignout));
                                        }}
                                    >
                                        <span>Déconnexion</span>
                                    </Col>
                                </Row>
                            </div>
                        ) : (
                            <Row
                                className="header__smAuthButton"
                                justify="center"
                            >
                                <Col xs="content">
                                    <TwitchButton />
                                </Col>
                            </Row>
                        )}
                    </motion.div>
                )}
            </AnimatePresence>
        </>
    );
}