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

Sidebar =() =>  {
        return (
            <div className={classNames("bg-none", "border-right")} id="sidebar-wrapper">
                <div className="sidebar-heading">TutorBase</div>
                <ListGroup>
                    <ListGroupItem tag="a" href="/home" className={classNames("list-group-item", "bg-none", "tab-active")}><FontAwesomeIcon icon={faAddressBook} />Schedule a Session</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/meetings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCalendar} />Upcoming Meetings</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/history" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faHistory} />History</ListGroupItem>
                    <ListGroupItem tag="a" href="/home/settings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCog} />Settings</ListGroupItem>
                </ListGroup>
                <ListGroup className="list-group-bottom">
                    {/* <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faRandom} />Switch Dashboard</ListGroupItem> */}
                    <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faSignOutAlt} />Logout</ListGroupItem>
                </ListGroup>
            </div>
        );
}

ProfileMenu = observer(function ProfileMenu() {
  const { userStore } = useStores();
  const { user } = userStore;

  return (
    <div className="absolute border w-48 mt-2 bg-gray-100 transform translate-x-3/4 rounded-lg p-3">
      {user ? (
        <>
          <Link href="/profile">
            <a className="flex items-center">
              <FontAwesomeIcon icon={faUser} className="w-4 inline mr-2" />{" "}
              פרופיל
            </a>
          </Link>
          <div
            className="cursor-pointer"
            onClick={() => {
              userStore.logout();
            }}
          >
            <FontAwesomeIcon icon={faSignOutAlt} className="w-4 inline mr-2" />
            התנתק
          </div>
        </>
      ) : (
        <>
          <div>
            <Link href="/login">התחברות</Link>
          </div>
          <div>
            <Link href="/register">הרשמה</Link>
          </div>
        </>
      )}
    </div>
  );
})

SideBarMenus = () => {
  const [showRegister, setShowRegister] = useState(false);
  const [showLogin, setShowLogin] = useState(false);
  const [showLogout, setShowLogout] = useState(false);
  const user = useSelector((state: AppState) => state.user);

  const onClickToggleRegister = () => {
    setShowRegister(!showRegister);
  };

  const onClickToggleLogin = () => {
    setShowLogin(!showLogin);
  };

  const onClickToggleLogout = () => {
    setShowLogout(!showLogout);
  };

  return (
    <React.Fragment>
      <ul>
        <li>
          <FontAwesomeIcon icon={faUser} />
          <span className="menu-name">
            <Link to={`/userprofile/${user?.id}`}>{user?.userName}</Link>
          </span>
        </li>
        <li>
          <FontAwesomeIcon icon={faRegistered} />
          <span onClick={onClickToggleRegister} className="menu-name">
            register
          </span>
          <Registration
            isOpen={showRegister}
            onClickToggle={onClickToggleRegister}
          />
        </li>
        <li>
          <FontAwesomeIcon icon={faSignInAlt} />
          <span onClick={onClickToggleLogin} className="menu-name">
            login
          </span>
          <Login isOpen={showLogin} onClickToggle={onClickToggleLogin} />
        </li>
        <li>
          <FontAwesomeIcon icon={faSignOutAlt} />
          <span onClick={onClickToggleLogout} className="menu-name">
            logout
          </span>
          <Logout isOpen={showLogout} onClickToggle={onClickToggleLogout} />
        </li>
      </ul>
    </React.Fragment>
  );
}

SideBarMenus = () => {
  const [showRegister, setShowRegister] = useState(false);
  const [showLogin, setShowLogin] = useState(false);
  const [showLogout, setShowLogout] = useState(false);
  const user = useSelector((state: AppState) => state.user);

  useEffect(() => {
    console.log("SideBar user", user);
  }, [user]);

  const onClickToggleRegister = () => {
    setShowRegister(!showRegister);
  };

  const onClickToggleLogin = () => {
    setShowLogin(!showLogin);
  };

  const onClickToggleLogout = () => {
    setShowLogout(!showLogout);
  };

  return (
    <React.Fragment>
      <ul>
        {user ? (
          <li>
            <FontAwesomeIcon icon={faUser} />
            <span className="menu-name">
              <Link to={`/userprofile/${user?.id}`}>{user?.userName}</Link>
            </span>
          </li>
        ) : null}

        {user ? null : (
          <li>
            <FontAwesomeIcon icon={faRegistered} />
            <span onClick={onClickToggleRegister} className="menu-name">
              register
            </span>
            <Registration
              isOpen={showRegister}
              onClickToggle={onClickToggleRegister}
            />
          </li>
        )}

        {user ? null : (
          <li>
            <FontAwesomeIcon icon={faSignInAlt} />
            <span onClick={onClickToggleLogin} className="menu-name">
              login
            </span>
            <Login isOpen={showLogin} onClickToggle={onClickToggleLogin} />
          </li>
        )}

        {user ? (
          <li>
            <FontAwesomeIcon icon={faSignOutAlt} />
            <span onClick={onClickToggleLogout} className="menu-name">
              logout
            </span>
            <Logout isOpen={showLogout} onClickToggle={onClickToggleLogout} />
          </li>
        ) : null}
      </ul>
    </React.Fragment>
  );
}

