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

HamburgerMenu: React.FC<IHamburgerMenu> = ({ expanded, children, onExpand }) => {
  const itemsRef = createRef<HTMLDivElement>();

  const handleOpen = (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
    onExpand(!expanded);
    const items = itemsRef.current;
    items?.classList.toggle('open');
  };

  return (
    <HamburgerLayout className="hamburger-menu">
      <Navbar>
        <Link to={urls.pola.home()}>
          <img width="auto" height="100%" src={LogoColor} />
        </Link>
        <FontAwesomeIcon icon={faBars} onClick={handleOpen} className="menu-icon" size="2x" />
      </Navbar>
      <Items ref={itemsRef} className={classNames('nav-items')}>
        {children}
      </Items>
    </HamburgerLayout>
  );
}

library.add(
  faDotCircle,
  faCircle,
  faBars,
  faTimes,
  faInfoCircle,
  faTrophy,
  faShareSquare,
  faHeart,
  faInstagram,
  faTwitter,
  faGithub,
  faFacebook,
  faHandPointRight,
  faEdit,
  faSave,
  faCamera,
  faPlus,
  faMinus,
  faRandom,
);

constructor(
    @Optional()
    @SkipSelf()
    parentModule: CoreModule,
    faIconLibrary: FaIconLibrary
  ) {
    if (parentModule) {
      throw new Error('CoreModule is already loaded. Import only in AppModule');
    }
    faIconLibrary.addIcons(
      faCog,
      faBars,
      faRocket,
      faPowerOff,
      faUserCircle,
      faPlayCircle,
      faGithub,
      faMediumM,
      faTwitter,
      faInstagram,
      faYoutube
    );
  }

Navbar = () => {
  const dispatch = useDispatch();

  return (
    <Container>
      <Item>
        <Icons>
          <Hidden smUp implementation="css">
            <FontAwesomeIcon
              icon={faBars}
              onClick={() => dispatch(setMobileDrawerOpen(true))}
            />
          </Hidden>
          <Hidden xsDown implementation="css">
            <FontAwesomeIcon icon={faRocket} />
          </Hidden>
        </Icons>
      </Item>
      <Item>Knboard</Item>
      <Item>
        <UserMenu />
      </Item>
    </Container>
  );
}

function LandingHero({ user }: ConnectedProps<typeof connector>) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <>
      {user.info
        ? <Header withNavMenu />
        : (
          <Button
            variant="light"
            onClick={() => setIsMenuOpen(true)}
            className={`${styles['menu-btn']} d-flex align-items-center`}
          >
            <span>Menu</span>
            <FontAwesomeIcon icon={faBars} />
          </Button>
        )}
      <section className={`${styles['landing-hero']} d-flex justify-content-between`}>
        <AsideMenu hideScrollOnBody title="FrontEnd.ro" isOpen={isMenuOpen} close={() => setIsMenuOpen(false)}>
          <div className={styles['nav-wrapper']}>
            <NavLinks />
          </div>
        </AsideMenu>
        <div className={styles['call-to-action']}>
          <h1> FrontEnd.ro </h1>
          <h2>
            Învață FrontEnd de la zero,
            {' '}
            <span>
              cu ajutorul comunității open source.
            </span>
          </h2>
          <div>
            <Link href="/lectii">
              <a className={`${styles['action-button']} text-center btn btn--default`}>
                Lecții
              </a>
            </Link>
            <Link href="/exercitii">
              <a className={`${styles['action-button']} text-center btn btn--default`}>
                Exerciții
              </a>
            </Link>
            <Link href="/vreau-sa-ajut">
              <a className={`${styles['action-button']} text-center btn btn--light`}>
                Implică-te
              </a>
            </Link>
          </div>
        </div>

        <LandingSchmoes />
      </section>
    </>
  );
}

