Clement G
5 years ago
committed by
guhur
parent
0fc6221390
commit
6c068dbcd6
@ -1,19 +1,63 @@
|
||||
import React, {Component} from "react";
|
||||
import {
|
||||
Collapse,
|
||||
Navbar,
|
||||
NavbarToggler,
|
||||
NavbarBrand,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
} from 'reactstrap';
|
||||
|
||||
import logo from '../../logos/logo-color.svg';
|
||||
|
||||
class Header extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.state = {
|
||||
}
|
||||
isOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({
|
||||
isOpen: !this.state.isOpen
|
||||
});
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div >
|
||||
<h1>HEADER</h1>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<header>
|
||||
<Navbar color="light" light expand="md">
|
||||
<NavbarBrand href="/">
|
||||
<div className="d-flex flex-row">
|
||||
<div className="align-self-center">
|
||||
<img src={logo} alt="logo" height="32"/>
|
||||
</div>
|
||||
<div className="align-self-center ml-2">
|
||||
<div className="logo-text">
|
||||
<h1>Plateforme de vote
|
||||
<small>Jugement Majoritaire</small>
|
||||
</h1>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NavbarBrand>
|
||||
<NavbarToggler onClick={this.toggle} />
|
||||
<Collapse isOpen={this.state.isOpen} navbar>
|
||||
<Nav className="ml-auto" navbar>
|
||||
<NavItem>
|
||||
<NavLink href="/create-ballot/">Démarrer un vote</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
</Collapse>
|
||||
</Navbar>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Header;
|
||||
@ -0,0 +1,25 @@
|
||||
.logo-text > h1{
|
||||
font-size:16px;
|
||||
font-weight:bold;
|
||||
margin:0;
|
||||
line-height:1;
|
||||
}
|
||||
|
||||
.logo-text > h1 > small{
|
||||
display:block;
|
||||
letter-spacing: 0.09em;
|
||||
}
|
||||
|
||||
main{
|
||||
padding:80px 0;
|
||||
min-height:500px;
|
||||
}
|
||||
|
||||
header{
|
||||
position:fixed;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
footer{
|
||||
padding:25px;
|
||||
}
|
||||
@ -1,5 +1,24 @@
|
||||
// Override default variables before the import
|
||||
$body-bg: #2943a0;
|
||||
$mv-color: #2943a0;
|
||||
$body-bg: #000000;
|
||||
|
||||
// Import Bootstrap and its default variables
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
|
||||
|
||||
main{
|
||||
background-color:$mv-color;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color:$body-bg;
|
||||
color:#999;
|
||||
}
|
||||
|
||||
footer a{
|
||||
color:#999;
|
||||
}
|
||||
|
||||
footer a:hover{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue