reactstrap#NavItem JavaScript Examples
The following examples show how to use
reactstrap#NavItem.
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: Sidebar.js From HexactaLabs-NetCore_React-Initial with Apache License 2.0 | 6 votes |
|
Sidebar = ({ menu }) => (
<Col className="ui-sidebar" sm={2}>
<h4 className="ui-sidebar-section-title">Navegación</h4>
<Nav className="ui-sidebar-section-nav" vertical>
{menu.map(({ to, icon, title }, i) => (
<NavItem
key={i}
tag={() => (
<Link to={to}>
<i className={icon} />
<p>{title}</p>
</Link>
)}
/>
))}
</Nav>
</Col>
)
Example #2
| Source File: NavItems.js From agenda with MIT License | 6 votes |
|
NavItems = ({redirect}) => (
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink onClick={() => redirect('/app')}>
<FontAwesomeIcon icon={faHome}/>
Inicio
</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => redirect('/contacts')}>
<FontAwesomeIcon icon={faUserFriends}/>
Contactos
</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => redirect('/departments')}>
<FontAwesomeIcon icon={faBriefcase}/>
Departamentos
</NavLink>
</NavItem>
<NavItem>
<NavLink onClick={() => redirect('/assignments')}>
<FontAwesomeIcon icon={faBriefcase}/>
Asignaciones
</NavLink>
</NavItem>
</Nav>
)
Example #3
| Source File: navbar1.js From web-frontend with MIT License | 6 votes |
|
Example = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div id="topNav">
<Navbar color="light" className="topNav" light expand="md">
<Link to="banner" smooth="true" duration={1000}>
<img alt="Palembang Digital" src={"/logo.jpg"} width="50px" />
</Link>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<Link to={`/`} smooth="true" duration={1000} className="NavLink">
Acara
</Link>
<Link to={`/`} smooth="true" duration={1000} className="NavLink">
Tentang
</Link>
<Link to={`/`} smooth="true" duration={1000} className="NavLink">
Kontak
</Link>
<NavLink href="/patal-team" className="NavLink">
Team
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #4
| Source File: MainNav.js From hivemind with Apache License 2.0 | 6 votes |
|
navItems = {
auth: [
<NavItem key="mmaps">
<Link href={'/mmaps'} passHref>
<NavLink>Mind Maps</NavLink>
</Link>
</NavItem>,
],
anon: [],
unknown: [
<NavItem key={'loading'}>
<Spinner />
</NavItem>,
],
}
Example #5
| 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 #6
| 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 #7
| Source File: TopNav.js From mern-course-bootcamp with MIT License | 6 votes |
|
TopNav = () => {
const { isLoggedIn, setIsloggedIn } = useContext(UserContext);
const [collapsed, setCollapsed] = useState(true);
const toggleNavbar = () => setCollapsed(!collapsed);
const logoutHandler = () => {
localStorage.removeItem('user')
localStorage.removeItem('user_id')
setIsloggedIn(false)
}
return isLoggedIn ?
<div>
<Navbar color="faded" light>
<NavbarToggler onClick={toggleNavbar} />
<Link to="/login" onClick={logoutHandler}>Logout</Link>
<Collapse isOpen={!collapsed} navbar>
<Nav navbar>
<NavItem>
<Link to="/events">Events</Link>
</NavItem>
<NavItem>
<Link to="/">Dashboard</Link>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
: ""
}
Example #8
| Source File: DemoHeader.jsx From react-lte with MIT License | 6 votes |
|
export default function DemoHeader() {
return (
<Navbar className='main-header navbar-white navbar-light' expand>
<Nav navbar>
<LteToggler />
<NavItem className='d-none d-sm-inline-block'>
<NavLink tag={Link} to='/'>
Home
</NavLink>
</NavItem>
<NavItem className='d-none d-sm-inline-block'>
<NavLink href='#'>Contact</NavLink>
</NavItem>
</Nav>
<NavSearch />
<Nav navbar className='ml-auto'>
<MessageMenu href='/message' data={messageNavData} />
<NotificationMenu href='/notification' />
<NavItem>
<NavLink tag='button' className='btn' data-widget='control-sidebar' data-slide='true'>
<FontAwesomeIcon icon={faThLarge} />
</NavLink>
</NavItem>
</Nav>
</Navbar>
);
}
Example #9
| Source File: AdminNavbar.js From covidsos with MIT License | 6 votes |
|
render() {
return (
<>
<Navbar className="navbar-top navbar-dark" expand="md" id="navbar-main">
<Container fluid>
<NavItem className="no-list-style mb-0 d-none d-md-flex ml-auto d-lg-inline-block">
<NavLink href="/how-it-works" title="How it works?">
<Media className="align-items-center">
<i className="fas fa-info text-white text-lg avatar avatar-sm bg-red"/>
<Media className="ml-2 d-none d-lg-block">
<span className="mb-0 text-sm font-weight-bold text-white">
How it works?
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<UserDropDown className="mb-0 d-none d-md-flex d-lg-inline-block"
dropDownToggleClassName="pr-0"/>
</Container>
</Navbar>
</>
);
}
Example #10
| 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 #11
| 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 #12
| Source File: navbar.js From web-frontend with MIT License | 5 votes |
|
NavbarDefault = () => {
const [isOpen, setIsOpen] = useState(false);
const [currentPath, setCurrentPath] = useState("");
const toggle = () => setIsOpen(!isOpen);
useEffect(() => {
if (typeof window !== "undefined") {
setCurrentPath(window.location.pathname);
}
}, [currentPath]);
return (
<div id="topNav">
<Navbar color="light" className="topNav" light expand="md">
<GatsbyLink to="/">
<img alt="Palembang Digital" src={"/logo.png"} width="50px" />
</GatsbyLink>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`event`}
smooth={true}
duration={1000}
className="NavLink">
Acara
</Link>
) : (
<GatsbyLink to="/#event" className="NavLink">
Acara
</GatsbyLink>
)}
</NavItem>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`tentang`}
smooth={true}
duration={1000}
className="NavLink">
Tentang
</Link>
) : (
<GatsbyLink to="/#tentang" className="NavLink">
Tentang
</GatsbyLink>
)}
</NavItem>
<NavItem>
{!currentPath.startsWith("/patal-team") ? (
<Link
to={`footer`}
smooth={true}
duration={1000}
className="NavLink">
Kontak
</Link>
) : (
<GatsbyLink to="/#footer" className="NavLink">
Kontak
</GatsbyLink>
)}
</NavItem>
<NavItem
className={currentPath.startsWith("/patal-team") ? "active" : ""}>
<GatsbyLink to="/patal-team" className="NavLink">
Tim
</GatsbyLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
}
Example #13
| 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 #14
| Source File: navbar.component.js From blogApp with MIT License | 5 votes |
|
render() {
return (
<Navbar color='dark' dark expand='lg'>
<Link
to='/'
className='navbar-brand'
style={{ fontFamily: "Monoton", fontWeight: "100" }}>
<img
src={logo}
style={{ maxWidth: "40px" }}
className='mx-2'
/>
BlogApp
</Link>
<NavbarToggler onClick={this.toggle} />{" "}
<Collapse isOpen={this.state.isOpen} navbar>
{this.state.user ? (
<Nav className='ml-auto mr-2' navbar>
<NavItem className='navbar-item'>
<ButtonDropdown
isOpen={this.state.isDropdownOpen}
toggle={this.dropdownToggle}>
<Button id='caret' color='primary'>
<FontAwesomeIcon
icon={faUser}
className='mr-2'
/>
{this.state.user.username}
</Button>
<DropdownToggle caret color='primary' />
<DropdownMenu right>
<Link
to='/myblogs/'
className='dropdown-item'>
My Blogs
</Link>
<DropdownItem divider />
<DropdownItem onClick={this.logout}>
logout
<FontAwesomeIcon
icon={faSignOutAlt}
className='ml-3'
/>
</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</NavItem>
</Nav>
) : (
<Nav className='ml-auto' navbar>
<NavItem className='navbar-item'>
<Link className='nav-link' to='/login'>
Login
</Link>
</NavItem>
</Nav>
)}
</Collapse>
</Navbar>
);
}
Example #15
| 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 #16
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Based Navs</strong>
</h5>
<div className="mb-5">
<Nav>
<NavItem>
<NavLink>Link</NavLink>
</NavItem>
<NavItem>
<NavLink>Link</NavLink>
</NavItem>
<NavItem>
<NavLink>Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled Link</NavLink>
</NavItem>
</Nav>
</div>
<h5 className="mb-4">
<strong>Centered Navs</strong>
</h5>
<div className="mb-5">
<Nav className="justify-content-center">
<NavLink>Link</NavLink> <NavLink>Link</NavLink> <NavLink>Another Link</NavLink>{' '}
<NavLink disabled>Disabled Link</NavLink>
</Nav>
</div>
<h5 className="mb-4">
<strong>Right Aligned Navs</strong>
</h5>
<div className="mb-5">
<Nav className="justify-content-end">
<NavLink>Link</NavLink> <NavLink>Link</NavLink> <NavLink>Another Link</NavLink>{' '}
<NavLink disabled>Disabled Link</NavLink>
</Nav>
</div>
<h5 className="mb-4">
<strong>Vertical Navs</strong>
</h5>
<div className="mb-5">
<Nav vertical>
<NavLink>Link</NavLink> <NavLink>Link</NavLink> <NavLink>Another Link</NavLink>{' '}
<NavLink disabled>Disabled Link</NavLink>
</Nav>
</div>
</div>
)
}
Example #17
| 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 #18
| 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 #19
| Source File: AdminFooter.js From covidsos with MIT License | 5 votes |
|
render() {
return (
<footer className="footer">
<Row className="align-items-center justify-content-md-center">
<Col md="8">
<Nav className="nav-footer justify-content-center">
<NavItem>
<NavLink href="/how-it-works">How it Works</NavLink>
</NavItem>
<NavItem>
<NavLink href="/faq">FAQ</NavLink>
</NavItem>
<NavItem>
<NavLink href="/disclaimer">Disclaimer</NavLink>
</NavItem>
<NavItem>
<NavLink href="/terms-of-use">Terms of Use</NavLink>
</NavItem>
</Nav>
</Col>
</Row>
<Nav pills className="bottomright">
<NavItem className="pl-2 pr-2 mb-0">
<a
className="media-icon-link"
href={"https://www.facebook.com/covidsos.org/"}
target="_blank" rel="noopener noreferrer">
<img alt={'Facebook'} src={require("assets/img/icons/facebook.svg")}/>
</a>
</NavItem>
<NavItem className="pl-2 pr-2 mb-0">
<a
className="media-icon-link"
href={"https://twitter.com/covid_sos_org"}
target="_blank" rel="noopener noreferrer">
<img alt={'Twitter'} src={require("assets/img/icons/twitter.svg")}/>
</a>
</NavItem>
<NavItem className="pl-2 pr-2 mb-0">
<a
className="media-icon-link"
href={"https://www.instagram.com/covid_sos_org/"}
target="_blank" rel="noopener noreferrer">
<img alt={'Instagram'} src={require("assets/img/icons/instagram.svg")}/>
</a>
</NavItem>
</Nav>
</footer>
);
}
Example #20
| Source File: ChartStats.js From study-chain with MIT License | 5 votes |
|
render() {
const { activeTab } = this.state;
const {
blockPerHour,
blockPerMin,
transactionPerHour,
transactionPerMin,
classes
} = this.props;
return (
<div className={classes.chart}>
<Nav tabs>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '1'
})}
onClick={() => {
this.toggle('1');
}}
>
BLOCKS / HOUR
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '2'
})}
onClick={() => {
this.toggle('2');
}}
>
BLOCKS / MIN
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '3'
})}
onClick={() => {
this.toggle('3');
}}
>
TX / HOUR
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: activeTab === '4'
})}
onClick={() => {
this.toggle('4');
}}
>
TX / MIN
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<TimeChart chartData={this.timeDataSetup(blockPerHour)} />
</TabPane>
<TabPane tabId="2">
<TimeChart chartData={this.timeDataSetup(blockPerMin)} />
</TabPane>
<TabPane tabId="3">
<TimeChart chartData={this.timeDataSetup(transactionPerHour)} />
</TabPane>
<TabPane tabId="4">
<TimeChart chartData={this.timeDataSetup(transactionPerMin)} />
</TabPane>
</TabContent>
</div>
);
}
Example #21
| Source File: Pills.jsx From nodejs-rest-api-boilerplate with MIT License | 5 votes |
|
render() {
return (
<>
<Col lg="5">
<h3 className="h4 text-success font-weight-bold mb-5">
Navigation Pills
</h3>
<Nav className="nav-pills-circle" id="tabs_2" pills role="tablist">
<NavItem>
<NavLink
aria-selected={this.state.circledNavPills === 1}
className={classnames("rounded-circle", {
active: this.state.circledNavPills === 1
})}
onClick={e => this.toggleNavs(e, "circledNavPills", 1)}
href="#pablo"
role="tab"
>
<span className="nav-link-icon d-block">
<i className="ni ni-atom" />
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.circledNavPills === 2}
className={classnames("rounded-circle", {
active: this.state.circledNavPills === 2
})}
onClick={e => this.toggleNavs(e, "circledNavPills", 2)}
href="#pablo"
role="tab"
>
<span className="nav-link-icon d-block">
<i className="ni ni-chat-round" />
</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
aria-selected={this.state.circledNavPills === 3}
className={classnames("rounded-circle", {
active: this.state.circledNavPills === 3
})}
onClick={e => this.toggleNavs(e, "circledNavPills", 3)}
href="#pablo"
role="tab"
>
<span className="nav-link-icon d-block">
<i className="ni ni-cloud-download-95" />
</span>
</NavLink>
</NavItem>
</Nav>
</Col>
</>
);
}
Example #22
| Source File: App.js From tunnel-tool with MIT License | 5 votes |
|
HomeLink = ({ viewer }) => (
<NavItem>
<Link className="nav-link" to="/">
<i className="fa fa-home" /> Home
</Link>
</NavItem>
)
Example #23
| 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 #24
| 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>
);
}
Example #25
| 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 #26
| 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 #27
| Source File: Layout.js From hivemind with Apache License 2.0 | 4 votes |
|
Layout = ({ children }) => {
const [isOpen, setOpen] = useState(false)
const [dropdownOpen, setDropdownOpen] = useState(false)
const { pageVars } = useContext(GlobalContext)
const notifyRef = useCallback((node) => {
if (typeof window !== 'undefined') {
if (node) {
window.notify = node.notificationAlert.bind(node)
} else {
window.notify = null
}
}
}, [])
function toggleCollapse() {
setOpen(!isOpen)
}
function toggleDropdown() {
setDropdownOpen(!dropdownOpen)
}
return (
<Container fluid>
<Head>
<script type="text/javascript" src="/js/pace.min.js" async />
<title>{pageVars.title}</title>
<link
rel="apple-touch-icon"
sizes="57x57"
href="/img/logo/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="/img/logo/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/img/logo/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="/img/logo/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/img/logo/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/img/logo/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/img/logo/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/img/logo/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/img/logo/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/img/logo/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/img/logo/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/img/logo/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/img/logo/favicon-16x16.png"
/>
<link rel="manifest" href="/img/logo/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="/img/logo/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff" />
</Head>
<Navbar color="inverse" light expand="md" className="border-bottom mb-2">
<Link href="/" passHref>
<ForwardedNavbarBrand className="text-wrap">
<img
src="/img/logo/Logo.svg"
style={{ height: '35px' }}
alt="Logo"
/>
</ForwardedNavbarBrand>
</Link>
<NavbarToggler onClick={toggleCollapse} />
<Collapse isOpen={isOpen} navbar>
<MainNav />
<Nav className="ml-auto" navbar>
<NavItem>
<NavbarText>
<Spinner
type="grow"
color="dark"
id={'loading'}
className={'invisible mx-2'}
/>
</NavbarText>
</NavItem>
<NavItemUser />
<Dropdown
nav
inNavbar
isOpen={dropdownOpen}
toggle={toggleDropdown}
>
<DropdownToggle nav caret>
<HelpCircle /> Help
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<Link href={'/help'} passHref>
<NavLink>
<Info /> User Guide
</NavLink>
</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<NavLink
href={'https://github.com/adityamukho/hivemind/discussions'}
target="_blank"
>
<MessageCircle /> Ask a Question (Hivemind)
</NavLink>
</DropdownItem>
<DropdownItem>
<NavLink
href={'https://gitter.im/recallgraph/community'}
target="_blank"
>
<MessageCircle /> Ask a Question (RecallGraph)
</NavLink>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink
href="https://github.com/adityamukho/hivemind"
target="_blank"
>
<GitHub />
</NavLink>
</NavItem>
<NavItemLogin />
</Nav>
</Collapse>
</Navbar>
<Container fluid>
<NotificationAlert ref={notifyRef} />
<Row>
<Col>{children}</Col>
</Row>
</Container>
</Container>
)
}
Example #28
| Source File: activeAuction.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let box = this.props.box;
return (
<Col key={box.id} xs="12" md="6" lg="6" xl="4">
<PlaceBidModal
isOpen={this.state.bidModal}
box={this.props.box}
close={this.openBid}
assemblerModal={this.props.assemblerModal}
/>
<MyBidsModal
isOpen={this.state.myBidsModal}
box={this.props.box}
close={this.openMyBids}
highText="current active bid"
/>
<BidHistory
close={this.openDetails}
box={this.props.box}
isOpen={this.state.detailsModal}
/>
<div className="card mb-3 bg-white widget-chart" style={
{
'opacity': this.props.box.isFinished || this.state.loading ? 0.6 : 1
}
}>
<Row style={{marginTop: 8}}>
<Col className="text-truncate">
<b data-tip={this.props.box.tokenName}>{this.props.box.tokenName}</b>
</Col>
{(this.props.box.royalty > 0 || this.props.box.totalIssued > 1) &&
<Col className="text-truncate">
{this.props.box.royalty > 0 &&
<i data-tip={`Includes ${this.props.box.royalty / 10}% royalty on secondary sales`} style={{fontSize: '12px'}}
className="font-weight-light">{`${this.props.box.royalty / 10}% royalty`}</i>}
{this.props.box.totalIssued > 1 &&
<i data-tip={`This is a Fungible Token with total issuance of ${this.props.box.totalIssued}`}
style={{fontSize: '12px'}}
className="font-weight-light">{` - ${this.props.box.assets[0].amount} out of ${this.props.box.totalIssued}`}</i>}</Col>
}
</Row>
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction="left">
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisH}/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-md-left">
<Nav vertical>
<NavItem className="nav-item-header">
General
</NavItem>
<NavItem>
<NavLink
href={
'#/auction/specific/' +
// this.props.box.boxId
(this.props.box.stableId? this.props.box.stableId : this.props.box.boxId)
}
>
Link to Auction
</NavLink>
<NavLink
onClick={() => this.openMyBids()}
>
My Bids
</NavLink>
<NavLink
onClick={() =>
this.setState({
detailsModal: true,
})
}
>
Details
</NavLink>
</NavItem>
</Nav>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="widget-chart-content">
<ResponsiveContainer height={10}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.loading}
/>
</ResponsiveContainer>
<ReactTooltip effect="solid" place="bottom"/>
<ArtworkMedia preload={this.props.preload} box={this.props.box}/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
<div style={textStyle}>{this.props.box.description}</div>
<b
style={{cursor: "pointer"}}
onClick={() => this.props.updateParams('artist', this.props.box.artist)}
>
{' '}- By {friendlyAddress(this.props.box.artist, 5)}
</b>
</p>
</div>
</div>
</div>
<div className='mb-2'>
<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '13px'
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 5)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '13px'
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Bidder{' '}
{friendlyAddress(this.props.box.bidder, 5)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see current bidder's address"
style={{
fontSize: '1rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<FooterSection box={this.props.box} loading={(val) => this.setState({loading: val})}
assemblerModal={this.props.assemblerModal} openBid={this.openBid}/>
</div>
</Col>
);
}
Example #29
| Source File: index.js From relay_09 with MIT License | 4 votes |
|
Tab = (props) => {
const dispatch = useDispatch();
const [activeTab, setActiveTab] = useState("1");
const videoList = useSelector((state) => state.video.videoList);
const toggle = (tab) => {
if (activeTab !== tab) setActiveTab(tab);
};
const getVideoList = async () => {
const data = await getVideolist();
dispatch(saveVideo(data));
};
useEffect(() => {
getVideoList();
}, []);
const VideoList =
videoList &&
videoList.map((video, index) => (
<Col sm="6" style={{ maxWidth: "30%", minHeight: "200px", paddingBottom: "30px" }}>
<div className="card" style={{ height: "100%" }}>
<VideoThumbnail key={index} video={video}></VideoThumbnail>
</div>
</Col>
));
return (
<div>
<Nav tabs>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "1" })}
onClick={() => {
toggle("1");
}}
>
✨ Best
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "2" })}
onClick={() => {
toggle("2");
}}
>
? 월 랭킹
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "3" })}
onClick={() => {
toggle("3");
}}
>
? 맞춤영상
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: activeTab === "4" })}
onClick={() => {
toggle("4");
}}
>
? etc
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId="1">
<Row>
<Col sm="12">
<br />
<h6>Best Video ?</h6>
</Col>
{VideoList}
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<Col sm="12">
<br />
<h6> Monthly ranking ?</h6>
</Col>
<Col sm="6">
<Card body>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
<Col sm="6">
<Card body>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
</Row>
</TabPane>
<TabPane tabId="3">
<Row>
<Col sm="12">
<br />
<h6> Custom video ?</h6>
</Col>
</Row>
</TabPane>
<TabPane tabId="4">
<Row>
<Col sm="12">
<br />
<h6> etc ?</h6>
</Col>
</Row>
</TabPane>
</TabContent>
</div>
);
}