Nav = () => {
  const [showMenu, setShowMenu] = useState(false);
  const { width } = useWindowDimensions();

  const getMobileMenu = () => {
    if (width <= 768) {
      return (
        <FontAwesomeIcon
          onClick={onClickToggle}
          icon={faBars}
          size="lg"
          className="nav-mobile-menu"
        />
      );
    }
    return null;
  };

  const onClickToggle = (e: React.MouseEvent<Element, MouseEvent>) => {
    setShowMenu(!showMenu);
  };

  const onRequestClose = (
    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
  ) => {
    setShowMenu(false);
  };

  return (
    <React.Fragment>
      <ReactModal
        className="modal-menu"
        isOpen={showMenu}
        onRequestClose={onRequestClose}
        shouldCloseOnOverlayClick={true}
      >
        <SideBarMenus />
      </ReactModal>
      <nav>
        {getMobileMenu()}
        <strong>SuperForum</strong>
      </nav>
    </React.Fragment>
  );
}

Nav = () => {
  const [showMenu, setShowMenu] = useState(false);
  const { width } = useWindowDimensions();

  const getMobileMenu = () => {
    if (width <= 768) {
      return (
        <FontAwesomeIcon
          onClick={onClickToggle}
          icon={faBars}
          size="lg"
          className="nav-mobile-menu"
        />
      );
    }
    return null;
  };

  const onClickToggle = (e: React.MouseEvent<Element, MouseEvent>) => {
    setShowMenu(!showMenu);
  };

  const onRequestClose = (
    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
  ) => {
    setShowMenu(false);
  };

  return (
    <React.Fragment>
      <ReactModal
        className="modal-menu"
        isOpen={showMenu}
        onRequestClose={onRequestClose}
        shouldCloseOnOverlayClick={true}
      >
        <SideBarMenus />
      </ReactModal>
      <nav>
        {getMobileMenu()}
        <Link to="/">
          <strong>SuperForum</strong>
        </Link>
      </nav>
    </React.Fragment>
  );
}

fontAwesomeSolidIcons = {
    faAngleDown,
    faAngleRight,
    faArrowLeft,
    faBars,
    faBookOpen,
    faChartArea,
    faChartBar,
    faChartPie,
    faChevronDown,
    faChevronUp,
    faColumns,
    faSearch,
    faTable,
    faTachometerAlt,
    faUser,
    faExclamationTriangle,
    faSignOutAlt,
    faCalendarAlt,
    faCogs,
    faClipboardList,
    faHammer,
    faTools,
    faSync,
    faLock,
    faLockOpen,
    faTrash,
    faPlusCircle,
    faSpinner,
    faMap,
    faAnchor,
    faCity,
    faChessRook,
    faMountain,
    faCampground,
    faHome,
    faUniversity,
    faCrosshairs,
    faPlane,
    faWrench,
}

function AppBar(props: Props) {
  const { Root, styles, onOpenMobileNav } = useStyles(props);
  const theme = useTheme();

  const isMobile = useMediaQuery(theme.media.down('tablet'));
  const { darkMode, setDarkMode } = useDarkMode();

  return (
    <Root>
      {isMobile && (
        <Tooltip title="Open nav" position="right">
          {(tooltipProps) => (
            <Button
              {...tooltipProps}
              onClick={onOpenMobileNav}
              className={styles.navButton}
              aria-label="Open nav"
              shape="icon"
              color="black"
            >
              <FontAwesomeIcon icon={faBars} size="lg" />
            </Button>
          )}
        </Tooltip>
      )}

      <Tooltip title="Contribute on GitHub" position="left">
        {(tooltipProps) => (
          <Button
            className={styles.githubButton}
            aria-label="Contribute on GitHub"
            shape="icon"
            color="black"
            component="a"
            // @ts-ignore
            href="https://github.com/ricokahler/hacker-ui"
            {...tooltipProps}
          >
            <FontAwesomeIcon icon={faGithub} size="3x" />
          </Button>
        )}
      </Tooltip>

      <Tooltip title="Toggle dark mode" position="left">
        {(tooltipProps) => (
          <Button
            className={styles.darkModeButton}
            aria-label="Dark mode"
            shape="icon"
            color="black"
            onClick={() => setDarkMode((darkMode) => !darkMode)}
            {...tooltipProps}
          >
            <FontAwesomeIcon icon={darkMode ? faSun : faMoon} size="3x" />
          </Button>
        )}
      </Tooltip>
    </Root>
  );
}

