react-bootstrap#Navbar JavaScript Examples

export function UsageHeader () {
  const router = useRouter()
  return (
    <Navbar className='pt-0'>
      <Nav
        className={`${styles.navbarNav} justify-content-around`}
        activeKey={router.asPath}
      >
        <Nav.Item>
          <Link href='/users/week' passHref>
            <Nav.Link
              className={styles.navLink}
            >
              week
            </Nav.Link>
          </Link>
        </Nav.Item>
        <Nav.Item>
          <Link href='/users/forever' passHref>
            <Nav.Link
              className={styles.navLink}
            >
              forever
            </Nav.Link>
          </Link>
        </Nav.Item>
      </Nav>
    </Navbar>
  )
}

render() {
        return (
            <Navbar bg="white" sticky="top" className="py-1 border" style={{ zIndex: 10000 }}>
                <Container>
                    <Navbar.Brand as={Link} className="btn btn-naked-primary rounded-circle text-primary" to="/">
                        <img className="rounded-circle" height="45" width="45" src="/android-chrome-192x192.png" alt="logo" />
                        {/* <FontAwesomeIcon size="lg" icon={faTwitter} /> */}
                    </Navbar.Brand>
                    <Search className="form-inline w-100" />
                    <Row className="ml-auto d-none d-lg-flex justify-content-end w-50">
                        <Link to="/login" className="btn btn-outline-primary rounded-pill px-3 py-2 font-weight-bold">Log in</Link>
                        <Link to="/signup" className="btn btn-primary rounded-pill px-3 py-2 font-weight-bold ml-2">Sign up</Link>
                    </Row>
                </Container>
            </Navbar>
        )
    }

SiteNavbar = () => {
	return (
		<NavbarContainer>
			<Navbar
				expand="lg"
				style={{ backgroundColor: "#14213D" }}
				variant="dark"
				fixed="top"
			>
				<Navbar.Toggle aria-controls="basic-navbar-nav" />
				<Navbar.Collapse id="basic-navbar-nav">
					<Nav className="ml-auto">
						<Nav.Link active onClick={() => scrollTo("#home")}>
							Home
						</Nav.Link>
						<Nav.Link active onClick={() => scrollTo("#aboutus")}>
							About Us
						</Nav.Link>
						<Nav.Link active onClick={() => scrollTo("#contributors")}>
							Contributors
						</Nav.Link>
						<Nav.Link active onClick={() => scrollTo("#joinus")}>
							Join Us
						</Nav.Link>
						<Nav.Link active onClick={() => scrollTo("#footer")}>
							Contact
						</Nav.Link>
					</Nav>
				</Navbar.Collapse>
			</Navbar>
		</NavbarContainer>
	)
}

