reactstrap#NavbarBrand JavaScript Examples
The following examples show how to use
reactstrap#NavbarBrand.
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: index.js From relay_09 with MIT License | 6 votes |
|
MyNav = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar color="primary" light expand="md">
<NavbarBrand href="/" id="navItem">
<b>?하부리?</b>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="http://49.50.160.6:8080/">Chat</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>하부리란?</DropdownItem>
<DropdownItem>하부리 기능</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<NavbarText id="navItem">Latta is horse</NavbarText>
</Collapse>
</Navbar>
</div>
);
}
Example #2
| Source File: Desktop-Nav.js From Encon-fe with MIT License | 6 votes |
|
DesktopNav = ({ loggedIn }) => {
const logOut = () => {
localStorage.removeItem('AUTH_TOKEN');
};
return (
<div>
<div className='desktop-nav-container'>
<NavbarBrand href='/'>
<img className='desktop-encon-logo' src={logo} alt='Logo' />
</NavbarBrand>
<div className='desktop-nav-link-container'>
<NavLink className='desktop-nav-link' href='/'>
Home
</NavLink>
<NavLink className='desktop-nav-link' href='/'>
Help
</NavLink>
{loggedIn && localStorage.getItem('AUTH_TOKEN') !== null && (
<NavLink className='desktop-nav-link' href='/profile'>
Profile
</NavLink>
)}
{loggedIn && localStorage.getItem('AUTH_TOKEN') !== null && (
<NavLink className='desktop-nav-link' href='/' onClick={logOut}>
Logout
</NavLink>
)}
</div>
</div>
</div>
);
}
Example #3
| Source File: NavMenu.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
render() {
return (
<Navbar className="ui-header" expand="md">
<NavbarBrand className="ui-header-brand">Hexacta Labs</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<UncontrolledDropdown className="ui-header-options" nav inNavbar>
<DropdownToggle caret>
<FaUserInjured />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem
tag={() => (
<Link className="dropdown-item" to="/logout">
Salir
</Link>
)}
/>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
);
}
Example #4
| Source File: Header.js From ReactJS-Projects with MIT License | 6 votes |
|
Header = () => {
return (
<Navbar color="info" light>
<NavbarBrand tag={Link} to="/" className="text-white">LCO Contact App</NavbarBrand>
<NavbarText className="text-white float-right">
Contact app
</NavbarText>
</Navbar>
);
}
Example #5
| Source File: Header.jsx From aglomerou with GNU General Public License v3.0 | 6 votes |
|
Header = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<Navbar className={styles.header} color="light" light expand="md">
<NavbarBrand href="https://ifto-palmas.github.io/aglomerou/">
<img className={styles.image} src={logoImage} alt="Logo aglomerou"></img>
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#">Notificações</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://coronavirus.palmas.to.gov.br/">COVID-19</NavLink>
</NavItem>
</Nav>
<NavbarText>IFTO</NavbarText>
</Collapse>
</Navbar>
</div>
);
}
Example #6
| Source File: Header.js From covidAnalytics with MIT License | 5 votes |
|
Header = (props)=>{
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div className="ContainerNav">
<Navbar light expand="md" className="md-5 portalImg">
<Collapse navbar>
<Nav navbar>
<NavItem>
<NavLink href="https://www.furg.br/">
<img class="furg" src={logoFurg} alt="Logo Furg"/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="http://www.c3.furg.br/">
<img class="c3" src={logoC3} alt="Logo C3"/>
</NavLink>
</NavItem>
</Nav>
</Collapse>
<NavbarBrand className=" mx-auto logo-title">
<Link to="/" className="Headerlinks"><FontAwesomeIcon icon={faVirus} />
ITeCCorona
</Link>
</NavbarBrand>
<NavbarToggler onClick={toggle} className="mr-2"/>
<Collapse isOpen={isOpen} navbar>
<Nav className="navPortal ml-auto">
<NavItem className="portal">
<NavLink className="LinkTitle" href="http://www.riogrande.rs.gov.br/corona/">
Portal
</NavLink>
</NavItem>
<NavItem className="portal">
<NavLink className="LinkTitle" >
<Link to="/about" className="LinkTitle " >
Sobre nós
</Link>
</NavLink>
</NavItem>
<NavItem className="portal">
<NavLink className="LinkTitle" href="https://github.com/Gabriellavoura/covidAnalytics">
Github
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #7
| Source File: Header.jsx From Edlib with GNU General Public License v3.0 | 5 votes |
|
Header = () => {
const { isAuthenticated, user, loginUrl } = React.useContext(authContext);
const { authUrl, logoutRedirectUrl } = React.useContext(configContext);
const [isOpen, setIsOpen] = React.useState(false);
const toggle = () => setIsOpen(!isOpen);
const logoutUrl = `${authUrl}/logout?returnUrl=${logoutRedirectUrl}`;
return (
<div>
<Navbar color="light" light expand="md">
<NavbarBrand tag={Link} to="/">
EdLib Admin
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
{!isAuthenticated && (
<NavItem>
<NavLink href={loginUrl}>Login</NavLink>
</NavItem>
)}
{user && (
<>
<NavItem>
<NavLink tag={Link} to="/system-status">
System status
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
{user.firstName} {user.lastName}
</DropdownToggle>
<DropdownMenu right>
<DropdownItem tag="a" href={logoutUrl}>
Logg ut
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</>
)}
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #8
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
const { isOpen, isOpenToggler } = this.state
return (
<div>
<h5 className="mb-4">
<strong>Default Navbar</strong>
</h5>
<div className="mb-5">
<Navbar color="light" expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
<h5 className="mb-4">
<strong>Navbar Toggler</strong>
</h5>
<div className="mb-5">
<Navbar color="faded">
<NavbarBrand href="/" className="mr-auto">
reactstrap
</NavbarBrand>
<NavbarToggler onClick={this.toggleToggler} className="mr-2" />
<Collapse isOpen={!isOpenToggler} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
</div>
)
}
Example #9
| Source File: Layout.js From hivemind with Apache License 2.0 | 5 votes |
|
ForwardedNavbarBrand = forwardRef((props, ref) => (
<NavbarBrand href={ref} {...props} />
))
Example #10
| Source File: Navbar.jsx From portfolyo-mern with MIT License | 5 votes |
|
NavBar = (props) => {
const [isOpen, setIsOpen] = useState(false);
const H = useHistory();
const toggle = () => setIsOpen(!isOpen);
const logout = () => {
const token = localStorage.getItem("token");
localStorage.removeItem("token");
axios.get(`${Baseurl}/logout/${token}`).then((res)=>{
}).catch(()=>{
});
H.push("/");
}
return (
<div>
<Navbar
light
expand="md"
style={{
backgroundColor: "#161616",
}}
>
<NavbarBrand href="/">
<img src={portfolyo} className="navbarBrand"></img>
</NavbarBrand>
<NavbarToggler
onClick={toggle}
style={{
backgroundColor: "#ffffff",
}}
/>
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto navbarNav" navbar>
<NavItem className="mx-auto navitemNavBar">
<NavLink className="navItemNavLink" href="/#/mywebsites/">
Your Websites
</NavLink>
</NavItem>
<NavItem className="mx-auto">
<NavLink
className="navItemNavLink"
style={{
color: "#ffffff",
cursor:"pointer"
}}
onClick={logout}
>
Logout
</NavLink>
</NavItem>
{/* <UncontrolledDropdown nav inNavbar>
<DropdownToggle
nav
caret
style={{
color: "#ffffff",
}}
>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
<DropdownItem divider />
<DropdownItem>Reset</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown> */}
</Nav>
{/* <NavbarText
style={{
color: "#ffffff",
}}
>
Simple Text
</NavbarText> */}
</Collapse>
</Navbar>
</div>
);
}
Example #11
| Source File: NavbarComponent.js From master-en-code-g2 with MIT License | 5 votes |
|
NavbarComponent = ({ setShows }) => {
const [search, setSearch] = useState('');
const getShows = async () => {
if (search.length < 2) return alert('¡Llena el campo!');
const SEARCH_SHOWS = `http://api.tvmaze.com/search/shows?q=${search}`;
const { data } = await axios.get(SEARCH_SHOWS);
setShows(data);
}
return (
<div>
<Navbar color="faded" dark style={{
backgroundColor: '#9256b5',
}}>
<NavbarBrand className="mr-auto">
<Link style={{
textDecoration: 'none',
color: 'white',
display: 'flex',
alignItems: 'center',
}} to="/">
<img style={{ height: '32px', marginRight: '8px' }} src={tv} alt="DEVFlix Logo"/>
<span id="logo-text" style={{ paddingTop: '4px', fontWeight: 'bold' }}>DEVFlix</span>
</Link>
</NavbarBrand>
<input
onChange={(e) => setSearch(e.target.value)}
id="navbar-search"
style={{ width: "50%" }}
type="text"
placeholder="Buscar series" />
<button
onClick={getShows}
style={{
color: 'white',
backgroundColor: '#683d82',
}}
type="button">
Buscar
</button>
</Navbar>
</div>
);
}
Example #12
| Source File: NavBar.js From ReactJS-Projects with MIT License | 5 votes |
|
NavBar = () => {
const context = useContext(UserContext)
const [isToggled, setIsToggled] = useState(false)
const toggle = () => setIsToggled(!isToggled)
return (
<Navbar
color="danger"
light
expand="md"
>
<NavbarBrand>
<Link to="/" className='text-white'>Github Repo Search App</Link>
</NavbarBrand>
<NavbarText className='text-white'>
Welcome, {context.user?.email ? context.user?.email : ""}
</NavbarText>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isToggled} navbar>
<Nav navbar style={{ marginLeft: "auto" }}>
{
context.user ?
(
<NavItem>
<NavLink onClick={() => { context.setUser(null) }} className='text-white'>
Logout
</NavLink>
</NavItem>
) :
(
<>
<NavItem>
<NavLink tag={Link} to="/signup" className='text-white'>
Signup
</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/signin" className='text-white'>
Signin
</NavLink>
</NavItem>
</>
)
}
</Nav>
</Collapse>
</Navbar>
)
}
Example #13
| Source File: Navbar.js From Blogs with MIT License | 5 votes |
|
Menu = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
let brandName = useRef(null);
let pageLink1 = useRef(null);
let pageLink2 = useRef(null);
let pageLink3 = useRef(null);
let tl = new TimelineLite();
useEffect(() => {
tl.from(brandName, 4, { x: -500, ease: Power3.easeOut }, 0)
.from(pageLink1, 3, { x: 1000, ease: Power3.easeOut }, 0)
.from(pageLink2, 3, { x: 1100, ease: Power3.easeOut }, 0)
.from(pageLink3, 3, { x: 1200, ease: Power3.easeOut }, 0);
});
return (
<Navbar light expand="md" className="background-blue sticky-top">
<div className="container">
<NavbarBrand href="/" style={{ fontWeight: "bold", color: "#eee" }}>
<div ref={(el) => (brandName = el)}>
<img src="/img/logowhite.png" alt="" style={{ width: "30px" }} />{" "}
KJSCE CodeCell
</div>
</NavbarBrand>
<NavbarToggler onClick={toggle} style={{ background: "#666" }} />
<Collapse
isOpen={isOpen}
navbar
style={{
justifyContent: "space-between",
}}
>
<Nav className="ml-auto" navbar>
<div ref={(el) => (pageLink1 = el)}>
<NavItem className="mr-3">
<Link to="/" className="links mr-2">
<HouseFill size={20} /> Home
</Link>
</NavItem>
</div>
<div ref={(el) => (pageLink2 = el)}>
<NavItem className="mr-3">
<Link to="/blog" className="links mr-2">
<Grid1x2Fill /> All Articles
</Link>
</NavItem>
</div>
<div ref={(el) => (pageLink3 = el)}>
<NavItem>
<Link to="/about" className="links">
<CodeSlash size={20} /> About
</Link>
</NavItem>
</div>
</Nav>
</Collapse>
</div>
</Navbar>
);
}
Example #14
| Source File: Navbars.js From id.co.moonlay-eworkplace-admin-web with MIT License | 5 votes |
|
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<Navbar color="info" light expand="md">
<NavbarBrand href="/">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap" target="_blank">Github</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
{/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
{/*waiting for [email protected]*/}
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar Toggler</strong>
</CardHeader>
<CardBody>
<Navbar color="success" light>
<NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="#/components/navbars">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</CardBody>
</Card>
</div>
);
}
Example #15
| Source File: Navbars.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<section>
<Container>
{/* Navigation */}
<h2 className="mb-5">
<span>Navbars</span>
</h2>
</Container>
{/* Navbar default */}
<Navbar className="navbar-dark bg-default" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Default Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-default">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-default">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-default">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Discover
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-notification-70" />
<span className="nav-link-inner--text d-lg-none">
Profile
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-default_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar primary */}
<Navbar className="navbar-dark bg-primary mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Primary Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-primary">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-primary">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-primary">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Discover <span className="sr-only">(current)</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Profile
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>Settings</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-primary_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar success */}
<Navbar className="navbar-dark bg-success mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Success Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-success">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-success">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-success">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Favorites
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-planet" />
<span className="nav-link-inner--text d-lg-none">
Another action
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="navbar-success_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar danger */}
<Navbar className="navbar-dark bg-danger mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Danger Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-danger">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-danger">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-danger">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Facebook
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Twitter
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-google-plus" />
<span className="nav-link-inner--text d-lg-none">
Google +
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none">
Instagram
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar warning */}
<Navbar className="navbar-dark bg-warning mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Warning Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-warning">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-warning">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-warning">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none">
Share
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter" />
<span className="nav-link-inner--text d-lg-none">
Tweet
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-pinterest" />
<span className="nav-link-inner--text d-lg-none">
Pin
</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
{/* Navbar info */}
<Navbar className="navbar-dark bg-info mt-4" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Info Color
</NavbarBrand>
<button className="navbar-toggler" id="navbar-info">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-info">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar-info">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-facebook-square mr-1" />
<span className="nav-link-inner--text">Facebook</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-twitter mr-1" />
<span className="nav-link-inner--text">Twitter</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="fa fa-instagram mr-1" />
<span className="nav-link-inner--text">Instagram</span>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</section>
</>
);
}
Example #16
| Source File: Sidebar.js From covidsos with MIT License | 4 votes |
|
render() {
const {logo} = this.props;
let navbarBrandProps;
if (logo && logo.innerLink) {
navbarBrandProps = {
to: logo.innerLink,
tag: Link
};
} else if (logo && logo.outterLink) {
navbarBrandProps = {
href: logo.outterLink,
target: "_blank"
};
}
const isAuthorisedUser = isAuthorisedUserLoggedIn();
return (
<Navbar
className="navbar-vertical fixed-left navbar-light bg-custom-navbar"
expand="md"
id="sidenav-main"
>
<Container fluid>
{/* Toggler */}
<button
className="navbar-toggler"
type="button"
onClick={this.toggleCollapse}
>
<span className="fas fa-bars text-white"/>
</button>
{/* Brand */}
{logo ? (
<NavbarBrand className="pt-0 ml-3" {...navbarBrandProps}>
<img
alt={logo.imgAlt}
className="navbar-brand-img"
src={logo.imgSrc}
/>
</NavbarBrand>
) : null}
<Row> {/* className="d-inline-flex" */}
<Col className="mr-3">
<Nav className="align-items-center d-md-none" navbar>
<Media className="align-items-center">
{/*<NavItem className="no-list-style mr--5">*/}
<NavLink href="/how-it-works" title="How it works?" className="px-0">
<span className="avatar avatar-sm bg-red">
<i className="fas fa-info text-white text-lg rounded-circle"/>
</span>
</NavLink>
</Media>{/* User */}
</Nav>
</Col>
<Col>
<UserDropDown className="align-items-center d-md-none"/>
</Col>
</Row>
{/* Collapse */}
<Collapse navbar isOpen={this.state.collapseOpen}>
{/* Collapse header */}
<div className="navbar-collapse-header d-md-none">
<Row>
{logo ? (
<Col className="collapse-brand" xs="6">
{logo.innerLink ? (
<Link to={logo.innerLink}>
<img alt={logo.imgAlt} src={logo.imgSrc}/>
</Link>
) : (
<a href={logo.outterLink}>
<img alt={logo.imgAlt} src={logo.imgSrc}/>
</a>
)}
</Col>
) : null}
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
type="button"
onClick={this.toggleCollapse}
>
<span/>
<span/>
</button>
</Col>
</Row>
</div>
{/* Navigation */}
<Nav navbar>
{this.getNavLink('tables', 'text-indigo')}
{isAuthorisedUser && this.getCustomNavLink('newRequests', 'New Requests',
'/requests/new', 'fas fa-clipboard text-orange')}
{this.getNavLink('pendingRequests', 'text-yellow')}
{isAuthorisedUser && this.getCustomNavLink('inProgressRequests', 'In Progress Requests',
'/requests/in-progress', 'fas fa-clipboard-list')}
{this.getCustomNavLink('completedRequests', 'Completed Requests',
'/requests/completed', 'fas fa-clipboard-check text-green')}
{this.getNavLink('viewOnMap', 'text-red')}
{this.getNavLink('about', 'text-blue')}
{this.getNavLink('ourPartners', 'text-green')}
{this.getNavLink('usefulLinks', 'text-teal')}
{this.getNavLink('contactUs', 'text-green')}
</Nav>
{/* Divider */}
<hr className="my-3"/>
<div className="mb-0 mt-auto">
<p className="font-italic">Only a life lived for others is a life worthwhile</p>
<p className="font-italic float-md-right">- Albert Einstein</p>
</div>
</Collapse>
</Container>
</Navbar>
);
}
Example #17
| Source File: HeaderView.js From study-chain with MIT License | 4 votes |
|
render() {
const { mode, classes } = this.props;
const { hostname, port } = window.location;
const webSocketProtocol =
window.location.protocol === 'https:' ? 'wss' : 'ws';
const webSocketUrl = `${webSocketProtocol}://${hostname}:${port}/`;
const dark = mode === 'dark';
const {
isLoading,
selectedChannel,
channels,
notifyCount,
notifyDrawer,
adminDrawer,
modalOpen,
notifications
} = this.state;
const links = [
{ to: '/', label: 'DASHBOARD', exact: true },
{ to: '/network', label: 'NETWORK' },
{ to: '/blocks', label: 'BLOCKS' },
{ to: '/transactions', label: 'TRANSACTIONS' },
{ to: '/chaincodes', label: 'CHAINCODES' },
{ to: '/channels', label: 'CHANNELS' }
];
return (
<div>
{/* production */}
{/* development */}
<Websocket
url={webSocketUrl}
onMessage={this.handleData.bind(this)}
reconnect
/>
<Router>
<div>
<Navbar className={classes.navbarHeader} expand="lg" fixed="top">
<NavbarBrand href="/">
{' '}
<img
src={Logo}
className={classes.logo}
alt="Hyperledger Logo"
/>
</NavbarBrand>
<NavbarToggler onClick={this.toggle}>
<FontAwesome name="bars" className={classes.toggleIcon} />
</NavbarToggler>
<Collapse isOpen={this.state.isOpen} navbar>
<Nav
className="ml-auto navbar-left"
navbar
onMouseLeave={this.closeToggle}
>
{links.map(({ to, label, ...props }) => (
<li key={to}>
<NavLink
to={to}
className={classes.tab}
activeClassName={classes.activeTab}
onClick={this.toggle}
{...props}
>
{label}
</NavLink>
</li>
))}
<div className={classes.adminButton}>
<Select
className={classes.channel}
placeholder="Select Channel..."
required
name="form-field-name"
isLoading={isLoading}
value={selectedChannel}
onChange={this.handleChange}
onFocus={this.reloadChannels.bind(this)}
options={channels}
/>
</div>
{
<div className={classes.adminButton}>
<FontAwesome
name="bell"
data-command="bell"
className={classes.bell}
onClick={() => this.handleDrawOpen('notifyDrawer')}
/>
<Badge badgeContent={notifyCount} color="primary" />
</div>
}
{/*
//Use when Admin functionality is required
<div className={classes.adminButton}>
<FontAwesome
name='cog'
className='cog'
onClick={() => this.handleDrawOpen('adminDrawer')}
/>
</div> */}
<div
className={`${classes.adminButton} ${classes.themeSwitch}`}
>
<FontAwesome name="sun-o" className={classes.sunIcon} />
<Switch
onChange={() => this.handleThemeChange(mode)}
checked={dark}
/>
<FontAwesome name="moon-o" className={classes.moonIcon} />
</div>
</Nav>
</Collapse>
</Navbar>
<Drawer
anchor="right"
open={notifyDrawer}
onClose={() => this.handleDrawClose('notifyDrawer')}
>
<div tabIndex={0} role="button">
<NotificationsPanel notifications={notifications} />
</div>
</Drawer>
<Drawer
anchor="right"
open={adminDrawer}
onClose={() => this.handleDrawClose('adminDrawer')}
>
<div tabIndex={0} role="button">
<AdminPanel />
</div>
</Drawer>
<Dialog
open={modalOpen}
onClose={this.handleClose}
fullWidth={false}
maxWidth="md"
>
<div className={classes.channelLoader}>
<h4>Loading Channel Details</h4>
<Loader
type="ThreeDots"
color="#005069"
height={70}
width={70}
className={classes.loader}
/>
</div>
</Dialog>
</div>
</Router>
</div>
);
}
Example #18
| Source File: DemoNavbar.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand className="mr-lg-5" to="/" tag={Link}>
<img
alt="..."
src={require("../../assets//img/brand/argon-react-white.png")}
/>
</NavbarBrand>
<button className="navbar-toggler" id="navbar_global">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar_global">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("../../assets//img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar_global">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="navbar-nav-hover align-items-lg-center" navbar>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-ui-04 d-lg-none mr-1" />
<span className="nav-link-inner--text">Components</span>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-xl">
<div className="dropdown-menu-inner">
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/overview?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
<i className="ni ni-spaceship" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Getting started
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn how to use Argon compiling Scss, change
brand colors and more.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/colors?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-palette" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Foundation
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn more about colors, typography, icons and the
grid system we used for Argon.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alert?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-ui-04" />
</div>
<Media body className="ml-3">
<h5 className="heading text-warning mb-md-1">
Components
</h5>
<p className="description d-none d-md-inline-block mb-0">
Browse our 50 beautiful handcrafted components
offered in the Free version.
</p>
</Media>
</Media>
</div>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-collection d-lg-none mr-1" />
<span className="nav-link-inner--text">Examples</span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/" tag={Link}>
Landing
</DropdownItem>
<DropdownItem to="/profile" tag={Link}>
Profile
</DropdownItem>
<DropdownItem to="/login" tag={Link}>
Login
</DropdownItem>
<DropdownItem to="/addpost" tag={Link}>
Add Post
</DropdownItem>
<DropdownItem to="/posts" tag={Link}>
List Posts
</DropdownItem>
<DropdownItem to="/register" tag={Link}>
Register
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.facebook.com/creativetim"
id="tooltip333589074"
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip333589074">
Like us on Facebook
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.instagram.com/creativetimofficial"
id="tooltip356693867"
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip356693867">
Follow us on Instagram
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://twitter.com/creativetim"
id="tooltip184698705"
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip184698705">
Follow us on Twitter
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://github.com/creativetimofficial/argon-design-system-react"
id="tooltip112445449"
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip112445449">
Star us on Github
</UncontrolledTooltip>
</NavItem>
<NavItem className="d-none d-lg-block ml-lg-4">
<Button
className="btn-neutral btn-icon"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-navbar"
target="_blank"
>
<span className="btn-inner--icon">
<i className="fa fa-cloud-download mr-2" />
</span>
<span className="nav-link-inner--text ml-1">
Download
</span>
</Button>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #19
| Source File: Menus.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<Row className="justify-content-center mt-md">
<Col lg="12">
{/* Menu */}
<h3 className="h4 text-success font-weight-bold mb-4">Menu</h3>
<Row>
<Col lg="6">
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With text
</small>
</div>
<Navbar className="navbar-dark bg-primary rounded" expand="lg">
<Container>
<NavbarBrand
href="#pablo"
onClick={e => e.preventDefault()}
>
Menu
</NavbarBrand>
<button className="navbar-toggler" id="nav-inner-primary">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#nav-inner-primary">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="nav-inner-primary"
type="button"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Discover <span className="sr-only">(current)</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="#pablo"
onClick={e => e.preventDefault()}
>
Profile
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>Settings</DropdownToggle>
<DropdownMenu
aria-labelledby="nav-inner-primary_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</Col>
<Col className="mt-4 mt-lg-0" lg="6">
<div className="mb-3">
<small className="text-uppercase font-weight-bold">
With icons
</small>
</div>
<Navbar className="navbar-dark bg-success rounded" expand="lg">
<Container>
<NavbarBrand
href="#pablo"
onClick={e => e.preventDefault()}
>
Menu
</NavbarBrand>
<button className="navbar-toggler" id="nav-inner-success">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#nav-inner-success">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("assets/img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="nav-inner-success"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-favourite-28" />
<span className="nav-link-inner--text d-lg-none">
Discover
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="#pablo"
onClick={e => e.preventDefault()}
>
<i className="ni ni-notification-70" />
<span className="nav-link-inner--text d-lg-none">
Profile
</span>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav className="nav-link-icon">
<i className="ni ni-settings-gear-65" />
<span className="nav-link-inner--text d-lg-none">
Settings
</span>
</DropdownToggle>
<DropdownMenu
aria-labelledby="nav-inner-success_dropdown_1"
right
>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</Col>
</Row>
</Col>
</Row>
</>
);
}
Example #20
| Source File: Navigation.jsx From developer-portfolio with Apache License 2.0 | 4 votes |
|
Navigation = () => {
const [collapseClasses, setCollapseClasses] = useState("");
const onExiting = () => setCollapseClasses("collapsing-out");
const onExited = () => setCollapseClasses("");
useEffect(() => {
let headroom = new Headroom(document.getElementById("navbar-main"));
// initialise
headroom.init();
});
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand href="/" className="mr-lg-5">
<h2 className="text-white" id="nav-title">
{greetings.name}
</h2>
</NavbarBrand>
<button
className="navbar-toggler"
aria-label="navbar_toggle"
id="navbar_global"
>
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse
toggler="#navbar_global"
navbar
className={collapseClasses}
onExiting={onExiting}
onExited={onExited}
>
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<h3
className="text-black"
id="nav-title"
>
{greetings.name}
</h3>
</Col>
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
id="navbar_global"
>
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav
className="align-items-lg-center ml-lg-auto"
navbar
>
{socialLinks.facebook && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Facebook"
className="nav-link-icon"
href={socialLinks.facebook}
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
</NavItem>
)}
{socialLinks.instagram && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Instagram"
className="nav-link-icon"
href={socialLinks.instagram}
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
</NavItem>
)}
{socialLinks.github && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Github"
className="nav-link-icon"
href={socialLinks.github}
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
</NavItem>
)}
{socialLinks.linkedin && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Linkedin"
className="nav-link-icon"
href={socialLinks.linkedin}
target="_blank"
>
<i className="fa fa-linkedin" />
<span className="nav-link-inner--text d-lg-none ml-2">
Linkedin
</span>
</NavLink>
</NavItem>
)}
{socialLinks.twitter && (
<NavItem>
<NavLink
rel="noopener"
aria-label="Twitter"
className="nav-link-icon"
href={socialLinks.twitter}
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
</NavItem>
)}
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
Example #21
| Source File: index.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let {
headerBackgroundColor,
enableMobileMenuSmall,
enableHeaderShadow
} = this.props;
return (
<Fragment>
<NewAuctionAssembler
isOpen={this.state.auctionModal}
close={() => this.setState({auctionModal: !this.state.auctionModal})}
assemblerModal={this.toggleAssemblerModal}
/>
<SendModal
isOpen={this.state.assemblerModal}
close={this.toggleAssemblerModal}
bidAmount={this.state.bidAmount}
isAuction={this.state.isAuction}
bidAddress={this.state.bidAddress}
currency={this.state.currency}
/>
<Refund
isOpen={this.state.refund}
close={() => this.setState({refund: false})}
/>
<NewArtwork
sendModal={this.toggleAssemblerModal}
isOpen={this.state.newArtworkModal}
close={() => this.setState({newArtworkModal: !this.state.newArtworkModal})}/>
<div id='myHeader' style={{zIndex: '10'}}>
<ReactCSSTransitionGroup
component="div"
className={cx("app-header", false, {'header-shadow': true})}
transitionName="HeaderAnimation"
transitionAppear={true}
transitionAppearTimeout={150}
transitionEnter={false}
transitionLeave={false}>
<Navbar color="white" light expand="md">
<NavbarBrand href="/">
<img
style={{height: '40px'}}
src={nodeWallet}
/>
</NavbarBrand>
<NavbarToggler onClick={() => this.setState({isOpen: !this.state.isOpen})}/>
<Collapse isOpen={this.state.isOpen} navbar>
<Col md='9'>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#/auction/active?type=all"
active={window.location.href.includes("#/auction/active")}>Active
Auctions</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/auction/history"
active={window.location.href.includes("#/auction/history")}
>Past Auctions</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/owned"
active={window.location.href.includes("#/owned")}
>Owned Artworks</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => this.setState({refund: true})}>
Refund
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/faq"
active={window.location.href.includes("#/faq")}
>
FAQ
</NavLink>
</NavItem>
{/*<div className="search-container">*/}
<div className="search-box">
<form className="d-flex justify-content-between align-items-center"
onSubmit={(e) => {
e.preventDefault();
this.updateParams('searchValue', this.state.searchValue)
}}>
{/*< className="">*/}
<input
placeholder="Search in name, description and addresses"
value={this.state.searchValue}
onChange={(e) => {
this.setState({searchValue: e.target.value})
}}
/>
<button className="search-icon-container" type="submit">
{/*<i className="lnr lnr-magnifier search-icon"/>*/}
<span className="lnr lnr-magnifier font-size-lg"/>
</button>
</form>
</div>
{/*</div>*/}
</Nav>
</Col>
<Col md='3'>
<div className='float-right'>
<Row>
<UncontrolledButtonDropdown>
<DropdownToggle outline className="border-0 mr-2 font-size-lg"
color="none">
<span className="notificationIcon pe-7s-plus font-weight-bold"/>
</DropdownToggle>
<DropdownMenu>
<DropdownItem
onClick={() => {
this.openAuction()
}}>New Auction</DropdownItem>
<DropdownItem
onClick={() => this.openArtwork()}>Create Artwork</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
<WalletModal/>
</Row>
</div>
</Col>
</Collapse>
</Navbar>
</ReactCSSTransitionGroup>
</div>
</Fragment>
);
}
Example #22
| Source File: navbar.component.js From hiring-system with GNU General Public License v3.0 | 4 votes |
|
NavbarComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const { isAuthenticated, user, loginWithRedirect, logout } = useAuth0();
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
const openNav = () => {
console.log("clicked");
setIsOpen(!isOpen);
};
return (
<Navbar light expand="md">
<NavbarBrand href="/">
<img src={logo} width="30" height="30" alt="" />
<span className="ml-2 title">Hiring Job System</span>
</NavbarBrand>
<NavbarToggler onClick={openNav} />
<Collapse isOpen={isOpen} navbar>
<Nav navbar className="navbar-nav w-100 d-flex justify-content-end">
<NavItem>
<NavLink href="https://github.com/GitCodeCareer/hacktoberfest--hiring-system">
<FontAwesomeIcon icon={["fab", "github"]} />
</NavLink>
</NavItem>
{isAuthenticated || (
<>
<NavItem>
<NavLink>
<button
onClick={loginWithRedirect}
className="btn btn-signin p-0 text-primary"
>
Sign in
</button>
</NavLink>
</NavItem>
</>
)}
{isAuthenticated && (
<Media className="d-flex align-items-center">
<Media left href="#">
<Media
object
width="20px"
src={user.picture}
alt={user.name}
className="rounded-circle mr-2"
/>
</Media>
<Media body>
<Media heading className="h6 mb-0 mr-1">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret className="btn-signin">
{user.name}
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Admin</DropdownItem>
<DropdownItem>
<Link to="/admin">Admin page</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem header>Jobs</DropdownItem>
<DropdownItem>
<Link to="/hire/new">Create Jobs</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem
onClick={() =>
logout({ returnTo: window.location.origin })
}
>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
</Media>
{/* {user.email} */}
</Media>
</Media>
)}
</Nav>
</Collapse>
</Navbar>
);
}
Example #23
| Source File: Navbar.js From Frontend with Apache License 2.0 | 4 votes |
|
IndexNavbar = (props) => {
const [isOpen, setIsOpen] = useState(false)
const toggle = () => setIsOpen(!isOpen)
const deleteCred = () => {
localStorage.removeItem('creds')
window.location.assign('/')
}
var prevScrollpos = window.pageYOffset
window.onscroll = function () {
var currentScrollPos = window.pageYOffset
if (prevScrollpos > currentScrollPos) {
document.getElementById('navbar').style.top = '0'
} else {
document.getElementById('navbar').style.top = '-70px'
}
prevScrollpos = currentScrollPos
}
const creds = JSON.parse(localStorage.getItem('creds'))
const [uu, setuu] = useState()
// console.log(uu);
const handle = '/profile/' + uu
useEffect(() => {
if (creds) {
setuu(creds.username)
}
}, [])
if (creds) {
return (
<div>
<Navbar
id="navbar"
color="dark"
light
expand="md"
style={{ background: 'transparent !important', paddingRight: '3% ' }}
>
<NavbarBrand href="/" light>
<img src={logo1} id="BrandLogo" />
CODEDIGGER
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem style={{ color: 'white' }}>
<NavLink style={{ color: 'white' }} href="/problems">
Problems
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Practice
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/topicwise/practice"
>
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
className="dropdown_link"
href="/levelwise/practice"
>
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Ladders
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink className="dropdown_link" href="/topicwise/ladder">
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/levelwise/ladder">
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem style={{ color: 'white' }}>
<NavLink style={{ color: 'white' }} href="/contest">
Contests
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Upsolve
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/upsolve/codeforces"
>
Codeforces
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/codechef">
Codechef
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/atcoder">
Atcoder
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
{/* <NavItem>
<NavLink href="/profile">Hello, {creds.username}</NavLink>
</NavItem> */}
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Hello, {creds.username}
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink className="dropdown_link" href={handle}>
Profile
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/updateProfile">
Edit Profile
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
className="dropdown_link"
href={`/change_password_request`}
>
Edit Password
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href={`/list/${uu}`}>
Problem Lists
</NavLink>
</DropdownItem>
<DropdownItem>
<NavItem>
<NavLink className="dropdown_link" onClick={deleteCred}>
Log Out
</NavLink>
</NavItem>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</div>
)
} else
return (
<div>
<Navbar
id="navbar"
color="dark"
light
expand="md"
style={{
background: 'transparent !important',
paddingLeft: '3%',
paddingRight: '4% ',
}}
>
<NavbarBrand href="/" light>
<img src={logo1} id="BrandLogo" />
CODEDIGGER
</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem style={{ color: 'white' }}>
<NavLink style={{ color: 'white' }} href="/problems">
Problems
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Practice
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/topicwise/practice"
>
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
className="dropdown_link"
href="/levelwise/practice"
>
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Ladders
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink className="dropdown_link" href="/topicwise/ladder">
Topicwise
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/levelwise/ladder">
Levelwise
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret style={{ color: 'white' }}>
Upsolve
</DropdownToggle>
<DropdownMenu left className="dropdown_background">
<DropdownItem>
<NavLink
className="dropdown_link"
href="/upsolve/codeforces"
>
Codeforces
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/codechef">
Codechef
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink className="dropdown_link" href="/upsolve/atcoder">
Atcoder
</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
{/* <NavItem>
<NavLink href="/profile">Hello, {creds.username}</NavLink>
</NavItem> */}
<NavItem>
<NavLink style={{ color: 'white' }} href="/login">
Login/Register
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
{/* <br/>
<br/>
<br/> */}
</div>
)
}
Example #24
| Source File: SectionNavigation.js From Website2020 with MIT License | 4 votes |
|
// core components
function SectionNavigation() {
return (
<>
<div className="section section-navigation">
<Container className="tim-container">
<div className="title">
<h3>Navigation Areas</h3>
</div>
</Container>
<div id="navbar">
<div
className="navigation-example"
style={{
backgroundImage:
"url(" + require("assets/img/ilya-yakover.jpg") + ")"
}}
>
<Navbar className="bg-primary" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Primary Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right burger-menu"
data-target="#navbar-primary"
data-toggle="collapse"
id="navbar-primary"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-primary">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-compass-05"
/>
Discover
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-single-02"
/>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-settings-gear-65"
/>
Settings
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-info" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Info Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-info"
data-toggle="collapse"
id="navbar-info"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-info">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Discover
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Settings
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-success" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Success Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={true}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-success"
data-toggle="collapse"
id="navbar-success"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse
navbar
style={{}}
toggler="#navbar-success"
>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-compass-05"
/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-single-02"
/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-settings-gear-65"
/>
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-warning" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Warning Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-warning"
data-toggle="collapse"
id="navbar-warning"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-warning">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="fa fa-facebook-official"
/>
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-twitter" />
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-google-plus" />
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-instagram" />
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="bg-danger" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Danger Color
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={true}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-danger"
data-toggle="collapse"
id="navbar-danger"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse
navbar
style={{}}
toggler="#navbar-danger"
>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="fa fa-facebook-official"
/>
Share
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-twitter" />
Tweet
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-pinterest" />
Pin
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
<Navbar className="navbar-transparent pt-0" expand="lg">
<Container>
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Transparent
</NavbarBrand>
<button
aria-controls="navbarNav"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-transparent"
data-toggle="collapse"
id="navbar-transparent"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-transparent">
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="fa fa-facebook-official"
/>
Facebook
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-twitter" />
Twitter
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="fa fa-instagram" />
Instagram
</NavLink>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</div>
</div>
</div>{" "}
</>
);
}
Example #25
| Source File: SectionNavbars.js From Website2020 with MIT License | 4 votes |
|
function SectionNavbars() {
return (
<>
<div className="section section-navbars">
<Container id="menu-dropdown">
<div className="title">
<h3>Menu</h3>
</div>
<br />
<Row>
<Col md="6">
<Navbar className="bg-primary" expand="lg">
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Menu
</NavbarBrand>
<button
aria-controls="navbarSupportedContent"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-menu"
data-toggle="collapse"
id="navbar-menu"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-menu">
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Link
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
Link
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="default"
data-toggle="dropdown"
href="#pablo"
id="dropdownMenuButton"
nav
onClick={e => e.preventDefault()}
role="button"
>
Dropdown
</DropdownToggle>
<DropdownMenu
aria-labelledby="dropdownMenuButton"
className="dropdown-info"
>
<DropdownItem header tag="span">
Dropdown header
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Separated link
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another separated link
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Navbar>
</Col>
<Col md="6">
<Navbar className="bg-danger" expand="lg">
<NavbarBrand href="#pablo" onClick={e => e.preventDefault()}>
Icons
</NavbarBrand>
<button
aria-controls="navbarSupportedContent"
aria-expanded={false}
aria-label="Toggle navigation"
className="navbar-toggler navbar-toggler-right"
data-target="#navbar-menu-icon"
data-toggle="collapse"
id="navbar-menu-icon"
type="button"
>
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
<span className="navbar-toggler-bar" />
</button>
<UncontrolledCollapse navbar toggler="#navbar-menu-icon">
<Nav className="ml-auto" navbar>
<NavItem className="active">
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i aria-hidden={true} className="nc-icon nc-email-85" />
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#pablo" onClick={e => e.preventDefault()}>
<i
aria-hidden={true}
className="nc-icon nc-single-02"
/>
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="default"
data-toggle="dropdown"
href="#pablo"
nav
onClick={e => e.preventDefault()}
role="button"
>
<i
aria-hidden={true}
className="nc-icon nc-settings-gear-65"
/>
</DropdownToggle>
<DropdownMenu className="dropdown-danger" right>
<DropdownItem header tag="span">
Dropdown header
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Something else here
</DropdownItem>
<DropdownItem divider />
<DropdownItem
href="#pablo"
onClick={e => e.preventDefault()}
>
Separated link
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</UncontrolledCollapse>
</Navbar>
</Col>
</Row>
</Container>
</div>
</>
);
}
Example #26
| Source File: IndexNavbarOriginal.js From Website2020 with MIT License | 4 votes |
|
function IndexNavbar() {
const [navbarColor, setNavbarColor] = React.useState("navbar-transparent");
const [navbarCollapse, setNavbarCollapse] = React.useState(false);
const toggleNavbarCollapse = () => {
setNavbarCollapse(!navbarCollapse);
document.documentElement.classList.toggle("nav-open");
};
React.useEffect(() => {
const updateNavbarColor = () => {
if (
document.documentElement.scrollTop > 299 ||
document.body.scrollTop > 299
) {
setNavbarColor("");
} else if (
document.documentElement.scrollTop < 300 ||
document.body.scrollTop < 300
) {
setNavbarColor("navbar-transparent");
}
};
window.addEventListener("scroll", updateNavbarColor);
return function cleanup() {
window.removeEventListener("scroll", updateNavbarColor);
};
});
return (
<Navbar className={classnames("fixed-top", navbarColor)} expand="lg">
<Container>
<div className="navbar-translate">
<NavbarBrand
data-placement="bottom"
href="/index"
target="_blank"
title="Coded by Creative Tim"
>
Paper Kit React
</NavbarBrand>
<button
aria-expanded={navbarCollapse}
className={classnames("navbar-toggler navbar-toggler", {
toggled: navbarCollapse,
})}
onClick={toggleNavbarCollapse}
>
<span className="navbar-toggler-bar bar1" />
<span className="navbar-toggler-bar bar2" />
<span className="navbar-toggler-bar bar3" />
</button>
</div>
<Collapse
className="justify-content-end"
navbar
isOpen={navbarCollapse}
>
<Nav navbar>
<NavItem>
<NavLink
data-placement="bottom"
href="https://twitter.com/CreativeTim?ref=creativetim"
target="_blank"
title="Follow us on Twitter"
>
<i className="fa fa-twitter" />
<p className="d-lg-none">Twitter</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.facebook.com/CreativeTim?ref=creativetim"
target="_blank"
title="Like us on Facebook"
>
<i className="fa fa-facebook-square" />
<p className="d-lg-none">Facebook</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.instagram.com/CreativeTimOfficial?ref=creativetim"
target="_blank"
title="Follow us on Instagram"
>
<i className="fa fa-instagram" />
<p className="d-lg-none">Instagram</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.github.com/CreativeTimOfficial/paper-kit-react?ref=creativetim"
target="_blank"
title="Star on GitHub"
>
<i className="fa fa-github" />
<p className="d-lg-none">GitHub</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="https://demos.creative-tim.com/paper-kit-react/#/documentation?ref=pkr-index-navbar"
target="_blank"
>
<i className="nc-icon nc-book-bookmark" /> Documentation
</NavLink>
</NavItem>
<NavItem>
<Button
className="btn-round"
color="danger"
href="#pablo"
target="_blank"
disabled
>
Upgrade to Pro
</Button>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
);
}
Example #27
| Source File: IndexNavbar.js From Website2020 with MIT License | 4 votes |
|
function IndexNavbar() {
const [navbarColor, setNavbarColor] = React.useState("navbar-transparent");
const [navbarCollapse, setNavbarCollapse] = React.useState(false);
const toggleNavbarCollapse = () => {
setNavbarCollapse(!navbarCollapse);
document.documentElement.classList.toggle("nav-open");
};
React.useEffect(() => {
const updateNavbarColor = () => {
if (
document.documentElement.scrollTop > 299 ||
document.body.scrollTop > 299
) {
setNavbarColor("");
} else if (
document.documentElement.scrollTop < 300 ||
document.body.scrollTop < 300
) {
setNavbarColor("navbar-transparent");
}
};
window.addEventListener("scroll", updateNavbarColor);
return function cleanup() {
window.removeEventListener("scroll", updateNavbarColor);
};
});
return (
<Navbar className={classnames("fixed-top", navbarColor)} expand="lg">
<Container>
<div className="navbar-translate">
<NavbarBrand
data-placement="bottom"
href="/index"
target="_blank"
title="Coded by Creative Tim"
>
Paper Kit React
</NavbarBrand>
<button
aria-expanded={navbarCollapse}
className={classnames("navbar-toggler navbar-toggler", {
toggled: navbarCollapse
})}
onClick={toggleNavbarCollapse}
>
<span className="navbar-toggler-bar bar1" />
<span className="navbar-toggler-bar bar2" />
<span className="navbar-toggler-bar bar3" />
</button>
</div>
<Collapse
className="justify-content-end"
navbar
isOpen={navbarCollapse}
>
<Nav navbar>
<NavItem>
<NavLink
data-placement="bottom"
href="https://twitter.com/CreativeTim?ref=creativetim"
target="_blank"
title="Follow us on Twitter"
>
<i className="fa fa-twitter" />
<p className="d-lg-none">Twitter</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.facebook.com/CreativeTim?ref=creativetim"
target="_blank"
title="Like us on Facebook"
>
<i className="fa fa-facebook-square" />
<p className="d-lg-none">Facebook</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.instagram.com/CreativeTimOfficial?ref=creativetim"
target="_blank"
title="Follow us on Instagram"
>
<i className="fa fa-instagram" />
<p className="d-lg-none">Instagram</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.github.com/CreativeTimOfficial/paper-kit-react?ref=creativetim"
target="_blank"
title="Star on GitHub"
>
<i className="fa fa-github" />
<p className="d-lg-none">GitHub</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="https://demos.creative-tim.com/paper-kit-react/#/documentation?ref=pkr-index-navbar"
target="_blank"
>
<i className="nc-icon nc-book-bookmark" /> Documentation
</NavLink>
</NavItem>
<NavItem>
<Button
className="btn-round"
color="danger"
href="#pablo"
target="_blank"
disabled
>
Upgrade to Pro
</Button>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
);
}
Example #28
| Source File: ExamplesNavbarOriginal.js From Website2020 with MIT License | 4 votes |
|
function ExamplesNavbar() {
const [navbarColor, setNavbarColor] = React.useState("navbar-transparent");
const [navbarCollapse, setNavbarCollapse] = React.useState(false);
const toggleNavbarCollapse = () => {
setNavbarCollapse(!navbarCollapse);
document.documentElement.classList.toggle("nav-open");
};
React.useEffect(() => {
const updateNavbarColor = () => {
if (
document.documentElement.scrollTop > 299 ||
document.body.scrollTop > 299
) {
setNavbarColor("");
} else if (
document.documentElement.scrollTop < 300 ||
document.body.scrollTop < 300
) {
setNavbarColor("navbar-transparent");
}
};
window.addEventListener("scroll", updateNavbarColor);
return function cleanup() {
window.removeEventListener("scroll", updateNavbarColor);
};
});
return (
<Navbar
className={classnames("fixed-top", navbarColor)}
color-on-scroll="300"
expand="lg"
>
<Container>
<div className="navbar-translate">
<NavbarBrand
data-placement="bottom"
to="/index"
target="_blank"
title="Coded by Creative Tim"
tag={Link}
>
Paper Kit 2
</NavbarBrand>
<button
aria-expanded={navbarCollapse}
className={classnames("navbar-toggler navbar-toggler", {
toggled: navbarCollapse,
})}
onClick={toggleNavbarCollapse}
>
<span className="navbar-toggler-bar bar1" />
<span className="navbar-toggler-bar bar2" />
<span className="navbar-toggler-bar bar3" />
</button>
</div>
<Collapse
className="justify-content-end"
navbar
isOpen={navbarCollapse}
>
<Nav navbar>
<NavItem>
<NavLink to="/index" tag={Link}>
<i className="nc-icon nc-layout-11" /> Components
</NavLink>
</NavItem>
<NavItem>
<NavLink
href="https://demos.creative-tim.com/paper-kit-react/#/documentation?ref=pkr-examples-navbar"
target="_blank"
>
<i className="nc-icon nc-book-bookmark" /> Documentation
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://twitter.com/CreativeTim?ref=creativetim"
target="_blank"
title="Follow us on Twitter"
>
<i className="fa fa-twitter" />
<p className="d-lg-none">Twitter</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.facebook.com/CreativeTim?ref=creativetim"
target="_blank"
title="Like us on Facebook"
>
<i className="fa fa-facebook-square" />
<p className="d-lg-none">Facebook</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.instagram.com/CreativeTimOfficial?ref=creativetim"
target="_blank"
title="Follow us on Instagram"
>
<i className="fa fa-instagram" />
<p className="d-lg-none">Instagram</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.github.com/CreativeTimOfficial?ref=creativetim"
target="_blank"
title="Star on GitHub"
>
<i className="fa fa-github" />
<p className="d-lg-none">GitHub</p>
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
);
}
Example #29
| Source File: ExamplesNavbar.js From Website2020 with MIT License | 4 votes |
|
function ExamplesNavbar(props) {
const [navbarColor, setNavbarColor] = React.useState("navbar-transparent");
const [navbarCollapse, setNavbarCollapse] = React.useState(false);
const toggleNavbarCollapse = () => {
setNavbarCollapse(!navbarCollapse);
document.documentElement.classList.toggle("nav-open");
};
const [scrolled, setScrolled] = React.useState(false);
const handleScroll = () => {
const offset = window.scrollY;
if (offset > 850) {
setScrolled(true);
}
else {
setScrolled(false);
}
}
React.useEffect(() => {
window.addEventListener('scroll', handleScroll)
})
let x = ['navbar', 'custom-navbar-auv'];
if (props.page == "landing-page") {
if (scrolled) {
x.push('scrolled');
}
}
else x.push('scrolled');
return (
<div className={x.join(" ")} >
<Navbar
color-on-scroll="300"
expand="lg"
className="custom-navbar-auv"
>
<Container className="navbar-container">
<div className="navbar-translate">
<NavbarBrand
data-placement="bottom"
to="/index"
title="Coded by Creative Tim"
tag={Link}
style={{ marginLeft: "20px", padding: "0 0" }}
>
<img className="minilogo w-100" src={auvlogomini} alt="logo" />
</NavbarBrand>
<button
aria-expanded={navbarCollapse}
className={classnames("navbar-toggler navbar-toggler u-margin-zero", {
toggled: navbarCollapse,
})}
onClick={toggleNavbarCollapse}
>
<span className="navbar-toggler-bar bar1" />
<span className="navbar-toggler-bar bar2" />
<span className="navbar-toggler-bar bar3" />
</button>
</div>
<Collapse
className=" justify-content-end"
navbar
isOpen={navbarCollapse}
>
<Nav navbar className=" mr-5 navigation">
<NavItem>
<NavLink className={props.activePage === "/landing-page" ? "navbar-content active" : "navbar-content"} to="/landing-page" tag={Link} onClick={toggleNavbarCollapse}>Home
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/about-us" ? "navbar-content active" : "navbar-content"} to="/about-us" tag={Link} onClick={toggleNavbarCollapse}>
About Us
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/team" ? "navbar-content active" : "navbar-content"} to="/team" tag={Link} onClick={toggleNavbarCollapse}>
Team
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/events" ? "navbar-content active" : "navbar-content"} to="/events" tag={Link} onClick={toggleNavbarCollapse} onClick={toggleNavbarCollapse}>
Events
</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle
aria-expanded={false}
aria-haspopup={true}
caret
color="black"
data-toggle="dropdown"
href="#pablo"
id="dropdownMenuButton"
nav
onClick={e => e.preventDefault()}
role="button"
style={{ textAlign: 'center' }}
className={props.activePage === "/vehicles/anahita" || props.activePage === "/vehicles/varun" ? "navbar-content active" : "navbar-content"}
>
Vehicles
</DropdownToggle>
<DropdownMenu
aria-labelledby="dropdownMenuButton"
className="dropdown-info ml-auto mr-auto"
style={{ borderRadius: "0", textAlign: "center" }}
>
<Link to='/vehicles/tarang'>
<DropdownItem
style={{ textAlign: "center" }}
className="auv-dropdown"
onClick={toggleNavbarCollapse}
>
Tarang
</DropdownItem>
</Link>
<Link to='/vehicles/anahita'>
<DropdownItem
style={{ textAlign: "center" }}
className=" auv-dropdown"
onClick={toggleNavbarCollapse}
>
Anahita
</DropdownItem>
</Link>
<Link to='/vehicles/varun'>
<DropdownItem
style={{ textAlign: "center" }}
className="auv-dropdown"
onClick={toggleNavbarCollapse}
>
Varun
</DropdownItem>
</Link>
</DropdownMenu>
</UncontrolledDropdown>
<NavItem>
<NavLink className={props.activePage === "/blogs" ? "navbar-content active" : "navbar-content"} to="/blogs" tag={Link}>
Blogs
</NavLink>
</NavItem>
<NavItem>
<NavLink className={props.activePage === "/contact-us" ? "navbar-content active" : "navbar-content"} to="/contact-us" tag={Link}>
Contact Us
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://www.facebook.com/auviitk"
target="_blank"
title="Like us on Facebook"
style={{ textAlign: "center", color: "white" }}
>
<i className="fa fa-facebook-square nav-social" />
<p className="d-lg-none" style={{ color: "white" }}>Facebook</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink
data-placement="bottom"
href="https://github.com/AUV-IITK"
target="_blank"
title="Star on GitHub"
style={{ textAlign: "center", color: "white" }}
>
<i className="fa fa-github nav-social" />
<p className="d-lg-none" style={{ color: "white" }} >GitHub</p>
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
</div>
);
}