function Header({
  href = '/',
  demoPage,
  onMenuClick,
  isLoggedIn,
  withNavMenu = false,
  theme = 'default',
  className = '',
}: ConnectedProps<typeof connector> & Props) {
  const [isNavMenuOpen, setIsNavMenuOpen] = useState(false);
  return (
    <>

      <header className={`${styles.header} ${styles[`theme-${theme}`]} ${className}`}>
        <div className="d-flex justify-content-between w-100 align-items-center h-100">
          {onMenuClick && (
            <Button
              onClick={onMenuClick}
              className={`header__menu-btn ${styles.menu}`}
            >
              <FontAwesomeIcon icon={faBars} />
            </Button>
          )}
          <Link href={href}>
            <a className={styles.logo}>
              <picture>
                <source
                  srcSet={`${process.env.CLOUDFRONT_PUBLIC}/public/logo-square--S.jpg`}
                  media="(max-width: 600px)"
                />
                <source
                  srcSet={`${process.env.CLOUDFRONT_PUBLIC}/public/logo.png`}
                  media="(min-width: 600px)"
                />
                <img
                  src={`${process.env.CLOUDFRONT_PUBLIC}/public/logo.png`}
                  alt="FrontEnd.ro logo"
                />
              </picture>
            </a>
          </Link>
          {demoPage && (
            <p className={`${styles['demo-label']} text-white mx-5 text-bold`}>
              DEMO
            </p>
          )}
        </div>
        <div className="d-flex align-items-center">
          {isLoggedIn ? (
            <>
              <NotificationTooltip
                className="mr-2"
                theme={theme}
                tooltipClassName={styles['notification-tooltip']}
              />
              <AccountTooltip theme={theme} />
            </>
          ) : null}
          {withNavMenu && (
            <Button className={styles['nav-menu']} variant="light" onClick={() => setIsNavMenuOpen(true)}>
              Nav
              <FontAwesomeIcon icon={faLink} />
            </Button>
          )}
        </div>
      </header>
      {
        withNavMenu && (
          <AsideMenu
            hideScrollOnBody
            title="FrontEnd.ro"
            isOpen={isNavMenuOpen}
            className={styles['aside-menu']}
            close={() => setIsNavMenuOpen(false)}
          >
            <div className={styles['nav-wrapper']}>
              <NavLinks />
            </div>
          </AsideMenu>
        )
      }

    </>
  );
}