render() {
    return (
      <Navbar bg="dark" variant="dark" expand="lg">
        <Navbar.Brand href="/">
          <img src={logo} className="navbar-logo" alt="logo" />
          OpenRCA
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="/graph">Graph</Nav.Link>
            <Nav.Link href="/alerts">
                Alerts
              <Badge className="alertBadge" variant="danger" pill>{this.state.alertCount ? this.state.alertCount : null}</Badge>
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }

render() {
        return (
            <div>
                {/* <Navbar  expand='lg' style={{backgroundColor: '#fff3e0'}}> */}
                <Navbar expand='lg' bg='info' fixed="top" className='shadow-lg'>
                    <Container>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Brand className='logo text-light'>Document Layout Analysis</Navbar.Brand>
                        <Navbar.Text className='logo text-light'>
                            v0.1
                        </Navbar.Text>
                    </Container>
                </Navbar>
            </div>
        )
    }

Header = () => {
   return (
      <header>
         <Navbar bg="primary" expand="lg" variant="dark" collapseOnSelect>
            <Container>
               <LinkContainer to="/">
                  <Navbar.Brand>My Library</Navbar.Brand>
               </LinkContainer>
               <Navbar.Toggle aria-controls="basic-navbar-nav" />
               <Navbar.Collapse id="basic-navbar-nav">
                  <Nav className="ml-auto">
                     <LinkContainer to="/books">
                        <Nav.Link>
                           <i className="fas fa-book" /> My Books
                        </Nav.Link>
                     </LinkContainer>
                  </Nav>
               </Navbar.Collapse>
            </Container>
         </Navbar>
      </header>
   );
}

NavComp = () =>{
    return(
        <Navbar bg="light" expand="lg">
  <Navbar.Brand href="#home">
  <a className="navbar-brand" href="#">
    <img src={Logo} alt="logo" className="image" />
      </a>

  </Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
      <Nav className="nav-link">About</Nav>
      <Nav className="nav-link">Event</Nav>
      <Nav className="nav-link">Program</Nav>
      <Nav className="nav-link">Contact</Nav>
      <Nav className="nav-link">Login</Nav>
    </Nav>
    <div className="mob-show">
    <div><a href="#" className="button">Donate Now</a></div>
      <div><a href="#" className="button">Join Us</a></div>
    </div>
  </Navbar.Collapse>
</Navbar>
    );
}

HeaderNav = () => (
  <Navbar bg="dark" variant="dark">
    <Navbar.Brand>
      <HashLink smooth to="/#home">
        <img src={logoImg} style={{ height: 30 }} alt="IrisQL logo" />
      </HashLink>
    </Navbar.Brand>
    <Nav className="d-flex justify-content-around" style={{ width: 200 }}>
      <HashLink smooth to="/#features" style={{ color: 'grey' }}>Features</HashLink>
      <HashLink smooth to="/#demo" style={{ color: 'grey' }}>Demo</HashLink>
      <HashLink smooth to="/#team" style={{ color: 'grey' }}>Team</HashLink>
    </Nav>
    <Nav className="ml-auto">
      <Navbar.Brand href="https://github.com/oslabs-beta/irisql" target="_blank"><img src={githubLogo} style={{ width: 25 }} alt="GitHub logo" /></Navbar.Brand>
    </Nav>
  </Navbar>
)

render() {
    const { theme } = this.context;
    return (
      <Navbar variant="dark" style={{ background: theme.useFluentDesign ? theme.acrylicTexture80.background : 'none' }}>
        <Navbar.Brand href="/">
          <img src={logo} width="30" height="30" className="d-inline-block align-top" alt="logo" /> Fifa.io
        </Navbar.Brand>
        <this.loginStatus />
      </Navbar>
    );
  }

NavBar = ({logo, links = [], logoStyle}) => {
  return (
    <div className="nav-bar-component ">
      <Navbar className="nav-bar-custom" expand="lg">
      <div className="logo-container" style={logoStyle}>
        <a href="/">
          <img className="logo" src={logo} alt="logo"/>
        </a>
      </div>
      <Navbar.Toggle aria-controls="basic-navbar-nav" className="toggle"/>
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="justify-content-end" style={{width: "100%"}}>
          {links.map((link) => !link.isExternal ? (
            <Nav.Link 
              key={link.path}
              to={link.path} 
              className={link.isSpecial ? "special" : ""}
              style={{backgroundColor: null}}
            >
              {link.name}
            </Nav.Link>
          ) : (
            <Nav.Link 
              href={link.path} 
              target="_blank" 
              className={link.isSpecial ? "special" : ""}
            >
              {link.name} <FontAwesomeIcon icon={faExternalLinkAlt} className="nav-icon"/>
            </Nav.Link>
          ))}
        </Nav>
      </Navbar.Collapse>
    </Navbar>
    </div>
  )
}

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>
)

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>
)

render(){
        
        return (
            
            <Navbar  className="topheader"  expand="lg">
                <Navbar.Brand className="brandLogo" href="/"><img className="logo" alt="logo" src={logo}/></Navbar.Brand>
                <Navbar.Toggle bg="light" aria-controls="basic-navbar-nav" />
                <Navbar.Collapse bg="light" id="basic-navbar-nav">
                    <Nav className="mr-auto">
                    </Nav>
                    { (this.state.user === '') ?
                    <Nav className="ml-auto logintag">
                        <Nav.Link className="topheader unique white" href={`/login/${this.state.userid}`}>Login with Spotify</Nav.Link>
                    </Nav>
                    :
                    <Nav bg="light" className="ml-auto">
                        <NavDropdown alignRight className="myaccountTag" title="My Account" id="dropdown-menu-align-right">

                            <NavDropdown.Item className="white">Hello, {this.state.user}</NavDropdown.Item>
                            { this.state.devicename === null ? 
                                <div className="text-center"><NavDropdown.Item className="white">Device name: [No active device]</NavDropdown.Item>
                                <button onClick={this.handleScanDeviceClick} className="btn btn-success ">Scan devices</button></div>
                            :
                                <NavDropdown.Item className="white">Device name: {this.state.devicename}</NavDropdown.Item>
                            }
                            
                            <NavDropdown.Divider />
                            <NavDropdown.Item className="white" onClick={this.toggleLogOut} href="/">Log out</NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                    } 
                </Navbar.Collapse>
            </Navbar>
            
        );
    }

