reactstrap#NavLink JavaScript Examples
The following examples show how to use
reactstrap#NavLink.
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: 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 #2
| Source File: Footer.js From Merch-Dropper-fe with MIT License | 6 votes |
|
Footer = ({ location }) => {
const store_name = localStorage.getItem("store_name");
const classes = useStyles();
const { pathname } = location;
return (
<div
className={classes.footer}
style={
pathname === "/stripe-setup" || pathname === "/createstore"
? { display: "none" }
: { display: "block" }
}
>
<Navbar color="white" light expand="md" className="navStyle">
<p className="pt-3 pl-5 ml-auto">© Merch Dropper 2020</p>
<Nav className="ml-auto">
<NavLink href="/dashboard">Home</NavLink>
<NavLink href={`/${store_name}`}>Store</NavLink>
</Nav>
</Navbar>
</div>
);
}
Example #3
| 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 #4
| 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 #5
| 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 #6
| 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 #7
| 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 #8
| Source File: LoginMenu.js From Confer with MIT License | 6 votes |
|
authenticatedView(userName, profilePath, logoutPath) {
return (<Fragment>
<button className="btn btn-secondary d-block mx-4 my-2">
<NavLink tag={Link} className="text-light" to={profilePath}>Account</NavLink>
</button>
<button className="btn btn-secondary d-block mx-4 my-2">
<NavLink tag={Link} className="text-light" to={logoutPath}>Logout</NavLink>
</button>
</Fragment>);
}
Example #9
| 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 #10
| 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 #11
| Source File: Desktop-Login-Register.js From Encon-fe with MIT License | 5 votes |
|
LoginRegister = () => {
const [activeTab, setActiveTab] = useState('1');
const toggle = (tab) => {
if (activeTab !== tab) setActiveTab(tab);
};
return (
<div className='desktop-login-reg-container'>
<Nav pills style={{ padding: '1rem' }}>
<NavLink
style={{ borderRadius: '1.25rem' }}
className={classnames({ active: activeTab === '1' })}
onClick={() => {
toggle('1');
}}
>
<h1 className='desktop-register-tab'>Register</h1>
</NavLink>
<NavLink
style={{ borderRadius: '1.25rem' }}
className={classnames({ active: activeTab === '2' })}
onClick={() => {
toggle('2');
}}
>
<h1 className='desktop-login-tab'>Sign In</h1>
</NavLink>
</Nav>
<TabContent activeTab={activeTab}>
<TabPane tabId='1'>
<Col xl='13'>
<Card className='desktop-register-card' style={{ border: 'none' }}>
<Register />
</Card>
</Col>
</TabPane>
<TabPane tabId='2'>
<Col xl='13'>
<Card className='desktop-login-card' style={{ border: 'none' }}>
<Login />
</Card>
</Col>
</TabPane>
</TabContent>
</div>
);
}
Example #12
| Source File: Assessment.js From GB-GCGC with MIT License | 5 votes |
|
render(){
return (
<div style={{backgroundColor:'#C7CCDB'}}>
<Container>
<Row>
<NavLink tag={Link} to={"/AddStudent"}>
<Button
style={{
backgroundColor: "#2A324B",
color: "white",
borderColor: "#2A324B",
}}
>
Add Assessment
</Button>
</NavLink>
</Row>
<Row>
<Col align="left" styles={{padding:'10'}}>
<div>
<ReactHTMLTableToExcel
className="btn btn-secondary"
table="Data"
filename="Filtered Students"
sheet="Sheet1"
buttonText="EXCEL"
style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}}
/>
</div>
</Col>
</Row>
<br/>
<Row>
<Table id="Data" responsive striped style={{backgroundColor:'white'}}>
<thead style={{backgroundColor:'#2A324B',color:'white'}}>
<tr>
<th>Sno</th>
<th align="left">Name of the Assessment</th>
<th align="left">YOP</th>
<th>Date Of Assessment</th>
<th>No of students attended</th>
<th>No of Absentees</th>
<th>Highest Score</th>
<th>Average Score</th>
<th>Least Score</th>
<th></th>
</tr>
</thead>
<tbody>
{this.StudentsList()}
</tbody>
</Table>
</Row>
</Container>
</div>
)
}
Example #13
| 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 #14
| 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 #15
| 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 #16
| 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 #17
| 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 #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: 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 #23
| Source File: Footer.js From Website2020 with MIT License | 4 votes |
|
function Footer() {
return (
<footer className="footer-new">
<Container>
<Row className="footer-row">
<Col lg="6" md="7" className="logo-description mr-auto ml-auto">
<Row className="align-items-center">
<Col xs="4" className="my-auto ml-auto mr-auto">
<img src={logo} className="w-100" style={{ maxWidth: '150px' }} />
</Col>
<Col xs="5" className="my-auto mr-auto ml-auto">
<div className="footer-heading-primary">Team AUV-IITK</div>
<div className="footer-address">
AUV Room, Hall-2,
<br />Indian Institute of Technology Kanpur,
<br />Uttar Pradesh-208016, India
</div>
</Col>
</Row>
</Col>
<Col lg="5" md="6" className="quick-social-links mr-auto ml-auto my-auto">
<Row>
<Col md="12" xs="5">
<div className="footer-links-heading">Quick Links</div>
<NavLink to="/landing-page" tag={Link} className="footer-nav-link">
Home
</NavLink>
<NavLink to="/about-us" tag={Link} className="footer-nav-link">
About Us
</NavLink>
<NavLink to="/team" tag={Link} className="footer-nav-link">
Team
</NavLink>
<NavLink to="/vehicles/anahita" tag={Link} className="footer-nav-link">
Vehicles
</NavLink>
<NavLink to="/contact-us" tag={Link} className="footer-nav-link">
Contact Us
</NavLink>
</Col>
<Col md="12" xs="12" className="my-auto text-center mr-auto ml-auto">
<div className="nav-icons-container">
<NavLink
data-placement="bottom"
href="https://github.com/AUV-IITK"
target="_blank"
title="Star on GitHub"
className="footer-nav-icon"
>
<i className="fa fa-github" />
</NavLink>
<NavLink
data-placement="bottom"
href="https://www.facebook.com/auviitk"
target="_blank"
title="Follow us on Facebook"
className="footer-nav-icon"
>
<i className="fa fa-facebook-square" />
</NavLink>
<NavLink
data-placement="bottom"
href="https://www.linkedin.com/company/auv-iitk/"
target="_blank"
title="Reach Us on Linkedin"
className="footer-nav-icon"
>
<i className="fa fa-linkedin-square" />
</NavLink>
<NavLink
data-placement="bottom"
href="mailto:[email protected]"
target="_blank"
title="Write Us"
className="footer-nav-icon"
>
<i className="fa fa-envelope-square" />
</NavLink>
<NavLink
data-placement="bottom"
href="https://www.instagram.com/auviitk/"
target="_blank"
title="Follow us on Instagram
"
className="footer-nav-icon"
>
<i className="fa fa-instagram" />
</NavLink>
</div>
</Col>
</Row>
</Col>
</Row>
</Container>
</footer>
);
}
Example #24
| Source File: HomeCards.js From GB-GCGC with MIT License | 4 votes |
|
/* {this.state.orderDetails.map((item =>
<tr><td key={item.OrderID}>{item.UnitPrice}</td></tr>
))}
*/
render() {
return (
<div className="container">
<div>
<Row className="pl-3">
<h4 className="p-1">Glimpse - </h4>
<select className="pr-1 pl-1" style={{backgroundColor:'#2A324B',borderColor:'#2A324B',borderRadius:'5px',color:'white'}} value={this.state.year} onChange={this.onChangeYear}>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</Row>
<hr style={{ visibility: "visible" }} />
</div>
<div className="row">
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px"}}>
Eligible
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.Eligible}
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px", fontFamily: "Segoe UI" }}>
Placed
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.Placed}
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px", fontFamily: "Segoe UI" }}>
Not Placed
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.NotPlaced}
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px", fontFamily: "Segoe UI" }}>
Total Drives
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.TotalDrives}
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px", fontFamily: "Segoe UI" }}>
Highest Package
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.HighestPackage} LPA
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px", fontFamily: "Segoe UI" }}>
Average Package
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.AveragePacakge} LPA
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px", fontFamily: "Segoe UI" }}>
Least Package
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.LeastPackage} LPA
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-3 col-md-6 p-3">
<Card>
<Card.Body className="p-3">
<Card.Text style={{ fontSize: "12px", fontFamily: "Segoe UI" }}>
Total Number Of Offers
</Card.Text>
<Card.Text>
<p
align="right"
style={{ fontSize: "14px", fontFamily: "Segoe UI" }}
>
{this.state.TOF}
</p>
</Card.Text>
</Card.Body>
</Card>
</div>
</div>
<Card>
<Bar
style={{height:"500"}}
data={{
labels: ["B1","B2","B3","B4","B5","B6","A1","A2","A3","A4","H1","H2"],
datasets: [
{
label: "TNS",
backgroundColor: "red",
borderWidth: 1,
data: [40,65,59,82,88,59,57,12,11,55],
},
{
label: "TNE",
backgroundColor: "blue",
borderWidth: 1,
data: [40,65,59,80,81,56,55,44,15,10],
},
{
label: "TNP",
backgroundColor: "lightblue",
borderWidth: 1,
data: [40,65,59,82,88,59,57],
},
{
label: "TNNP",
backgroundColor: "pink",
borderWidth: 1,
data: [41,55,52,50,21,16,25],
},
{
label: "PP",
backgroundColor: "violet",
borderWidth: 1,
weight:100,
data: [10, 35, 55, 50, 41, 36, 25],
},
],
}
}
options={{
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20,
},
},
],
},
}}
/>
</Card>
<div className="row">
<Row style={{color: "white",fontSize: "14px"}}>
<Col xs="12" className="p-2" align="center">
<h4 className="p-1 "style={{color: "#212529",textAlign:"left"}}>Notice Board</h4>
</Col>
</Row>
<div className="col-xs-12 col-lg-6 col-md-12 p-2">
<Card>
<Card.Body>
<div className="row">
<div className="col-9">
<Card.Title
class="p-2"
style={{ fontSize: "20px",textAlign:"left"}}>
Training
</Card.Title>
</div>
<NavLink tag={Link} to={"/TrainingBoardEdit/"+this.state.year}>
<Button
style={{
backgroundColor: "#2A324B",
color: "white",
borderColor: "#2A324B",
}}
>
Edit
</Button>
</NavLink>
</div>
<div>
<Table size="sm" responsive striped>
<thead style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>From</th>
<th>To</th>
<th>Name of the Programme</th>
<th>status</th>
</tr>
</thead>
<tbody>
{this.state.dash.map((item =>
<tr>
<td>{item.from_date}</td>
<td>{item.to_date}</td>
<td>{item.name_of_the_program}</td>
<td>{item.status}</td>
</tr>
))}
</tbody>
</Table>
</div>
<Card.Text>
<NavLink tag={Link} to={"/trainingdashboardmore/"+this.state.year}>
More..
</NavLink>
</Card.Text>
</Card.Body>
</Card>
</div>
<div className="col-xs-12 col-lg-6 col-md-12 p-2">
<Card>
<Card.Body>
<div className="row">
<div className="col-9">
<Card.Title
class="p-2"
style={{ fontSize: "20px",textAlign:"left"}}>
Placements
</Card.Title>
</div>
<NavLink tag={Link} to={"/PlacementEditBoard/"+this.state.year}>
<Button
style={{
backgroundColor: "#2A324B",
color: "white",
borderColor: "#2A324B",
}}
>
Edit
</Button>
</NavLink>
</div>
<div>
<Table size="sm" responsive striped>
<thead style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Programme</th>
<th>Date</th>
<th>CTC</th>
</tr>
</thead>
<tbody>
{this.state.train.map((item =>
<tr>
<td>{this.state.train.indexOf(item)+1}</td>
<td>{item.Company_name}</td>
<td>{item.Date}</td>
<td>{item.CTC}</td>
</tr>
))}
</tbody>
</Table>
</div>
<Card.Text>
<NavLink tag={Link} to={"/placementdashboardmore/"+this.state.year}>
More..
</NavLink>
</Card.Text>
</Card.Body>
</Card>
</div>
</div>
</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: DashBoard.jsx From portfolyo-mern with MIT License | 4 votes |
|
DashBoard = () => {
const H = useHistory();
const dispatch = useDispatch();
const data = useSelector(state=>state);
const [userName, setuserName] = useState("");
const [WebsiteId, setWebsiteId] = useState("");
useEffect(async ()=>{
try{
const result = await axios({
method:"post",
url:`${Baseurl}/verifytoken`,
data:{token:localStorage.getItem("token")}
});
if(localStorage.getItem(`${result.data.username}_data`)===null){
localStorage.setItem(`${result.data.username}_data`,JSON.stringify(data));
}
localStorage.setItem("username",result.data.username);
setuserName(result.data.username);
}catch{
H.push("/error")
}
},[]);
const getWebsiteIdData = async () => {
try{
const result = await axios({
url:`${Baseurl}/getcopyid/${WebsiteId}`,
method:"get",
})
const data = Object.keys(JSON.parse(result.data.data));
const value = JSON.parse(result.data.data);
for(var i of data){
try{
dispatch({type:i,payload:value[i]});
}catch(err){
}
}
H.push("/makewebsite");
}catch(error){
alert("incorrect websiteId entered")
}
}
return (
<>
<NavBar/>
<div className="dashboardPage">
<div className="dashboarddiv1">
<h1 className="dashboardwelcomeh1" >
Welcome <br />
<span style={{overflowX:"scroll"}}>{userName}</span>
</h1>
<p className="dashboardwelcomeP">
You are one step away from creating your beautiful portfolio Click
below to get started!
</p>
<div className="ml-md-4" style={{width:"max-content"}}>
<div className="" style={{width:"max-content"}}>
<div
className="mt-5"
style={{width:"max-content",}}
>
<button onClick={()=>{H.push("/makewebsite")}} type="button" class="btn p-md-3 p-2 btn-light text-capitalize" style={{borderRadius:"3.5rem"}}>create new website</button>
</div>
<div
style={{width:"max-content",}}
>
<input style={{display:"inline-block"}} type="text" className="mt-0 p-md-3 p-2"
placeholder="enter websiteId"
value={WebsiteId}
onChange={(e)=>{
setWebsiteId(e.target.value)
}}
style={{borderRadius:"30px",outline:"none",fontSize:"1rem"}}>
</input>
<NavLink
to="/makewebsite"
className="dashBoardNavLink"
style={{
textDecoration: "none",
width:"max-content",
display:"inline-block"
}}
>
<i onClick={getWebsiteIdData} className="fas text-left fa-arrow-circle-right dashBoardClickHere"></i>
</NavLink>
</div>
</div>
</div>
</div>
<div className="dashboarddiv2">
<video autoPlay loop muted className="dashboardVideo">
<source src="https://player.vimeo.com/external/159035843.sd.mp4?s=0d309dd63ee62d4efc5e0e471824ed7fab0f7f85&profile_id=164&oauth2_token_id=57447761"></source>
</video>
<div className="videoBlender"></div>
</div>
</div>
</>
);
}
Example #28
| 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 #29
| 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>
);
}