function NavBar({ classes }: NavBarProps) {
  const { t } = useSafeTranslation();

  const rightSideLinks = [
    {
      title: t('about'),
      icon: faInfoCircle,
      href: 'https://innovation.wfp.org/project/prism',
    },
    {
      title: 'GitHub',
      icon: faGithub,
      href: 'https://github.com/oviohub/prism-frontend',
    },
  ];

  const [openMobileMenu, setOpenMobileMenu] = useState(false);
  const menu = menuList.map(({ title, ...category }) => (
    <MenuItem key={title} title={title} {...category} />
  ));

  // menu for mobile, 1 active accordion at a time so I put the state in here
  const [expanded, setExpanded] = useState('');
  const selectAccordion = (title: string) => {
    setExpanded(title);
  };
  const menuMobile = menuList.map(({ title, ...category }) => (
    <MenuItemMobile
      expanded={expanded}
      selectAccordion={selectAccordion}
      key={title}
      title={title}
      {...category}
    />
  ));

  const buttons = rightSideLinks.map(({ title, icon, href }) => (
    <Grid item key={title}>
      <Typography
        variant="body2"
        component="a"
        target="_blank"
        href={href}
        onClick={() => setOpenMobileMenu(false)}
      >
        <FontAwesomeIcon icon={icon} /> {title}
      </Typography>
    </Grid>
  ));

  return (
    <AppBar position="static" className={classes.appBar}>
      <Toolbar variant="dense">
        <Grid container>
          <Grid item xs={3} className={classes.logoContainer}>
            <Typography
              variant="h6"
              className={classes.logo}
              component={Link}
              to="/"
            >
              {t('Prism')}
            </Typography>
          </Grid>

          <Hidden smDown>
            <Grid className={classes.menuContainer} item xs={6}>
              {menu}
            </Grid>

            <Grid
              spacing={3}
              container
              justify="flex-end"
              alignItems="center"
              item
              xs={3}
            >
              {buttons}
              <LanguageSelector />
            </Grid>
          </Hidden>

          <Hidden mdUp>
            <Grid item xs={9} className={classes.mobileMenuContainer}>
              <Button
                onClick={() => setOpenMobileMenu(prevOpen => !prevOpen)}
                aria-controls={openMobileMenu ? 'mobile-menu-list' : undefined}
                aria-haspopup="true"
                className={classes.menuBars}
              >
                <FontAwesomeIcon icon={faBars} />
              </Button>

              <Drawer
                anchor="right"
                open={openMobileMenu}
                onClose={() => setOpenMobileMenu(false)}
              >
                <div className={classes.mobileDrawerContent}>
                  <Grid container spacing={3}>
                    <Grid container justify="space-around" item>
                      {buttons}
                    </Grid>
                    <Grid container direction="column" item>
                      {menuMobile}
                    </Grid>
                  </Grid>
                </div>
              </Drawer>
            </Grid>
          </Hidden>
        </Grid>
      </Toolbar>
    </AppBar>
  );
}

RootHeader: React.FC<IRootHeaderModel> = ({ parent }) => {
  const history = useHistory();
  const { user, userLoading } = useContext(StateContext);
  const [showProfileDropdown, setShowProfileDropdown] = React.useState(false);
  const [showMenuDropdown, setShowMenuDropdown] = React.useState(false);
  return (
    <header className="RootHeader">
      <div className="header-container">
        <div className="navbar-container">
          <div className="logo-container">
            <div className="app-logo-container">
              <Link to="/">
                <img
                  src={require("../../../assets/png/logo_text.png")}
                  alt="logo"
                  className="logo-image"
                  height={32}
                  loading="lazy"
                />
                <span className="logo-badge">Beta</span>
              </Link>
            </div>
          </div>
          <div className="user-profile-container">
            {user || (parent !== "Login" && parent !== "Landing") ? (
              <>
                {/* <div className="menu-container">
                  <FontAwesomeIcon icon={faEllipsisH}></FontAwesomeIcon>
                </div> */}
                <div
                  className="profile-container"
                  onClick={(e) =>
                    !userLoading ? setShowProfileDropdown(true) : null
                  }
                >
                  {!userLoading ? (
                    <LazyLoadedImage height={42} once>
                      <img
                        src={user?.argoProfile.avatar}
                        alt="address-blockie"
                        className={`user-profile-blockie-icon ${
                          showProfileDropdown ? "selected-profile" : ""
                        }`}
                        height={42}
                        width={42}
                        loading="lazy"
                      />
                    </LazyLoadedImage>
                  ) : (
                    <Skeleton circle={true} height={42} width={42} duration={2} />
                  )}
                </div>
              </>
            ) : (
              <>
                <a
                  className={`login-container`}
                  href="https://discord.gg/ahxuCtm"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Contact
                </a>
                <Link
                  className={`login-container ${
                    parent === "Login" ? "disable-login" : ""
                  }`}
                  to={`/login`}
                >
                  Login
                </Link>
                <button
                  type="button"
                  className="primary-button"
                  onClick={(e) => history.push("/signup")}
                >
                  Signup
                </button>
                <div
                  className="menu-button"
                  onClick={(e) => setShowMenuDropdown(true)}
                >
                  <FontAwesomeIcon icon={showMenuDropdown ? faTimes : faBars} />
                </div>
                {showMenuDropdown && (
                  <MenuDropdown setShowDropdown={setShowMenuDropdown} />
                )}
              </>
            )}
          </div>
          {showProfileDropdown && (
            <ProfileDropdown setShowDropdown={setShowProfileDropdown} />
          )}
        </div>
      </div>
    </header>
  );
}