export function NotificationHeader () {
  const router = useRouter()
  return (
    <Navbar className='py-0'>
      <Nav
        className={`${styles.navbarNav} justify-content-around`}
        activeKey={router.asPath}
      >
        <Nav.Item>
          <Link href='/notifications' passHref>
            <Nav.Link
              className={styles.navLink}
            >
              all
            </Nav.Link>
          </Link>
        </Nav.Item>
        <Nav.Item>
          <Link href='/notifications?inc=replies' passHref>
            <Nav.Link
              className={styles.navLink}
            >
              replies
            </Nav.Link>
          </Link>
        </Nav.Item>
      </Nav>
    </Navbar>
  )
}

CustomNavbar = () => {
  return (
    <>
      <Navbar variant="dark" expand="lg" id="site-navbar">
        <Link to="/" className="link-no-style">
          <Navbar.Brand as="span">Address Derivation</Navbar.Brand>
        </Link>
        <Link to="/hww" className="link-no-style">
          <Navbar.Brand as="span">HW Wallets</Navbar.Brand>
        </Link>
      </Navbar>
    </>
  )
}

Header = () => (
  <Navbar inverse collapseOnSelect staticTop={true}>
    <div style={navbarStyle}>
      <Navbar.Header style={headerStyle}>
        <Navbar.Brand>
          <Link to="/" style={promoManagerStyle}>
            PROMO MANAGER
          </Link>
        </Navbar.Brand>
        <NavigationControl />
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>
        <Nav pullRight>
          <LoginControl />
        </Nav>
      </Navbar.Collapse>
    </div>
  </Navbar>
)

Header = ({isAuthenticated, logout}) => (
<Navbar bg="light" expand="lg">
  <Navbar.Brand>
    <Link to="/">
      <Logo />
    </Link>
  </Navbar.Brand>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav float-right">
    <Nav className="mr-auto">
      <NavLink className="nav-link" activeClassName="header-active" to="/sponsor"> Create Contest </NavLink>
      <NavLink className="nav-link" activeClassName="header-active" to="/contest"> Explore Contests </NavLink>
    </Nav>
    <Nav className="ml-auto mr-3">
      <NavLink className="nav-link" activeClassName="header-active" to="/drafter">Drafting Guidelines</NavLink>
      <NavLink className="nav-link" activeClassName="header-active" to="/about">About</NavLink>
      {isAuthenticated
      ?<NavLink href="#" className="nav-link" activeClassName="header-active" to="/login"onClick={() => logout()}>Logout</NavLink>
      :<NavLink className="nav-link" activeClassName="header-active" to="/login">Login</NavLink>
      }
    </Nav>
  </Navbar.Collapse>
</Navbar>
)

/**
 *  Navbar Component using {Link}
 */
function NavigationBar() {
  const { isAuthenticated } = useAuth0();

  return (
    <Navbar bg="light" shadow="lg" expand="lg">
      <Navbar.Brand href="/">
        <Image src={logo} className="custom-img" />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="navbar-nav" />
      <Navbar.Collapse>
        {isAuthenticated ? (
          <Nav className="ml-auto color-link">
            <NavDropdown title="Events" id="basic-nav-dropdown">
              <NavDropdown.Item href="/events">
                Your Events
              </NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="/events/new">
                Create New
              </NavDropdown.Item>
            </NavDropdown>
            <ProfileLink />
            <LogoutLink />
          </Nav>
        ) : (
          <Nav className="ml-auto color-link">
            <LoginLink />
            <SignupLink />
          </Nav>
        )}
      </Navbar.Collapse>
    </Navbar>
  );
}

