react-bootstrap#NavItem JavaScript 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: NavigationControl.js    From aws-workshop-colony with Apache License 2.0 6 votes vote down vote up 
render() {

        let promotionsNavItem = null;
        if(this.props.auth.isLoggedIn) {
            promotionsNavItem = <NavItem eventKey='/promotions'>Promotions</NavItem>;
        }

        return (
            <Nav onSelect={this.handleSelect}>
                {promotionsNavItem}
                <NavItem eventKey='/about'>About</NavItem>
            </Nav>
        )
    }
Example #2
Source File: header.js    From LearningJAMStack_Gatsby with MIT License 6 votes vote down vote up 
Header = ({ siteTitle }) => (
  <Navbar bg="light" variant="light" expand="lg">
    <Navbar.Brand as={Link} href="/">
      {siteTitle}
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/about">
            会社概要
          </Nav.Link>
        </NavItem>
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/jigyo">
            事業内容
          </Nav.Link>
        </NavItem>
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/information">
            インフォメーション
          </Nav.Link>
        </NavItem>
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/contact">
            お問い合わせ
          </Nav.Link>
        </NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
)
Example #3
Source File: header.js    From LearningJAMStack_microCMS_template with MIT License 6 votes vote down vote up 
Header = ({ siteTitle }) => (
  <Navbar bg="light" variant="light" expand="lg">
    <Navbar.Brand as={Link} href="/">
      {siteTitle}
    </Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <Nav className="mr-auto">
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/about">
            会社概要
          </Nav.Link>
        </NavItem>
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/jigyo">
            事業内容
          </Nav.Link>
        </NavItem>
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/information">
            インフォメーション
          </Nav.Link>
        </NavItem>
        <NavItem href="/about">
          <Nav.Link as={Link} activeClassName="active" to="/contact">
            お問い合わせ
          </Nav.Link>
        </NavItem>
      </Nav>
    </Navbar.Collapse>
  </Navbar>
)
Example #4
Source File: PlotSelection.jsx    From mapstore2-cadastrapp with GNU General Public License v3.0 5 votes vote down vote up 
function PlotTabs({
    active,
    onTabChange,
    data,
    plots,
    ...props
}) {

    const MAX_TABS = 3; // max number of tabs
    const getPlotTitle = (plot, index) => {
        return plot?.title ?? ("Selection " + (index + 1).toString());
    };
    return (
        <Tab.Container
            onSelect={onTabChange}
            activeKey={active}
            defaultActiveKey={active}>
            <Row className="clearfix">
                <Col sm={12}>
                    <Nav bsStyle="tabs">
                        {plots.slice(0, plots.length > MAX_TABS ? MAX_TABS - 1 : MAX_TABS).map((plot, index) => (
                            <NavItem role="tab" eventKey={index}>
                                {getPlotTitle(plot, index)}
                            </NavItem>
                        ))}
                        {plots.length > MAX_TABS
                            ? <NavDropdown title={active < MAX_TABS - 1 ? "More..." : getPlotTitle(plots[active], active)}>
                                {plots.slice(MAX_TABS - 1).map((plot, index) => (
                                    <MenuItem eventKey={index + MAX_TABS - 1}>
                                        {getPlotTitle(plot, index + MAX_TABS - 1)}
                                    </MenuItem>
                                ))}
                            </NavDropdown>
                            : null}
                        <PlotSelectionTabActionButtons {...props} data={data} />
                    </Nav>
                </Col>
                <PlotSelectionTabContent {...props} data={data} />
            </Row>
        </Tab.Container>
    );
}
Example #5
Source File: TopNav.js    From katanapools with GNU General Public License v2.0 5 votes vote down vote up 
render() {
    const {user: {providerConnected}} = this.props;

    let addressBar = <span/>;
    let currentConnection = <span/>;
    if (!providerConnected) {
      currentConnection = <div className="provider-connection-error">No Metamask connection detected.</div>
    }
    if (window.web3 && window.web3.currentProvider) {
     const selectedAddress = window.web3.currentProvider.selectedAddress;
     const currentNetwork = window.web3.currentProvider.networkVersion;
     if (currentNetwork && selectedAddress) {

     addressBar = <AddressDisplay address={selectedAddress}/>
     if (currentNetwork.toString() === '1') {
       currentConnection = <div className="connection-string">Connected to Mainnet</div>;
     }
     if (currentNetwork.toString() === '3') {
       currentConnection = <div className="connection-string">Connected to Ropsten</div>;
     }
     }
    }

    return (
      <div>
      <Navbar  expand="lg" className="app-top-nav">
        <Navbar.Brand href="/">Katana Pools</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar id="basic-navbar-nav">
          <Nav className="mr-auto">
            <LinkContainer to="/explore">
              <NavItem key={1}>Explore Tokens</NavItem>
            </LinkContainer>
            <LinkContainer to="/pool/view">
              <NavItem key={2}>Explore Pools</NavItem>
            </LinkContainer>
            <LinkContainer to="/pool/create">
              <NavItem key={3}>Create Pool</NavItem>
            </LinkContainer>
          </Nav>
        </Navbar>
        <div>
         {currentConnection}
         {addressBar}
        </div>
      </Navbar>
      </div>
      )
  }