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