function EditorHeader ({onSubmit}) {
  let history = useHistory();
  return (
    <Navbar bg="light" expand="lg">
      <Navbar.Collapse id="basic-navbar-nav float-right">
        <Nav className="mr-auto ml-1">
          <Nav.Link onClick={() => history.goBack()}> &laquo; Back</Nav.Link>
        </Nav>
        <Navbar.Brand>
          <Link to="/">
            <Logo />
          </Link>
        </Navbar.Brand>
        <Nav className="ml-auto mr-1">
          <Button
            variant="contained"
            color="primary"
            onClick={onSubmit}
          > 
            Save
          </Button>
        </Nav>
      </Navbar.Collapse>
    </Navbar>
  )
}

function Navigation() {
    return (
      <>
          <Navbar className='nav-container' collpseOnSelect fixed='top' expand='sm' variant='dark'>
                <Container>
                    <Navbar.Brand className='logo' href="/">CrossWoc</Navbar.Brand>
                    <Navbar.Toggle aria-controls='responsive-navbar-nav' />
                    <Navbar.Collapse id='responsive-navbar-nav' className='justify-content-end'>
                        <Nav className='navbar'>
                            <Nav.Link href='/about'>ABOUT</Nav.Link>
                            <Nav.Link href='/schedule'>SCHEDULE</Nav.Link>
                            <Nav.Link href='/project'>PROJECTS</Nav.Link>
                            <Nav.Link href='/leaderboard'>LEADERBOARD</Nav.Link>                        
                            <Nav.Link href='#sponsors'>SPONSORS</Nav.Link>                        
                            <Nav.Link href='/faq'>FAQ</Nav.Link>                        
                            <Nav.Link href='/team'>TEAM</Nav.Link>                                                   <Nav.Link href='#contact'>CONTACT</Nav.Link>                       
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar> 
         <br></br> 
         <br></br>
      </>
    )
}

render() {
        return (
            <div className="app">
                <Navbar className="navbar" bg="dark" variant="dark">
                    <Navbar.Brand href="/">Microsoft identity platform</Navbar.Brand>
                    <Nav className="mr-auto">

                    </Nav>
                    {
                        this.props.isAuthenticated ?
                            <Button variant="info" onClick={this.handleSignOut}>Logout</Button>
                            :
                            <Button variant="outline-info" onClick={this.handleSignIn}>Login</Button>
                    }
                </Navbar>
                {
                    this.props.isAuthenticated ?
                        <ProfileContainer
                            acquireToken={this.props.acquireToken}
                            updateToken={this.props.updateToken}
                        />
                        :
                        <Jumbotron className="welcome">
                            <h1>Azure AD On-Behalf-Of Flow</h1>
                            <p>A React & Redux single-page application authorizing an ASP.NET Core web API
                        to call the Microsoft Graph API on-behalf-of a user via Microsoft Graph SDK.</p>
                            <Button variant="primary"
                                onClick={() => window.open("https://docs.microsoft.com/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow", "_blank")}
                            >Learn More</Button>

                        </Jumbotron>
                }
            </div>
        );
    }

function Layout({ children }) {
  return (
    <div className='w-100 h-100 d-flex flex-column'>
      <Navbar bg="light" expand="lg">
        <Link href="/" passHref>
          <Navbar.Brand>React Simple Boilerplate</Navbar.Brand>
        </Link>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ml-auto">
            <Link href="/docs" passHref>
              <Nav.Link>Docs</Nav.Link>
            </Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <div className='flex-grow-1 position-relative'>
        <div className='w-100 h-100 position-absolute d-flex flex-column overflow-auto'>
          {children}
        </div>
      </div>
    </div>
  )
}

render() {
		return (<Navbar expand="lg" className={'header'}>
				<Navbar.Brand><img src={LogoImg} alt={'logo'} onClick={() => {
					this.props.history.push('/')
				}}/></Navbar.Brand>
				{this.props.update ?
					<Button variant={'danger'} className={'mr-3'} onClick={() => window.location.reload()}>New update
						available </Button> : null}
				{this.props.offline &&
				<span className={'mr-4'}><i className={'fas fa-exclamation-triangle mr-3'}/>Application is offline</span>}
				<Navbar.Toggle aria-controls="basic-navbar-nav"/>
				<Navbar.Collapse id="basic-navbar-nav">
					<Nav className="ml-auto">
						<div className={'info-block'}>
							<LoadingIndicator/>
							<UserInfoDropDown/>
						</div>
					</Nav>
				</Navbar.Collapse>
			</Navbar>
		)
	}

