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