mirror of https://github.com/franjsco/tick3t
add Navbar
This commit is contained in:
parent
51b5203dba
commit
6941fa1141
|
@ -0,0 +1,14 @@
|
||||||
|
.custom-toggler.navbar-toggler {
|
||||||
|
border-color:#007bff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-toggler .navbar-toggler-icon {
|
||||||
|
|
||||||
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(9,55,150, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
|
||||||
|
|
||||||
|
}
|
|
@ -0,0 +1,81 @@
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import './NavBar.css';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Container,
|
||||||
|
Collapse,
|
||||||
|
Navbar,
|
||||||
|
NavbarBrand,
|
||||||
|
NavbarToggler,
|
||||||
|
Nav,
|
||||||
|
NavItem,
|
||||||
|
NavLink,
|
||||||
|
Button
|
||||||
|
} from 'reactstrap';
|
||||||
|
|
||||||
|
class NavBar extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
isOpen: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// binding
|
||||||
|
this.toggle = this.toggle.bind(this);
|
||||||
|
this.closeNavbar = this.closeNavbar.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
this.setState({
|
||||||
|
isOpen: !this.state.isOpen
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closeNavbar() {
|
||||||
|
this.setState({
|
||||||
|
isOpen: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Navbar fixed="top" color="white" expand="sm" className="shadow-sm p-3 mb-5 bg-white rounded">
|
||||||
|
|
||||||
|
<Container>
|
||||||
|
<NavbarBrand onClick={this.closeNavbar} tag={Link} to="/">tick3t</NavbarBrand>
|
||||||
|
<NavbarToggler className="custom-toggler" onClick={this.toggle} />
|
||||||
|
|
||||||
|
<Collapse isOpen={this.state.isOpen} navbar>
|
||||||
|
<Nav className="mr-auto" navbar>
|
||||||
|
|
||||||
|
<NavItem>
|
||||||
|
<NavLink onClick={this.closeNavbar} tag={Link} to="/stats">Stats</NavLink>
|
||||||
|
</NavItem>
|
||||||
|
|
||||||
|
<NavItem>
|
||||||
|
<NavLink onClick={this.closeNavbar} tag={Link} to="/stats">Credits</NavLink>
|
||||||
|
</NavItem>
|
||||||
|
|
||||||
|
</Nav>
|
||||||
|
|
||||||
|
<Nav className="ml-auto">
|
||||||
|
<NavItem>
|
||||||
|
<Button color="primary" onClick={this.closeNavbar} tag={Link} to="/login">Admin</Button>
|
||||||
|
</NavItem>
|
||||||
|
</Nav>
|
||||||
|
</Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NavBar;
|
Loading…
Reference in New Issue