NavBar = () => {
    return (
        <Navbar bg="dark" variant="dark">
            <Navbar.Toggle />
            <Navbar.Collapse className="justify-content-center">
                <Nav>
                    <Navbar.Brand>ALGO-EASY</Navbar.Brand>
                    {/* <Nav.Link href="/">Place Start !</Nav.Link>
                    <Nav.Link href="/">Place Target !</Nav.Link>
                    <Nav.Link href="/">Place Target !</Nav.Link>
                    <Nav.Link href="/">Place Target !</Nav.Link>
                    <NavDropdown title="Path Finding Algorithms" id="basic-nav-dropdown">
                        <NavDropdown.Item href="/PathGrid/PathGrid">Dijkstra</NavDropdown.Item>
                        <NavDropdown.Item href="/">BFS</NavDropdown.Item>
                        <NavDropdown.Item href="/">DFS</NavDropdown.Item>
                        <NavDropdown.Item href="/">Greedy</NavDropdown.Item>
                        <NavDropdown.Item href="/">A*</NavDropdown.Item>
                    </NavDropdown>
                    <NavDropdown title="Sorting Algorithms" id="basic-nav-dropdown">
                        <NavDropdown.Item href="/BarSort/BarSort">Quick</NavDropdown.Item>
                        <NavDropdown.Item href="/">Merge</NavDropdown.Item>
                        <NavDropdown.Item href="/">Heap</NavDropdown.Item>
                        <NavDropdown.Item href="/">Bubble</NavDropdown.Item>
                        <NavDropdown.Item href="/">Binary</NavDropdown.Item>
                    </NavDropdown> */}
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    );
}