describe('SettingsComponent', () => {
  let component: SettingsContainerComponent;
  let fixture: ComponentFixture<SettingsContainerComponent>;
  let store: MockStore;
  let dispatchSpy;
  let mockSelectSettings: MemoizedSelector<{}, SettingsState>;

  const getThemeSelectArrow = () =>
    fixture.debugElement.queryAll(By.css('.mat-select-trigger'))[1];
  const getSelectOptions = () =>
    fixture.debugElement.queryAll(By.css('mat-option'));

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FontAwesomeModule,
        SharedModule,
        NoopAnimationsModule,
        TranslateModule.forRoot()
      ],
      providers: [provideMockStore()],
      declarations: [SettingsContainerComponent]
    }).compileComponents();

    TestBed.inject(FaIconLibrary).addIcons(faBars);

    store = TestBed.inject(MockStore);
    mockSelectSettings = store.overrideSelector(
      selectSettings,
      {} as SettingsState
    );
    fixture = TestBed.createComponent(SettingsContainerComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should dispatch change sticky header on sticky header toggle', () => {
    dispatchSpy = spyOn(store, 'dispatch');
    const componentDebug = fixture.debugElement;
    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[0];

    slider.triggerEventHandler('change', { checked: false });
    fixture.detectChanges();

    expect(dispatchSpy).toHaveBeenCalledTimes(1);
    expect(dispatchSpy).toHaveBeenCalledWith(
      actionSettingsChangeStickyHeader({ stickyHeader: false })
    );
  });

  it('should dispatch change theme action on theme selection', () => {
    dispatchSpy = spyOn(store, 'dispatch');
    getThemeSelectArrow().triggerEventHandler('click', {});

    fixture.detectChanges();

    getSelectOptions()[1].triggerEventHandler('click', {});

    fixture.detectChanges();

    expect(dispatchSpy).toHaveBeenCalledTimes(1);
    expect(dispatchSpy).toHaveBeenCalledWith(
      actionSettingsChangeTheme({ theme: 'LIGHT-THEME' })
    );
  });

  it('should dispatch change auto night mode on night mode toggle', () => {
    dispatchSpy = spyOn(store, 'dispatch');
    const componentDebug = fixture.debugElement;
    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[1];

    slider.triggerEventHandler('change', { checked: false });
    fixture.detectChanges();

    expect(dispatchSpy).toHaveBeenCalledTimes(1);
    expect(dispatchSpy).toHaveBeenCalledWith(
      actionSettingsChangeAutoNightMode({ autoNightMode: false })
    );
  });

  it('should dispatch change animations page', () => {
    dispatchSpy = spyOn(store, 'dispatch');
    const componentDebug = fixture.debugElement;
    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[2];

    slider.triggerEventHandler('change', { checked: false });
    fixture.detectChanges();

    expect(dispatchSpy).toHaveBeenCalledTimes(1);
    expect(dispatchSpy).toHaveBeenCalledWith(
      actionSettingsChangeAnimationsPage({ pageAnimations: false })
    );
  });

  it('should dispatch change animations elements', () => {
    dispatchSpy = spyOn(store, 'dispatch');
    const componentDebug = fixture.debugElement;
    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[3];

    slider.triggerEventHandler('change', { checked: false });
    fixture.detectChanges();

    expect(dispatchSpy).toHaveBeenCalledTimes(1);
    expect(dispatchSpy).toHaveBeenCalledWith(
      actionSettingsChangeAnimationsElements({ elementsAnimations: false })
    );
  });

  it('should disable change animations page when disabled is set in state', () => {
    mockSelectSettings.setResult({
      pageAnimationsDisabled: true
    } as SettingsState);
    store.refreshState();
    fixture.detectChanges();

    dispatchSpy = spyOn(store, 'dispatch');
    const componentDebug = fixture.debugElement;
    const slider = componentDebug.queryAll(By.directive(MatSlideToggle))[2];

    console.log(slider);
    slider.triggerEventHandler('change', { checked: false });
    fixture.detectChanges();

    expect(dispatchSpy).toHaveBeenCalledTimes(0);
  });
});

