Add boilerplate for Profile component

Author: riverrz

client/src/containers/Dashboard/Dashboard.css

@@ -7,6 +7,7 @@
   padding: 0 20px;
   align-items: center;
   font-weight: 300;
+  border-bottom: 1px solid #3f3f3f;
 }
 .btn-logout {
   transition: 0.3s;
@@ -16,10 +17,13 @@
 }
 .Dashboard__main {
   padding: 20px;
+  display: flex;
+  height: 90vh;
 }
 .Dashboard__sideDrawer {
-  height: 84vh;
+  height: 100%;
   width: 15vw;
+  margin-right: 20px;
   border-radius: 10px;
   border: 1px solid #1d1d1d;
   color: #ddd;
@@ -44,15 +48,29 @@
   display: flex;
   flex-flow: column;
   align-items: flex-start;
-  padding-left: 3rem;
+  padding-left: 2rem;
   margin-top: 20%;
   height: 60%;
   justify-content: space-between;
 }
 .Dashboard__sideList__item{
   cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.Dashboard__sideList__item i {
+  margin-right: 7px;
+  font-size: 1.2rem;
 }
 .Dashboard__sideList__item:hover,
 .Dashboard__sideList__item--active {
   color: #fff;
 }
+
+
+.Dashboard__section {
+  height: 100%;
+  flex: 1;
+  border-left: 1px solid #3f3f3f;
+  padding-left: 20px;
+}

client/src/containers/Dashboard/Dashboard.jsx

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from "react";
 import { connect } from "react-redux";
 import * as actionTypes from "../../store/actions/actionTypes";
+import Profile from "./Profile/Profile";
 import "./Dashboard.css";
 import qs from "qs";
 
@@ -18,6 +19,12 @@ class Dashboard extends Component {
     const query = qs.parse(this.props.location.search, {
       ignoreQueryPrefix: true
     });
+    const iconClass = [
+      "fas fa-chart-pie",
+      "fas fa-user",
+      "far fa-id-card",
+      "fas fa-search"
+    ];
     let heading = "Dashboard";
     if (this.state.tabs.includes(query.tab)) {
       heading = query.tab;
@@ -29,10 +36,13 @@ class Dashboard extends Component {
       }
       return (
         <li key={i} className={listItemClasses.join(" ")}>
+          <i className={iconClass[i]} />
           {item}
         </li>
       );
     });
+
+    let content = <Profile />;
     return (
       <Fragment>
         <nav className="Dashboard__nav">
@@ -47,6 +57,7 @@ class Dashboard extends Component {
             <hr />
             <ul className="Dashboard__sideList">{listItems}</ul>
           </aside>
+          <section className="Dashboard__section">{content}</section>
         </main>
       </Fragment>
     );

client/src/containers/Dashboard/Profile/Profile.css

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import "./Profile.css";
+
+
+class Profile extends Component {
+    state = {}
+    render() {
+        return(
+            <div className="Profile__container">
+                Profile
+            </div>
+        );
+    }
+}
+
+export default Profile;