EndMeetingControl: React.FC = () => {
  const meetingManager = useMeetingManager();
  const history = useHistory();
  const [showEndModal, setShowEndModal] = useState(false);
  const { updateMeetingStatus } = useMeetingStatus();
  const messagingService = useVideoSendingService();

  const toggleEndMeeting = (): void => {
    setShowEndModal(!showEndModal);
  }

  const closeWS = () => {
    try {
      messagingService?.websocket?.close(DEFAULT_WEB_SOCKET_TIMEOUT_MS);
      console.log('Closing web socket');
    } catch (error) {
      console.error(`Unable to send close message on messaging socket: ${error}`);
    }
  }

  const endMeeting = async (): Promise<void> => {
    await meetingManager?.endMeeting();
    updateMeetingStatus(MeetingStatus.Ended);
    closeWS();
    history.push(routes.HOME);
  }

  const leaveMeeting = async (): Promise<void> => {
    await meetingManager?.leaveMeeting();
    closeWS();
    history.push(routes.HOME);
  }

  return (
    <>
      <ButtonGroup>
        <IconButton icon={faSignOutAlt} onClick={leaveMeeting} />
        <IconButton icon={faPowerOff} onClick={toggleEndMeeting} />
      </ButtonGroup>
      {showEndModal && (
        <Modal size="medium" onClose={toggleEndMeeting} rootId="modal-root">
        <ModalHeader title="End Meeting" />
        <ModalBody>
          <StyledP>
            Are you sure you want to end the meeting for everyone? The meeting
            cannot be used after ending it.
          </StyledP>
        </ModalBody>
        <ModalButtonGroup
          primaryButtons={[
            <ModalButton
              onClick={endMeeting}
              variant="primary"
              label="End meeting for all"
              closesModal
            />,
            <ModalButton variant="secondary" label="Cancel" closesModal />
          ]}
        />
      </Modal>
      )}
    </>
  );
}

logoutIcon = faSignOutAlt as IconProp;

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,
}

