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

Popular posts from this blog