react-bootstrap#Nav JavaScript Examples
The following examples show how to use
react-bootstrap#Nav.
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: 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>
)
}
Example #2
| 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>
);
}
Example #3
| 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>
)
}
Example #4
| 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>
);
}
Example #5
| 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>
);
}
Example #6
| 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>
)
Example #7
| 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>
)
}
Example #8
| 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>
</>
);
}
Example #9
| 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>
)
}
Example #10
| 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>
)
Example #11
| 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>
)
Example #12
| 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>
)
}
Example #13
| 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>
);
}
Example #14
| 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>
)
Example #15
| 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>
);
}
Example #16
| 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>
);
}
Example #17
| 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>
)
}
Example #18
| 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>
);
}
Example #19
| 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>
);
}
Example #20
| 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>
);
}
Example #21
| 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>
)
}
Example #22
| 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()}> « 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>
)
}
Example #23
| 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>
</>
)
}
Example #24
| 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>
)
Example #25
| 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>
);
}
Example #26
| 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>
);
}
Example #27
| 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>
)
}
Example #28
| 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>
)
}
Example #29
| 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>
)
}
