Dashboard Header Component
import React from 'react';
import {Redirect} from 'react-router-dom';
import './dheader.scss';
import tool from '../../tool';
class DHeader extends React.Component{
constructor(props){
super(props);
this.state = {
dTitle: 'Dashboard',
redirect: false
}
this.checkLogin();
}
checkLogin = async () => {
const result = await tool.checkLogin();
if(!result){
this.setState({
redirect: '/login'
})
}
}
render(){
if(this.state.redirect) {
return <Redirect to={this.state.redirect} />
}
return(
<div className="DHeader">
<section id="header">
<div id="header-outer">
<div className="header-inner region">
<h1>{this.state.dTitle}</h1>
<form id="search" action="/admin/search" method='post'>
<select id="search-label" name="fsearch-label">
<option>Post</option>
<option>Page</option>
<option>Author</option>
</select>
<input type="text" name="querry" placeholder="Search" />
<input type="submit" />
</form>
<div id="logout"><a href="/admin/logout">Logout</a></div>
</div>
</div>
</section>
</div>
);
}
}
export default DHeader;
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
font:14px Vidaloka;
}
a{
color:darkblue;
text-decoration: none;
}
a:hover{
opacity:.7;
}
.region{
max-width: 1100px;
margin:0 auto;
}
#header{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999;
}
#header-outer{
background: teal;
color:white;
padding: 3px 0;
h1{
color: white;
font: 26px/1.5 PirataOne;
text-align: left;
}
}
.header-inner{
display:grid;
grid-template-columns:30% auto 20%;
align-items: center;
form{
width: 100%;
display: grid;
grid-template-columns: 20% auto 15%;
select, input{
font:14px/1.5 Vidaloka, OdorMeanChey;
padding: 0 7px;
}
}
#logout{
text-align: right;
a{
color:white;
}
}
}
GitHub: "https://github.com/Sokhavuth/emultimedia
Heroku: https://khmerweb-emultimedia.herokuapp.com/

Comments
Post a Comment