Sidebar = (params: IParams) => {
    let dispatch = useDispatch();
    let param : string = useLocation().pathname;
    let extension:string = param.split('/')[2];
    return (
        <div className={classNames("bg-none", "border-right")} id="sidebar-wrapper">
            <div className="sidebar-heading" style={{position: "fixed"}}>TutorBase</div>
            <ListGroup>
                {params.mode === "Tutor"
                    ? ( params.isTutor ? (
                        <div style={{position: "fixed", top: '50px'}}>
                            <ListGroupItem tag="a" href="/tutor/overview"
                                           className={classNames("list-group-item", "bg-none", extension==='overview' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faUserClock}/>Overview</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/meetings"
                                           className={classNames("list-group-item", "bg-none", extension==='meetings' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faCalendar}/>Upcoming Meetings</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/history"
                                           className={classNames("list-group-item", "bg-none", extension==='history' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faHistory}/>History</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/analytics"
                                           className={classNames("list-group-item", "bg-none", extension==='analytics' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faChartArea}/>Analytics</ListGroupItem>
                            <ListGroupItem tag="a" href="/tutor/settings"
                                           className={classNames("list-group-item", "bg-none", extension==='settings' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faCog}/>Settings</ListGroupItem>
                            {isMobile ?
                                <div>
                                <ListGroupItem tag="a" href="/home/schedule" className={classNames("list-group-item", "bg-none")} style={{marginTop:'20rem'}}>
                                    <FontAwesomeIcon icon={faToggleOn}/>
                                    Switch to Client Dashboard
                                </ListGroupItem>
                                <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
                                    <FontAwesomeIcon icon={faSignOutAlt}/>
                                    Logout
                                </ListGroupItem>
                                </div>

                            : null}
                        </div>
                    )
                    :
                    <div></div>
                    )
                    : (
                        <div style={{position: "fixed", top: '50px'}}>
                            <ListGroupItem tag="a" href="/home/schedule"
                                           className={classNames("list-group-item", "bg-none", extension==='schedule' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faAddressBook}/>Schedule a Session</ListGroupItem>
                            <ListGroupItem tag="a" href="/home/meetings"
                                           className={classNames("list-group-item", "bg-none", extension==='meetings' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faCalendar}/>Upcoming Meetings</ListGroupItem>
                            <ListGroupItem tag="a" href="/home/history"
                                           className={classNames("list-group-item", "bg-none", extension==='history' ?"tab-active" : null)}><FontAwesomeIcon
                                icon={faHistory}/>History</ListGroupItem>
                            <ListGroupItem tag="a" href="/home/settings"
                                           className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon
                                icon={faCog}/>Settings</ListGroupItem>
                            {isMobile ?
                                <div>
                                <ListGroupItem tag="a" href="/tutor/meetings" className={classNames("list-group-item", "bg-none")} style={{marginTop:'20rem'}}>
                                    <FontAwesomeIcon icon={faToggleOff}/>
                                    Switch to Tutor Dashboard
                                </ListGroupItem>
                                <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
                                    <FontAwesomeIcon icon={faSignOutAlt}/>
                                    Logout
                                </ListGroupItem>
                                </div>

                            : null}
                        </div>
                    )}
            </ListGroup>
            {isMobile ? null 
            :<ListGroup className="list-group-bottom">
                {params.mode === "Tutor"
                    ? (
                        <div>
                            <ListGroupItem tag="a" href="/home/schedule" className={classNames("list-group-item", "bg-none")}>
                                <FontAwesomeIcon icon={faToggleOn}/>
                                Switch to Client Dashboard
                            </ListGroupItem>
                        </div>
                    ) :
                    (
                        <div>
                            <ListGroupItem tag="a" href="/tutor/overview" className={classNames("list-group-item", "bg-none")}>
                                <FontAwesomeIcon icon={faToggleOff}/>
                                Switch to Tutor Dashboard
                            </ListGroupItem>
                        </div>
                    )
                }


                <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
                    <FontAwesomeIcon icon={faSignOutAlt}/>
                    Logout
                </ListGroupItem>
            </ListGroup>
            }
        </div>
    );
}

render() {
    return (
      <div>
        <div id="Navbar-Full" className="section">
          <div id="Navbar" className="section">
            <div className="logo" />
            <div
              id="Outer"
              style={{
                clipPath:
                  'polygon(0 0, 100% 0,' +
                  this.state.points[1] +
                  'px 50%, 100% 100%, 0 100%, ' +
                  this.state.points[0] +
                  'px 50%)',
              }}
              className="links outer"
            >
              <div
                id="Inner"
                style={{
                  clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%, ' + this.state.points[0] + 'px 50%)',
                }}
                className="links inner"
              >
                <div>
                  <Link to={this.navbarLinks[0]}>LOBBY</Link>
                  <Link to={this.navbarLinks[1]}>START HERE</Link>
                  <Link to={this.navbarLinks[2]}>COMMUNITY</Link>
                  <Link to={this.navbarLinks[3]}>STATS</Link>
                  <Link to={this.navbarLinks[4]}>DEVELOPMENT</Link>
                </div>
                <div>
                  {this.props.username.length > 0 ? (
                    <>
                      <Link className="username" to={'/profile/' + this.props.username}>
                        {this.props.username}
                      </Link>
                      <button onClick={this.toggleSettings}>
                        <FontAwesomeIcon icon={faCog} />
                      </button>
                      <button onClick={this.handleLogout}>
                        <FontAwesomeIcon icon={faSignOutAlt} />
                      </button>
                    </>
                  ) : (
                    <>
                      <Link to="/">LOG IN</Link>
                      <p className="or">/</p>
                      <Link to="/signup">SIGN UP</Link>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
          <div id="Navbar-Mobile" className="section">
            <div className="logo" />
            <div>
              <button onClick={this.toggleSettings}>
                <FontAwesomeIcon icon={faCog} />
              </button>
              <button onClick={this.toggleSidebar}>
                <FontAwesomeIcon icon={faList} />
              </button>
            </div>
          </div>
        </div>
        {this.state.showSettings ? (
          <StyleForm onExit={this.hideSettings} style={this.props.style} dispatch={this.props.dispatch} />
        ) : null}
        <div
          className="links list"
          style={{
            transform: this.state.showSidebar ? 'translate(0%, 0%)' : 'translate(100%, 0%)',
          }}
        >
          <AvalonScrollbars>
            <div className="links container">
              <Link to={this.navbarLinks[0]}>LOBBY</Link>
              <Link to={this.navbarLinks[1]}>START HERE</Link>
              <Link to={this.navbarLinks[2]}>COMMUNITY</Link>
              <Link to={this.navbarLinks[3]}>STATS</Link>
              <Link to={this.navbarLinks[4]}>DEVELOPMENT</Link>
              <div />
              {this.props.username.length > 0 ? (
                <>
                  {' '}
                  <Link to={'/profile/' + this.props.username}>PROFILE</Link>
                  <button onClick={this.hideSidebarToSettings}>SETTINGS</button>
                  <button onClick={this.handleLogout}>LOG OUT</button>
                </>
              ) : (
                <>
                  <Link to="/">LOG IN</Link>
                  <Link to="/signup">SIGN UP</Link>
                </>
              )}
            </div>
          </AvalonScrollbars>
        </div>
      </div>
    );
  }