react-bootstrap Nav JavaScript Examples

Source File: notifications.js From stacker.news with MIT License

6 votes

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

Source File: Navbar.js From orca-ui with Apache License 2.0

6 votes

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

Source File: SiteNavbar.js From kiitfossosh.github.io with Creative Commons Attribution 4.0 International

6 votes

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

Source File: NavComp.js From Girscript-Community-Website with MIT License

6 votes

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

Source File: Header.js From mern_library_nginx with MIT License

6 votes

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

Source File: HeaderNav.jsx From irisql with MIT License

6 votes

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

Source File: index.js From Webiu with MIT License

6 votes

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

Source File: sidebar.js From community-forum-frontend with GNU General Public License v3.0

6 votes

Side = (props) => {
  return (
    <>                                                                                                                                                                
      <Nav
        className="col-md-12 d-none d-md-block sidebar navbarcolor"
        onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}
      >
        <div className="sidebar-sticky">
          <div>
            <Nav.Item>
              <div className="category">Discussion</div>
            </Nav.Item>
            <Nav.Item>
              <div className="category-items">
                {props.chats.length} Discussion
              </div>
              <div className="category-items">0 Documents Shared</div>
              <div className="category-items">
                {props.UserInfo.length} Users Participated
              </div>
            </Nav.Item>
          </div>
          <div>
            <Nav.Item>
              <div className="category">Users</div>
            </Nav.Item>
            <Nav.Item>
              {props.UserInfo.map((user) => {
                return <div className="category-items">{user}</div>;
              })}
            </Nav.Item>
          </div>
        </div>
      </Nav>
    </>
  );
}

Source File: form.js From stacker.news with MIT License

6 votes

export function MarkdownInput ({ label, groupClassName, ...props }) {
  const [tab, setTab] = useState('write')
  const [, meta] = useField(props)

  useEffect(() => {
    !meta.value && setTab('write')
  }, [meta.value])

  return (
    <FormGroup label={label} className={groupClassName}>
      <div className={`${styles.markdownInput} ${tab === 'write' ? styles.noTopLeftRadius : ''}`}>
        <Nav variant='tabs' defaultActiveKey='write' activeKey={tab} onSelect={tab => setTab(tab)}>
          <Nav.Item>
            <Nav.Link eventKey='write'>write</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey='preview' disabled={!meta.value}>preview</Nav.Link>
          </Nav.Item>
          <a
            className='ml-auto text-muted d-flex align-items-center'
            href='https://guides.github.com/features/mastering-markdown/' target='_blank' rel='noreferrer'
          >
            <Markdown width={18} height={18} />
          </a>
        </Nav>
        <div className={tab !== 'write' ? 'd-none' : ''}>
          <InputInner
            {...props}
          />
        </div>
        <div className={tab !== 'preview' ? 'd-none' : 'form-group'}>
          <div className={`${styles.text} form-control`}>
            {tab === 'preview' && <Text>{meta.value}</Text>}
          </div>
        </div>
      </div>
    </FormGroup>
  )
}

Source File: header.js From LearningJAMStack_microCMS_template with MIT License

6 votes

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

Source File: header.js From LearningJAMStack_Gatsby with MIT License

6 votes

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

Source File: usage-header.js From stacker.news with MIT License

6 votes

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

Source File: topheader.js From SpotifyParty with MIT License

6 votes

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

Source File: Header.js From aws-workshop-colony with Apache License 2.0

6 votes

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

Source File: NavItem.jsx From gatsby-startbootstrap-agency with MIT License

6 votes

NavItem = ({ to, onClick, children }) => {
  return (
    <Nav.Item>
      <Link
        className="nav-link cursor-pointer"
        activeClass="active"
        to={to}
        spy
        smooth="easeInOutQuart"
        onClick={onClick}
      >
        {children || to}
      </Link>
    </Nav.Item>
  );
}

Source File: index.js From wedding-planner with MIT License

6 votes

LogoutLink = () => {
  const { logout } = useAuth0();
  return (
    <OverlayTrigger
      placement="bottom"
      overlay={<Tooltip id="tooltip-logout">Sign Out</Tooltip>}
    >
      <Nav.Link
        onClick={() =>
          logout({
            returnTo: window.location.origin,
          })
        }
      >
        <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
      </Nav.Link>
    </OverlayTrigger>
  );
}

Source File: layout.js From react-simple-boilerplate with MIT License

6 votes

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

Source File: index.js From wedding-planner with MIT License

6 votes

ProfileLink = () => {
  return (
    <OverlayTrigger
      placement="bottom"
      overlay={<Tooltip id="tooltip-profile">Profile</Tooltip>}
    >
      <Nav.Link href="/profile">
        <FontAwesomeIcon icon={faUserCircle} size="lg" />
      </Nav.Link>
    </OverlayTrigger>
  );
}

Source File: NavBar.js From AlgoEz with MIT License

6 votes

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

Source File: App.js From ms-identity-javascript-react-spa-dotnetcore-webapi-obo with MIT License

6 votes

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

Source File: header.js From create-sas-app with Apache License 2.0

6 votes

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

Source File: header.js From turqV2 with GNU General Public License v3.0

6 votes

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

Source File: Navigation.js From Cross-woc with MIT License

6 votes

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

Source File: editorbanner.js From turqV2 with GNU General Public License v3.0

6 votes

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

Source File: Dashboard.jsx From ThermaKube with MIT License

5 votes

