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: 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: NavigationControl.js From aws-workshop-colony with Apache License 2.0 | 6 votes |
|
render() {
let promotionsNavItem = null;
if(this.props.auth.isLoggedIn) {
promotionsNavItem = <NavItem eventKey='/promotions'>Promotions</NavItem>;
}
return (
<Nav onSelect={this.handleSelect}>
{promotionsNavItem}
<NavItem eventKey='/about'>About</NavItem>
</Nav>
)
}
Example #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: 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 #10
| 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 #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 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 #13
| 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 #14
| 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 #15
| 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 #16
| 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 #17
| 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 #18
| 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 #19
| 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 #20
| Source File: index.js From wedding-planner with MIT License | 6 votes |
|
LoginLink = () => {
const { loginWithRedirect } = useAuth0();
return (
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="tooltip-login">Log In</Tooltip>}
>
<Nav.Link onClick={() => loginWithRedirect()}>
<FontAwesomeIcon icon={faSignInAlt} size="lg" />
</Nav.Link>
</OverlayTrigger>
);
}
Example #21
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
function ActivityCreate(props) {
const organization = useSelector((state) => state.organization);
const { teamPermission } = useSelector((state) => state.team);
const { selectedPlaylist } = useSelector((state) => state.playlist);
const { permission } = organization;
const { match } = props;
const dispatch = useDispatch();
useEffect(() => {
dispatch(loadPlaylistAction(match.params.projectId, match.params.playlistId));
}, []);
useEffect(() => {
if (Object.keys(teamPermission).length === 0 && selectedPlaylist?.project?.team?.id && organization?.currentOrganization?.id) {
dispatch(getTeamPermission(organization?.currentOrganization?.id, selectedPlaylist?.project?.team?.id));
}
}, [teamPermission, selectedPlaylist, organization?.currentOrganization?.id]);
return (
<>
<div>
<div className="content-wrapper create-activity">
<div className="content">
{/* header */}
<div className="intro-header">
<div className="title-line">
<h2>Edit Resource</h2>
<div className="line" />
</div>
<Link to={`/org/${organization.currentOrganization?.domain}/project/${match.params.projectId}`}>
<div className="back-playlist">
<FontAwesomeIcon icon="arrow-left" />
Back to Playlist
</div>
</Link>
</div>
{/* Tabs */}
{(Object.keys(teamPermission).length ? teamPermission?.Team?.includes('team:edit-activity') : permission?.Activity?.includes('activity:edit')) ? (
<Tab.Container id="left-tabs-example" defaultActiveKey="edit">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="edit">
<FontAwesomeIcon icon="edit" />
Edit Activity
</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="edit">
<ActivityWizard />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
) : <Alert variant="danger" alt="">You are not authorized to edit this activity.</Alert>}
</div>
</div>
</div>
</>
);
}
Example #22
| 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 #23
| Source File: PopUpBox.jsx From SWEethearts-2.0 with MIT License | 5 votes |
|
PopUpBox = ({ currentName, creatorName, creatorEmail, currentEmail, projectName }) => {
const [message, setMessage] = useState({
subjectText: '',
messageText: '',
});
const [show, setShow] = useState(false);
const sendData = () => {
setShow(true);
const body = {
email: currentEmail,
subject: message.subjectText,
message: message.messageText,
};
fetch('/api/sendEmail', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
};
const form = currentName ? (
currentEmail ? (
<Fragment>
<Jumbotron className="jumbo">
<h1>Let's get started on {projectName}</h1>
<hr></hr>
<h3>Contact {creatorName}!</h3>
<br></br>
<Form>
<Form.Group controlId="Subject">
<Form.Label>Subject</Form.Label>
<Form.Control
type="username"
placeholder="Re:"
onChange={(e) => setMessage({ ...message, subjectText: e.target.value })}
/>
{/* onChange={setInput} /> */}
</Form.Group>
<Form.Group controlId="Message">
<Form.Label>Message</Form.Label>
<Form.Control
as="textarea"
rows="3"
placeholder="Show off your skills here..."
onChange={(e) => setMessage({ ...message, messageText: e.target.value })}
/>
</Form.Group>
<Button onClick={() => sendData()}>Submit</Button>
</Form>
{show && (
<>
<br></br>
<Alert variant="success">Message sent!</Alert>
</>
)}
</Jumbotron>
</Fragment>
) : (
<Fragment>
<h1>Let's get started on {projectName}</h1>
<br></br>
<h3>Contact {creatorName}!</h3>
<h3> You are {currentName}</h3>
<br></br>
<h1>Please register an email with your account to access messaging features!</h1>
<Nav.Link href="/profile">Add Email Here</Nav.Link>
</Fragment>
)
) : (
<Fragment>
<h1> Please login first! </h1>
</Fragment>
);
return form;
}
Example #24
| 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 #25
| 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 #26
| 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 #27
| 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 #28
| 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>
);
}
Example #29
| Source File: index.js From Devhipster with MIT License | 5 votes |
|
render() {
return (
<Navbar
variant='dark'
expand='lg'
>
<Navbar.Brand href="/"><h3>DevHipster</h3></Navbar.Brand>
<Navbar.Toggle
aria-controls='responsive-navbar-nav'
/>
<Navbar.Collapse id='responsive-navbar-nav'>
<Nav className='mr-auto text-center'>
<Nav.Link
href='/'
>
<h4>Desafios</h4>
</Nav.Link>
<Nav.Link
href='/vagas'
>
<h4>Vagas</h4>
</Nav.Link>
<Nav.Link
href='/cursos'
>
<h4>Cursos</h4>
</Nav.Link>
<Nav.Link
href='/vlogs'
>
<h4>Vlogs</h4>
</Nav.Link>
<Nav.Link
href='/podcasts'
>
<h4>Podcasts</h4>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
