Dashboard Sidebar Component
import React from 'react'; import './dsidebar.scss'; import {Link} from 'react-router-dom'; class DSidebar extends React.Component{ render(){ return( <div className="DSidebar region"> <div className="menu-item"> <Link to='/admin/post'><img alt="" src='/images/posting.png' /></Link> <Link to='/admin/post'>Post</Link> </div> <div className="menu-item"> <Link to='/admin/page'><img alt="" src='/images/paging.png' /></Link> <Link to='/admin/page'>Page</Link> </div> <div className="menu-item"> <Link to='/admin/category'><img alt="" src='/images/category.png' /></Link> <Link to='/admin/category'>Category</Link> </div> <div className="menu-item"> <Link to='/admin/upload'><img alt="" src='/images/upload.png' /></Link> <Link to='/admin/upload'>Upload</Link> </div> <div className="menu-item"> <Link to='/admin/author'><img alt="" src='/images/user.png' /></Link> <Link to='/admin/author'>Author</Link> </div> <div className="menu-item"> <Link to='/admin/setting'><img alt="" src='/images/setting.png' /></Link> <Link to='/admin/setting'>Setting</Link> </div> </div> ); } } export default DSidebar
.DSidebar{ width: 20%; float: left; margin-top: 30px; padding-right: 20px; border-right: 1px solid lightgrey; .menu-item{ display: grid; grid-template-columns: 20% auto; align-items: center; grid-gap: 10px; text-align: left; margin-bottom: 10px; img{ width: 100%; } a{ font: 18px/1.5 Oswald; } } .menu-item:last-child{ margin-bottom: 0; } }
import {Route} from 'react-router-dom'; import DHeader from '../dashboard/dheader/dheader.js'; import DSidebar from '../dashboard/dsidebar/dsidebar.js'; const adminRouter = [ <Route exact path="/admin"> <DHeader /> <div className='region'> <DSidebar /> </div> </Route> ]; export default adminRouter;
GitHub: "https://github.com/Sokhavuth/emultimedia
Heroku: https://khmerweb-emultimedia.herokuapp.com/
Comments
Post a Comment