Dashboard = ({ isLoggedIn, removeAuth }) => {
  const [navOption, setNavOption] = useState([]);
  // remove cookie w/ token when users sign out and update auth value in local storage
  const signOut = () => {
    Cookies.remove('token');
    removeAuth();
  };
  useEffect(() => {
    if (isLoggedIn == 'true') {
      //if logged in, show cluster option in dashboard
      setNavOption(
        <>
          <NavDropdown title='My Cluster' className='ml-auto navLink'>
            <Nav.Link href='/cluster'>Cluster</Nav.Link>
            <Nav.Link href='/visualizer'>Visualizer</Nav.Link>
            <Nav.Link href='/alerts'>Alerts</Nav.Link>
          </NavDropdown>
          <Nav.Link href='/login' className='navLink' onClick={signOut}>
            Sign Out
          </Nav.Link>
        </>
      );
    } else {
      setNavOption(
        //login option shows only if not logged in - for now, since no logout in backend
        <Nav.Link href='/login' className='ml-auto'>
          Login
        </Nav.Link>
      );
    }
  }, [isLoggedIn]);

  return (
    <div className='topNavbar'>
      <Nav
        defaultActiveKey=''
        className='justify-content-between'
        id='navbarHome'
      >
        <Nav.Item>
          <Nav.Link href='/' className='dashLogo'>
            <img src={white} alt='Logo' className='logoHome' />
          </Nav.Link>
        </Nav.Item>
        <Nav.Link href='/#features' className='navLink'>
          Features
        </Nav.Link>
        <Nav.Link href='/#contribute' className='navLink'>
          Contribute
        </Nav.Link>
        <Nav.Link href='/#team' className='navLink'>
          Team
        </Nav.Link>
        {navOption}
      </Nav>
    </div>
  );
}

Source File: App.js From LinkedIn-Scraper with Apache License 2.0

5 votes

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

Source File: TopNav.js From katanapools with GNU General Public License v2.0

5 votes

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

Source File: Navigation.js From portfolio-react with MIT License

5 votes

// import ResumeModal from "./ResumeModal";

function Navigation() {
	const [showResumeModal, setShowResumeModal] = useState(false)

	return (
		<React.Fragment>
			<Navbar variant='dark' expand='lg' fixed='top' className='nvabar-custon'>
				<a href='/' className='navbar_logo_container'>
					<img src={PortfolioLogo} className='navbar_logo' alt='navbar_logo' />
					<span>Pranjal Jain</span>
				</a>
				<Navbar.Toggle aria-controls='basic-navbar-nav' />
				<Navbar.Collapse id='basic-navbar-nav'>
					<Nav className='mr-auto'></Nav>
					<Nav className='navbar-right'>
						<Nav.Link href='http://blog.pranjaljain.me'>
							<Button className='moving-gradient'>Blogs</Button>
						</Nav.Link>
						<Nav.Link>
							<Button
								variant='light'
								style={{
									borderRadius: '4px 0 0 4px',
									borderRight: '1px solid rgba(0,0,0,0.5)',
								}}
								onClick={() => {
									setShowResumeModal(true)
								}}>
								Curriculum Vitae (CV)
							</Button>
							<Button
								variant='light'
								href='https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf'
								style={{
									borderRadius: '0 4px 4px 0',
								}}
								aria-label='Resume'>
								<FaDownload
									aria-label='Resume'
									fill='rgba(0,0,0,0.5)'
									onClick={() =>
										(window.location =
											'https://github.com/pranjaljain0/pranjaljain0/raw/master/Pranjal_Jain_CV.pdf')
									}
								/>
							</Button>
						</Nav.Link>
						<Nav.Link
							aria-label='Github'
							href='https://github.com/pranjaljain0'>
							<FaGithub
								aria-label='Github'
								color='rgba(255,255,255,0.8)'
								size='1.5em'
							/>
						</Nav.Link>
						<Nav.Link
							aria-label='Linked In'
							href='https://www.linkedin.com/in/pranjaljain0/'>
							<FaLinkedin
								aria-label='Linked In'
								color='rgba(255,255,255,0.8)'
								size='1.5em'
							/>
						</Nav.Link>
					</Nav>
				</Navbar.Collapse>
			</Navbar>
			<ResumeModal
				showResumeModal={showResumeModal}
				closeModal={() => {
					setShowResumeModal(!showResumeModal)
				}}
			/>
		</React.Fragment>
	)
}

Source File: index.js From pooled-loan with MIT License

5 votes

export default function Header() {
    const [errorModal, setErrorModal] = useState(false);

    const handleConnectMetamask = () => {
        if (isMetamaskInstalled()) {
            initContract();
        } else {
            setErrorModal(true);
        }
    };

    const isMetamaskInstalled = () => {
        return (typeof window.ethereum !== 'undefined');
    }

    return (
        <div>
            <Navbar collapseOnSelect bg="light" variant="light">
                <Navbar.Brand href="#">
                    <Image width="120px" src={logo} />
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Nav className="mr-auto">
                    <Nav.Link href="#create-pool">Create Pool</Nav.Link>
                    <Nav.Link href="#swap-token">Swap Token</Nav.Link>
                </Nav>
                <Nav>
                    <Image
                        style={{ cursor: "pointer" }}
                        width="60px"
                        src={metamask}
                        onClick={handleConnectMetamask}
                    />
                </Nav>
            </Navbar>

            <AlertModal
                open={errorModal}
                toggle={() => setErrorModal(false)}
            >
                You can't use these features without Metamask.
                <br />
                Please install
                <Image width="50px" src={metamask}></Image>
                first !!
            </AlertModal>
        </div>
    )
}

react-bootstrap#Nav JavaScript Examples