react-bootstrap#Navbar JavaScript Examples
The following examples show how to use
react-bootstrap#Navbar.
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: 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 #2
| 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 #3
| 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 #4
| 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 #5
| Source File: LoginControl.js From aws-workshop-colony with Apache License 2.0 | 6 votes |
|
Logout = function(props) {
let userNameStyle = {
margin: "0 10px 0 0",
};
return (
<Navbar.Form>
<Navbar.Link style={userNameStyle}>{props.userName}</Navbar.Link>
<Button onClick={props.onClick} bsStyle="success">
LOGOUT
</Button>
</Navbar.Form>
);
}
Example #6
| 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 #7
| 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 #8
| 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 #9
| 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 #10
| Source File: Header.jsx From document-layout-analysis-app with MIT License | 6 votes |
|
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>
)
}
Example #11
| 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 #12
| Source File: Navbar.js From tclone with MIT License | 6 votes |
|
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>
)
}
Example #13
| 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 #14
| 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 #15
| Source File: Nav.js From fifa with GNU General Public License v3.0 | 6 votes |
|
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>
);
}
Example #16
| 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 #17
| 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 #18
| Source File: navBar.js From xpub-tool with MIT License | 6 votes |
|
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>
</>
)
}
Example #19
| 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 #20
| 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 #21
| 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 #22
| Source File: index.js From wedding-planner with MIT License | 6 votes |
|
/**
* 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>
);
}
Example #23
| Source File: App.js From React-Messenger-App with MIT License | 5 votes |
|
render() {
// Destructuring assignment syntax is used to get the isAuthenticated function from the Authentication service in Auth.js
const { isAuthenticated } = this.props.auth;
return (
<div>
<Navbar className="no-border" fluid inverse>
<Navbar.Header>
<Navbar.Brand>
<a href="/home">ReactChat</a>
</Navbar.Brand>
</Navbar.Header>
<Nav className="pull-right">
<Button
className="btn-margin"
onClick={this.goTo.bind(this, 'home')}
>
Home
</Button>
{
!isAuthenticated() && (
<Button
className="btn-margin"
onClick={this.login.bind(this)}
>
Login
</Button>
)
}
{
isAuthenticated() && (
<Button
className="btn-margin"
onClick={this.goTo.bind(this, 'profile')}
>
Profile
</Button>
)
}
{
isAuthenticated() && (
<Button
className="btn-margin"
onClick={this.goTo.bind(this, 'chat')}
>
Chat
</Button>
)
}
{
isAuthenticated() && (
<Button
className="btn-margin"
onClick={this.logout.bind(this)}
>
Log Out
</Button>
)
}
</Nav>
</Navbar>
</div>
);
}
Example #24
| Source File: Menu.js From Anime-Tracker-Web-App with MIT License | 5 votes |
|
Menu = () => {
return (
<div>
<Container>
<Navbar className={styles.menu}>
<Navbar.Brand
className={styles.menuItem}
href="#"
onClick={(event) => {
// preventing the default behavior
event.preventDefault();
window.location = "/anime/categories";
}}
>
Genres
</Navbar.Brand>
<Navbar.Brand
className={styles.menuItem}
href="#"
onClick={(event) => {
event.preventDefault();
window.location = "/anime/season/later";
}}
>
{" "}
Upcoming Anime
</Navbar.Brand>
<Navbar.Brand
className={styles.menuItem}
href="#"
onClick={(event) => {
event.preventDefault();
window.location = "/anime/archive";
}}
>
Seasons
</Navbar.Brand>
</Navbar>
</Container>
</div>
);
}
Example #25
| Source File: Header.js From anutimetable with Creative Commons Attribution Share Alike 4.0 International | 5 votes |
|
Header = ({ API, timetableState}) => {
let {sessions, year, setYear, session, setSession, setSelectedModules, darkMode} = timetableState
const selectYear = select(year, setYear, setSelectedModules, yr => {
const s = sessions[yr]
setSession(s?.[s.length-1] || '')
})
const selectSession = select(session, setSession, setSelectedModules)
const years = useMemo(() => Object.keys(sessions).reverse(), [sessions])
const mode = darkMode ? 'dark' : 'light'
return <Navbar variant={mode} bg={mode} expand="lg" sticky="top">
<Navbar.Brand style={{ fontSize: '1.135rem' }} className="mr-0 mr-sm-2 mr-lg-3">
{/* eslint-disable-next-line react/jsx-no-target-blank */}
<a href="https://cssa.club/" target="_blank"><img
alt="CSSA logo"
src="/cssa-mono.svg"
width="28"
height="28"
style={darkMode ? {
filter: 'invert(.75)'
} : {
filter: 'invert(.25)'
}}
className="d-inline-block align-top mr-1"
/></a>
ANU Timetable
</Navbar.Brand>
<Nav className="mr-auto flex-row">
<NavDropdown title={year}>
{/* reverse() - years (numerical keys) are in ascending order per ES2015 spec */}
{years.map(k => <NavDropdown.Item key={k} onClick={selectYear}>{k}</NavDropdown.Item>)}
</NavDropdown>
<NavDropdown title={session} className="mr-0 mr-sm-2 mr-lg-3">
{sessions[year]?.map(k => <NavDropdown.Item key={k} onClick={selectSession}>{k}</NavDropdown.Item>)}
</NavDropdown>
{/* <NavDropdown title="About">
<NavDropdown.Item href="/contributors.html">
Contributors
</NavDropdown.Item>
<NavDropdown.Item href="https://forms.office.com/r/sZnsxtsh2F" target="_blank" rel="noreferrer">
Feedback
</NavDropdown.Item>
</NavDropdown> */}
</Nav>
<Navbar.Toggle className="mb-1"/>
<Navbar.Collapse>
<Toolbar API={API} timetableState={timetableState} />
</Navbar.Collapse>
</Navbar>
}
Example #26
| Source File: BootstrapNav.jsx From handoff-visualizer with MIT License | 5 votes |
|
render() {
return (
<div>
<Navbar
bg="dark"
expand="md"
variant="dark"
fixed="top"
className="navbrand"
>
<Navbar.Brand href="#home">
<img
alt=""
src="./bs.png"
width="35"
height="35"
className="d-inline-block align-top"
id="logo"
/>{" "}
Wireless Network Handoff Visualizer
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link
href="https://github.com/chonyy/handoff-visualizer/blob/master/README.md"
className="navbarlinks"
>
Docs
</Nav.Link>
<Nav.Link
href="https://github.com/chonyy/handoff-visualizer"
className="navbarlinks"
>
Source
</Nav.Link>
<Nav.Link
href="https://github.com/chonyy"
className="navbarlinks"
>
Creator
</Nav.Link>
<Nav.Link
href="https://github.com/chonyy/handoff-simulator"
className="navbarlinks"
>
Simulation
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
Example #27
| Source File: index.js From Agaave-frontend with MIT License | 5 votes |
|
function Header() {
return (
<HeaderWrapper>
<Navbar collapseOnSelect expand="lg">
<Navbar.Brand href="/">
<img src={logo} alt='Agaave App Logo' />
Agaave
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse>
<Nav>
<NavLink
to='/markets'
className="menuItem"
>
MARKETS
</NavLink>
<NavLink
to='/dashboard'
className="menuItem"
>
DASHBOARD
</NavLink>
<NavLink
to='/deposit'
className="menuItem"
>
DEPOSIT
</NavLink>
<NavLink
to='/borrow'
className="menuItem"
>
BORROW
</NavLink>
<div className="connect-btn">Connect</div>
</Nav>
</Navbar.Collapse>
</Navbar>
</HeaderWrapper>
);
}
Example #28
| Source File: App.js From stake-nucypher with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return <>
<StoreProvider>
<Router>
<Navbar expand="lg">
<Navbar.Brand href="#" className="mr-auto">
<div className="logo">
</div>
</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="/">Staking</Nav.Link>
<Nav.Link href="/worklock">Worklock</Nav.Link>
</Nav>
<div className="float-right h4 m-5">
<a href="https://github.com/cryptoseal86/stake-nucypher" target="_blank" rel="noopener noreferrer">
<FaGithub></FaGithub>
</a>
</div>
</Navbar>
<div className="App">
<Switch>
<Route exact path="/">
<div className="staker-container">
<Container>
<Tabs defaultActiveKey="stake" activeKey={this.state.key} className="tab-controls d-flex mx-auto" onSelect={this.handleSelectTab.bind(this)}>
<Tab eventKey="stake" title="Stake">
<StakerDashboard onTabChange={this.handleSelectTab.bind(this)}></StakerDashboard>
</Tab>
<Tab eventKey="withdraw" title="Withdraw">
<WithdrawDashboard></WithdrawDashboard>
</Tab>
<Tab eventKey="history" title="History">
<HistoryDashboard></HistoryDashboard>
</Tab>
</Tabs>
</Container>
</div>
</Route>
<Route path="/worklock">
<div className="staker-container">
<Container>
<WorkLockDashboard></WorkLockDashboard>
</Container>
</div>
</Route>
</Switch>
</div>
</Router>
</StoreProvider>
</>;
}
Example #29
| Source File: App.js From masakhane-web with MIT License | 5 votes |
|
function App() {
return (
<Router>
<div>
<Navbar style={{ backgroundColor: '#F2F0E9', width: '100%' }} >
<Navbar.Brand href="#home" variant="dark" style={{ fontFamily: 'lato', color: 'grey'}}>Masakhane</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav" className="justify-content-start">
<Nav className="ml-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/faq">FAQ</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Jumbotron xs={12} style={{ backgroundColor: '#F2F0E9', paddingTop: '50px', paddingBottom: '50px',backgroundSize: 'cover', backgroundSize: 'cover'}} fluid>
<Container style={{display:'flex', flexDirection:'row', alignItems:'center', justifyContent:'center'}}>
<Image src={image} className="d-none d-sm-block" width='240' height='250' roundedCircle style={{position:"absolute", left:0, right:0}}/>
<Row xs={12} md={8} style={{display:'flex', flexDirection:'column' ,justifyContent:'center', alignItems:'center'}}>
<h1 style={{ fontFamily: 'lato, sans-serif', fontWeight: 'lighter', fontSize: 80 }}>Masakhane</h1>
<p>Machine translation service for African languages</p>
</Row>
</Container>
</Jumbotron>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/faq">
<FAQPage />
</Route>
</Switch>
{/* <Container className="my-4">
<br />
<br />
<TranslateCard />
<br />
<p style={{fontSize: 12, color: 'gray'}}>This is a community research project. Read more about it <span style={{color: 'blue'}}>here</span></p>
</Container> */}
</div>
</Router>
);
}
