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

Popular posts from this blog