export function TopShotNav() {
  const [error, setError] = useState(null)
  const [accountAddress, setAccountAddress] = useState("")
  const [seriesSets, setSeriesSets] = useState(null)
  useEffect(() => {
    getTopshotOverview()
      .then((d) => {
        console.log(d)
        setSeriesSets(splitSets(d.sets))
      })
      .catch(setError)
  }, [])
  return (
    <Navbar bg="dark" variant="dark" expand="md" sticky="top">
      <Navbar.Brand href="/">
        {error ? <Red>Topshot Explorer</Red> : "Topshot Explorer"}
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/plays">Plays</Nav.Link>
          {seriesSets && Object.entries(seriesSets).map(
            ([series, sets],i) => {
              return (
                <NavDropdown key={series} title={`s${series} sets`} id="basic-nav-dropdown">
                {sets.map((s) => {
                    return (
                      <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                        {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                      </NavDropdown.Item>
                    )
                  })}
              </NavDropdown>
                  )
            }
          )
          }
          {/* <NavDropdown title="Sets" id="basic-nav-dropdown">
            {topshotOverview &&
              topshotOverview.sets.map((s) => {
                return (
                  <NavDropdown.Item key={s.id} href={"/sets/" + s.id}>
                    {s.id} {s.setName} S{s.series} {s.locked ? <Red>locked</Red> : <Green>open</Green>} 
                  </NavDropdown.Item>
                )
              })}
          </NavDropdown> */}
        </Nav>
        <Form inline>
          <FormControl
            type="text"
            placeholder="0xAccountID"
            onChange={(event) => {
              setAccountAddress(event.target.value)
            }}
            className="mr-sm-2"
          />
          <Button variant="outline-success" href={"/account/" + accountAddress}>
            Get Account
          </Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  )
}

function App() {
  return (
    <div>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Navbar.Brand href="#home">
          <span role="img" aria-label="logo">
            ?
          </span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              About
            </Nav.Link>
            <Nav.Link href="#home">Contact</Nav.Link>
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              Contribute
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Jumbotron className="text-center jumbotron">
        <Container>
          <Row>
            <Col></Col>
            <Col xs={6}>
              <h1 className="my-head">
                {/* <span
                  className="typer"
                  id="main"
                  data-words=""
                  data-delay="100"
                  data-colors="#FFFFFF,#9ac4f8"
                  data-delete-delay="1000"
                ></span>
                <span className="cursor" data-owner="main"></span> */}
                MalloCat, A LinkedIn Scraper
              </h1>
              <p className="lead ">
                MalloCat is a platform for displaying the latest Software
                Engineer job information to the new graduates. Supported by
                automatic running crawlers targeting on LinkedIn.
              </p>
              <p>
                <Button
                  className="rounded-pill"
                  variant="outline-light"
                  href="https://github.com/xtstc131/LinkedIn-Scraper"
                >
                  Github
                  <img className="btn_logo" src={github_logo} alt="" />
                </Button>
              </p>
            </Col>
            <Col></Col>
          </Row>
        </Container>
      </Jumbotron>
      <hr className="my-4"></hr>
      <div className="content">
        <Container>
          <Tabs>
            <Tab eventKey="linkedin_fulltime" title="Full-time">
              <Table source="linkedin_fulltime"></Table>
            </Tab>
            <Tab eventKey="linkedin_intern" title="Intern">
              <Table source="linkedin_intern"></Table>
            </Tab>
          </Tabs>
          <p>© 2020. All rights reserved.</p>
          <img
            src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
            alt=""
          />
        </Container>
      </div>
    </div>
  );
}

render(){
    return(
      <Navbar bg="dark" variant="dark" expand="lg" fixed="bottom" >
        <div className="date-picker-container">
          <span onClick={this.handleRefresh} className="refresh">
            <i className="fas fa-sync-alt fa-lg refresh-icon" />
          </span>
          <DatePicker
            className="date-picker"
            selected={this.state.date}
            onChange={this.handleDateChange}
            dateFormat='dd/MM/yyyy hh:mm a'
            showTimeSelect
            timeIntervals={15}
            maxDate={new Date()}
          />
        </div>
        <div className="selector-container" id="namespace-selector-container">
          <Select
            className='react-select-container'
            classNamePrefix="react-select"
            menuPlacement="top"
            options={this.state.namespaceOptions}
            placeholder="Select Namespace.."
            onChange={(e) => this.props.handleNamespaceChange(e)}
            isClearable
          />
        </div>
        <div className="selector-container" id="object-selector-container">
          <Select
            className='react-select-container'
            classNamePrefix="react-select"
            menuPlacement="top"
            options={this.state.objectKindOptions}
            placeholder="Select Objects.."
            onChange={(e) => this.props.handleKindChange(e)}
            isMulti
            defaultValue = {this.props.defaultKinds}
            theme={theme => ({
              ...theme,
              colors: {
                ...theme.colors,
                primary: theme.colors.neutral60,
                primary50: theme.colors.neutral40,
                primary25: theme.colors.neutral20
              }
            })}
            isClearable
          />
        </div>

        <InterfaceVisibilityControls showLabels={this.state.showLabels} toggleNodeLabels={this.props.toggleNodeLabels} />
      </Navbar>
    );
  }

function App() {
  return (
    <div>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Navbar.Brand href="#home">
          <span role="img" aria-label="logo">
            ?
          </span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              About
            </Nav.Link>
            <Nav.Link href="#home">Contact</Nav.Link>
            <Nav.Link href="https://github.com/xtstc131/LinkedIn-Scraper">
              Contribute
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <Jumbotron className="text-center">
        <Container>
          <Row>
            <Col></Col>
            <Col xs={6}>
              <div className="tiper-js-container">
                <h1 className="jumbotron-heading">MalloCat</h1>
                {/* <p className="lead"> */}
                <Typist avgTypingDelay={40} startDelay={2000}>
                  MalloCat is a platform for displaying the latest Software
                  Engineer job information to the new graduates. Supported by
                  automatic running crawlers targeting on LinkedIn.
                </Typist>
                {/* </p> */}
              </div>
              <p>
                <Button
                  className="rounded-pill"
                  variant="outline-dark"
                  href="https://github.com/xtstc131/LinkedIn-Scraper"
                >
                  Github
                  <img className="btn_logo" src={github_logo} alt="" />
                </Button>
              </p>
            </Col>
            <Col></Col>
          </Row>
        </Container>
      </Jumbotron>
      <Container>
        <Table source="linkedin"></Table>
        <p>© 2020. All rights reserved.</p>
        <img
          src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Flinkedin-spider.netlify.app"
          alt=""
        />
      </Container>
    </div>
  );
}

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