function NavExample(props: Props) {
  const { Root, styles } = useStyles(props);
  const theme = useTheme();
  const [collapsed, setCollapsed] = useState({} as { [key: string]: boolean });
  const [drawerOpen, setDrawerOpen] = useState(false);
  const location = useLocation();
  const isMobile = useMediaQuery(theme.media.down('tablet'));

  /**
   * recursively creates
   */
  const makeList = (
    links: Links,
    parentTitle: string = '',
    depth: number = 0,
  ): React.ReactElement => (
    <List className={classNames({ [styles.list]: depth === 0 })}>
      {links.map(({ title, value }) => {
        const path = `${parentTitle}/${titleToSlug(title)}`;
        const isFolder = Array.isArray(value);
        const isCollapsed = collapsed[path];

        const handleClick = () => {
          if (!isFolder) return;
          setCollapsed((collapsed) => toggle(collapsed, path));
        };

        return (
          <>
            <ListItem>
              <ListItemButton
                className={classNames(styles.listItemButton, {
                  [styles.itemActive]: location.pathname === path,
                })}
                style={{ paddingLeft: theme.space(depth + 1) }}
                onClick={handleClick}
                component={isFolder ? 'button' : Link}
                {...(isFolder ? undefined : { to: path })}
              >
                <span className={styles.listItemText}>{title}</span>{' '}
                {isFolder && (
                  <FontAwesomeIcon
                    className={styles.listItemIcon}
                    icon={faCaretDown}
                    rotation={isCollapsed ? 90 : undefined}
                  />
                )}
              </ListItemButton>
            </ListItem>
            {Array.isArray(value) &&
              !isCollapsed &&
              makeList(value, path, depth + 1)}
          </>
        );
      })}
    </List>
  );

  const navContent = (
    <>
      <div className={styles.title}>Nav Example</div>
      {makeList(links)}
    </>
  );

  return (
    <>
      <Root>
        {!isMobile && <nav className={styles.nav}>{navContent}</nav>}
        <div className={styles.content}>
          <header className={styles.header}>
            {isMobile && (
              <Button
                className={styles.openNavButton}
                shape="icon"
                aria-label="Open Nav"
                onClick={() => setDrawerOpen(true)}
              >
                <FontAwesomeIcon icon={faBars} size="lg" />
              </Button>
            )}
            {location.pathname}
          </header>
          <main className={styles.main}>
            <Switch>
              {pages.map(({ path, component }) => (
                <Route path={path} exact component={component} />
              ))}
              <Redirect to={firstPage.path} />
            </Switch>
          </main>
        </div>
      </Root>

      {isMobile && (
        <Drawer
          style={styles.cssVariableObject}
          className={styles.nav}
          open={drawerOpen}
          onClose={() => setDrawerOpen(false)}
        >
          {navContent}
        </Drawer>
      )}
    </>
  );
}