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