manage products

src/App.js

@@ -6,13 +6,14 @@ import "./default.scss";
 
 // components
 import AdminToolbar from "./components/AdminToolbar";
-
 // hoc
 import WithAuth from "./hoc/withAuth";
 import WithAdminAuth from "./hoc/withAdmin";
 // layouts
 import MainLayout from "./layouts/MainLayout";
 import HomepageLayout from "./layouts/HomepageLayout";
+import AdminLayout from './layouts/AdminLayout'
+import DashboardLayout from './layouts/DashboardLayout'
 // pages
 import Homepage from "./pages/Homepage";
 import Registration from "./pages/Registration";
@@ -68,19 +69,23 @@ const App = () => {
           path="/dashboard"
           render={() => (
             <WithAuth>
+              <DashboardLayout>
               <MainLayout>
                 <Dashboard />
               </MainLayout>
+              </DashboardLayout>
             </WithAuth>
           )}
         />
         <Route
           path="/admin"
           render={() => (
             <WithAdminAuth>
+              <AdminLayout>
               <MainLayout>
                 <Admin />
               </MainLayout>
+              </AdminLayout>
             </WithAdminAuth>
           )}
         />

src/components/Modal/index.js

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import './styles.scss';
+
+const Modal = ({ hideModal, toggleModal, children }) => {
+  if (hideModal) return null;
+
+  return (
+    <>
+<div className="modalOverlay" onClick={() => toggleModal()} />      <div className="modal">
+        {children}
+      </div>
+    </>
+  );
+}
+
+export default Modal; 

src/components/Modal/styles.scss

@@ -0,0 +1,21 @@
+.modalOverlay {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.3);
+  }
+
+  .modal {
+    position: absolute;
+    top: 50%; left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    background-color: white;
+    width: 95%;
+    padding: 2rem;
+    max-width: 60rem;
+    height: auto;
+    min-height: 40.0rem;
+  } 

src/components/UserProfile/index.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import './styles.scss'
+import userIMG from './../../assets/user.png'
+
+const UserProfile = (props) => {
+    const {currentUser} = props;
+    const {displayName} = currentUser
+    return (
+        <div className='userProfile'>
+            <ul>
+                <li>
+                    <div className='img'>
+                        <img src={userIMG} />
+                    </div>
+                </li>
+                <li>
+                    <span className='displayName'>
+                        {displayName && displayName}
+                    </span>
+                </li>
+            </ul>
+
+        </div>
+    )
+}
+
+export default UserProfile

src/components/UserProfile/styles.scss

@@ -0,0 +1,31 @@
+.userProfile {
+    display: block;
+    width: 100%;
+    margin: 3rem auto 1rem;
+
+    ul, li {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+    ul {
+        li{
+            display: block;
+            width: 100%;
+            .img{
+                display: block;
+                width: 5.0rem;
+                margin: 0 auto;
+            }
+        }
+        .displayName {
+            display: block;
+            width: 100%;
+            text-align: center;
+            margin: 1rem auto;
+            font-size: 1.8rem;
+            line-height: 1;
+            text-transform: uppercase;
+        }
+    }
+}

src/components/VerticalNav/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useSelector } from 'react-redux'
+import UserProfile from './../UserProfile';
+import './styles.scss';
+
+const VerticalNav  = ({children}) => {
+    const currentUser = useSelector(state => state.user.currentUser)
+    const configUserProfile = {
+        currentUser
+    }
+    return (
+        <div className='verticalNav'>
+            <UserProfile {...configUserProfile} />
+            <div className='menu'>
+                {children}
+            </div>
+        </div>
+    )
+}
+
+
+export default VerticalNav

src/components/VerticalNav/styles.scss

@@ -0,0 +1,34 @@
+.verticalNav {
+    width: 100%;
+    height: 100%;
+    .menu{
+        margin: 3rem auto 0;
+        ul, li {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+        }
+        ul {
+            li {
+                width: 100%;
+                border-bottom: 1px solid #d3d3d3;
+
+                &:first-child {
+                    border-top: 1px solid #d3d3d3;
+                }
+                a, span {
+                    display: block;
+                    width: 100%;
+                    padding: 2rem;
+                    font-size: 1.6rem;
+                    line-height: 1;
+                    color: black;
+                    cursor: pointer;
+                }
+                &:hover {
+                    background-color: #d3d3d3;
+                }
+            }
+        }
+    }
+}

src/components/forms/Button/styles.scss

@@ -6,7 +6,7 @@
   line-height: 1;
   font-weight: 300;
   background: black;
-  padding: 1rem 0;
+  padding: 1rem 10px;
   margin: 0 auto;
   text-transform: uppercase;
   border: 0;

src/components/forms/FormSelect/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import './styles.scss';
+
+const FormSelect = ({ options, defaultValue, handleChange, label, ...otherProps }) => {
+  if (!Array.isArray(options) || options.length < 1) return null;
+
+  return (
+    <div className="formRow">
+      {label && (
+        <label>
+          {label}
+        </label>
+      )}
+
+      <select className="formSelect" value={defaultValue} onChange={handleChange} {...otherProps}>
+        {options.map((option, index) => {
+          const { value, name } = option;
+
+          return (
+            <option key={index} value={value}>{name}</option>
+          );
+        })}
+      </select>
+    </div>
+  );
+}
+
+export default FormSelect;

src/components/forms/FormSelect/styles.scss

@@ -0,0 +1,25 @@
+.formRow {
+    display: inline-block;
+    width: 100%;
+
+    label {
+      display: block;
+      width: 100%;
+      text-align: left;
+    }
+
+    select {
+      display: block;
+      width: auto;
+      float: left;
+      font-size: 1.5rem;
+      line-height: 1;
+      font-weight: 400;
+      text-align: left;
+      padding: 10px 0px;
+      margin: 10px auto;
+      border: none;
+      outline: none;
+      cursor: pointer;
+    }
+  }

src/default.scss

@@ -31,6 +31,34 @@ body {
   line-height: 1;
 }
 
+h1 {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0 auto 2rem;
+  font-size: 3.0rem;
+  line-height: 3.2rem;
+  color: #000000;
+  text-align: left;
+  font-weight: 400;
+  text-transform: uppercase;
+  border-bottom: #d3d3d3;
+}
+
+h2 {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0 auto 2rem;
+  font-size: 2.5rem;
+  line-height: 2.7rem;
+  color: #000000;
+  text-align: left;
+  font-weight: 400;
+  text-transform: uppercase;
+  border-bottom: #d3d3d3;
+}
+
 a {
   text-decoration: none;
   cursor: pointer;
@@ -50,3 +78,33 @@ a:hover {
   padding: 0 10px;
   margin: 0 auto;
 }
+
+.controlPanel {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  padding: 3rem 0 0 25.0rem;
+  border-bottom: 1px solid #d3d3d3;
+
+  .sidebar {
+    position: absolute;
+    top: 0; left: 0;
+    width: 25.0rem;
+    height: 100%;
+    z-index: 1;
+    border-right: 1px solid #d3d3d3;
+  }
+
+  .content {
+    padding: 0 10px;
+  }
+}
+
+.adminLayout {
+  height: calc(100% - 6.5rem);
+}
+
+.dashboardLayout {
+  height: calc(100% - 6.5rem);
+}