react-icons/bs#BsPerson JavaScript Examples

The following examples show how to use react-icons/bs#BsPerson. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: NavBar.js    From viade_en1b with MIT License 4 votes vote down vote up 
MyNavBar = (props) => {
  const links = [
    {
      id: 0,
      text: "Dashboard",
      href: "/dashboard",
      icon: <BsCompass className="icon"></BsCompass>,
      testId: "navbar-dashboard",
    },
    {
      id: 1,
      text: "MyRoutes",
      href: "/routes/MyRoutes",
      icon: <BsMap className="icon"></BsMap>,
      testId: "navbar-my-routes",
    },
    {
      id: 2,
      text: "UploadRoute",
      href: "/routes/upload",
      icon: <BsArrowBarUp className="icon"></BsArrowBarUp>,
      testId: "navbar-upload-route",
    },
    {
      id: 3,
      text: "Notifications",
      href: "/notifications",
      icon: <BsBell className="icon"></BsBell>,
      testId: "navbar-notifications",
    },
  ];

  const forTestingPurposes = "http://testing.inrupt.net/profile/card#me";

  if (!props.loaded) {
    getWebId().then((id) => {
      props.updateWebId(id);
      props.loadFriendsRequest();
      props.loadEmailRequest();
      if (id === null) {
        //just for testing is needed, fucking travis
        createBaseStructure(forTestingPurposes).then((response) => {
          //checkInboxForSharedRoutes(forTestingPurposes);
        });
      } else {
        createBaseStructure(id).then((response) => {
          //checkInboxForSharedRoutes(id);
        });
      }
      props.loadRoutesRequest();
      props.contentLoaded();
    });
  }

  const dropDownElements = [
    {
      id: 0,
      text: <FormattedMessage id="MyProfile" />,
      href: "/profile",
      testId: "navbar-my-profile",
    },
    {
      id: 1,
      text: <FormattedMessage id="Settings" />,
      href: "/settings",
      testId: "navbar-settings",
    },
    {
      id: 2,
      text: <FormattedMessage id="MyGroups" />,
      href: "/profile/groups",
      testId: "navbar-groups",
    },
    {
      id: 3,
      text: <FormattedMessage id="LogOut" />,
      href: "#/",
      testId: "navbar-logout",
    },
  ];

  return (
    <Navbar className="bg-light" fixed="top" bg="light" expand="lg">
      <LinkContainer to="/dashboard">
        <Navbar.Brand data-testid="navbar-brand" href="/dashboard">
          <img
            alt="Viade logo"
            src={process.env.PUBLIC_URL + "/viade-logo.svg"}
          ></img>
          <span>{props.brandName}</span>
        </Navbar.Brand>
      </LinkContainer>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse className="justify-content-end" id="basic-navbar-nav">
        <Nav className="justify-content-end" activeKey="/home">
          {<ThemePicker></ThemePicker>}
          {links.map((link) => {
            return (
              <span key={link.id}>
                <LinkContainer to={link.href}>
                  <Nav.Link
                    data-testid={link.testId}
                    to={link.href}
                    key={link.id}
                    href={link.href}
                    className="nav-link"
                    onClick={props.clearRoute}
                  >
                    {link.icon}
                    <FormattedMessage id={link.text} />
                  </Nav.Link>
                </LinkContainer>
              </span>
            );
          })}

          <NavDropdown
            variant="secondary"
            drop="left"
            title={<BsPerson className="icon"></BsPerson>}
          >
            {dropDownElements.map((element) => {
              return (
                <NavDropdown.Item
                  data-testid={element.testId}
                  key={element.id}
                  href={element.href}
                  onClick={props.clearRoute}
                >
                  {element.id === 3 ? (
                    <LogoutButton>{element.text}</LogoutButton>
                  ) : (
                    <LinkContainer to={element.href}>
                      <Nav.Link>{element.text}</Nav.Link>
                    </LinkContainer>
                  )}
                </NavDropdown.Item>
              );
            })}
          </NavDropdown>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  );
}