react-bootstrap#NavItem TypeScript Examples

The following examples show how to use react-bootstrap#NavItem. 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: App.tsx    From tutorial-cloudflare-bookstore with Apache License 2.0 6 votes vote down vote up 
showLoggedOutBar = () => (
    <Fragment>
      <LinkContainer to="/login">
        <NavItem>
          <span
            className="orange  navbar-items-font-style"
            style={{ fontWeight: "initial" }}
          >
            Log in
          </span>
        </NavItem>
      </LinkContainer>
    </Fragment>
  );
Example #2
Source File: BestSellersBar.tsx    From tutorial-cloudflare-bookstore with Apache License 2.0 6 votes vote down vote up 
render() {
    return (
      <div className="center ad-gallery nav">
        <div className="col-md-2 hidden-sm hidden-xs">
          <LinkContainer to="/best">
            <NavItem><h3>Bookstore<br/>Best Sellers</h3></NavItem>
          </LinkContainer>
        </div>
        <div className="row">
          {bestSellers.map(book =>
            <div className="col-md-2 hidden-sm hidden-xs" key={book}>
              <LinkContainer to="/best">
                <NavItem><img src={book} className="thumbs" /></NavItem>
              </LinkContainer>
            </div>)}
        </div>
      </div>
    );
  }
Example #3
Source File: App.tsx    From tutorial-cloudflare-bookstore with Apache License 2.0 5 votes vote down vote up 
showLoggedInBar = () => (
    <Fragment>
      <Navbar.Form pullLeft>
        <SearchBar />
      </Navbar.Form>
      <LinkContainer to="/past">
        <NavItem>
          <span
            className="orange line-height-24 navbar-items-font-style"
            style={{ fontWeight: "initial" }}
          >
            Past orders
          </span>
        </NavItem>
      </LinkContainer>
      <LinkContainer to="/best">
        <NavItem>
          <span
            className="orange line-height-24 navbar-items-font-style"
            style={{ fontWeight: "initial" }}
          >
            Bestsellers
          </span>
        </NavItem>
      </LinkContainer>
      <NavItem onClick={this.handleLogout}>
        <span
          className="orange line-height-24 navbar-items-font-style"
          style={{ fontWeight: "initial" }}
        >
          Log out
        </span>
      </NavItem>
      <LinkContainer to="/cart">
        <NavItem>
          <div className="shopping-icon-container">
            <span
              className="glyphicon glyphicon-shopping-cart white"
              aria-hidden="true"
            ></span>
          </div>
        </NavItem>
      </LinkContainer>
    </Fragment>
  );