58 ux/UI md

src/components/buttons/buttons.styles.scss

@@ -1,46 +1,45 @@
 @import "../../styles/colors";
-
 .button-primary {
-  width: 100%;
-  padding: 20px 15px;
-  background-color: $accent-blue;
-  border: 3px solid $accent-blue;
-  box-shadow: 0 10px 20px $transparent-blue;
-  font: bold 1.5rem sans-serif;
-  color: white;
-  border-radius: 10px;
-  font-size: 1.2rem;
-  transition: all 0.3s ease;
-  -webkit-transition: all 0.3s ease;
-  -moz-transition: all 0.3s ease;
-
-  &:hover {
-    background-color: white;
-    color: $dark-grey;
-    box-shadow: 0 0 10px $transparent-blue;
-  }
+    width: 100%;
+    padding: 20px 15px;
+    background-color: $accent-blue;
+    border: 3px solid $accent-blue;
+    box-shadow: 0 10px 20px $transparent-blue;
+    font: bold 1.5rem sans-serif;
+    color: white;
+    border-radius: 10px;
+    font-size: 1.2rem;
+    transition: all 0.3s ease;
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    cursor: pointer;
+    &:hover {
+        background-color: white;
+        color: $dark-grey;
+        box-shadow: 0 0 10px $transparent-blue;
+    }
 }
 
 .i-button-primary {
-  height: 100%;
-  width: 100%;
-  border: 2px solid $light-grey;
-  background-color: white;
-  border-radius: 10px;
-  margin: 5px;
-
-  .i-button-icon-container {
     height: 100%;
-    display: flex;
-    justify-content: center;
-    .i-button-icon {
-      padding: 2px;
-      height: 80%;
-      margin: auto;
+    width: 100%;
+    border: 2px solid $light-grey;
+    background-color: white;
+    border-radius: 10px;
+    margin: 5px;
+    cursor: pointer;
+    .i-button-icon-container {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        .i-button-icon {
+            padding: 2px;
+            height: 80%;
+            margin: auto;
+        }
     }
-  }
-  &:hover {
-    border: 0px;
-    box-shadow: 0 0 15px $light-grey;
-  }
-}
+    &:hover {
+        border: 0px;
+        box-shadow: 0 0 15px $light-grey;
+    }
+}

src/data/index.js

@@ -1,5 +1,4 @@
-export const ourPros = [
-    {
+export const ourPros = [{
         id: 'our-pro-1',
         imgUrl: './images/home-00.jpg',
         imgAlt: 'illustration of a woman with red hair',
@@ -19,8 +18,7 @@ export const ourPros = [
     }
 ]
 
-export const links = [
-    {
+export const links = [{
         title: 'Home',
         linkUrl: '/'
     },
@@ -52,8 +50,7 @@ export const signUp = {
     imgUrl: './images/join-us.png',
     accountExists: 'Aready have an account?',
     submitLabel: 'Sign Up',
-    inputFields: [
-        {
+    inputFields: [{
             id: 'name',
             type: 'text',
             placeholder: 'Enter Your Name',
@@ -81,8 +78,7 @@ export const signIn = {
     imgUrl: './images/join-us.png',
     accountExists: 'Create an account!',
     submitLabel: 'Sign In',
-    inputFields: [
-        {
+    inputFields: [{
             id: 'emailfield',
             type: 'email',
             placeholder: 'Enter Your Email',
@@ -136,4 +132,13 @@ export const header = {
     websiteName: 'InterCamp',
     signInLink: '/signin',
     signInLabel: 'Sign In',
+}
+
+export const userMenu = {
+    menuLabels: [
+        { id: 1, text: 'Dashboard', comp: 'Dashboard', link: '/user/dashboard' },
+        { id: 2, text: 'Bookmarks', comp: 'Bookmarks', link: '/user/bookmarks' },
+        { id: 3, text: 'Trending', comp: 'Trending', link: '/user/trending' },
+        { id: 4, text: 'Statistics', comp: 'Statistics', link: '/user/statistics' }
+    ]
 }

src/pages/user/index.jsx

@@ -1,27 +1,89 @@
 import React from "react";
 import "./user-page.styles.scss";
-import { Link } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { auth } from "../../firebase/firebas.utils";
+import { userMenu } from "../../data/index";
+
+import { Route, Switch } from 'react-router-dom';
+
 
 import { CustomButton, BackToAllButton } from "../../components/buttons";
 
+const Dashboard = () => {
+  return (
+    <div className="flex">
+      <h3>Dashboard</h3>
+      <BackToAllButton />
+      <Link className="link-to-all" to={"/favorite"}>
+        <CustomButton color="primary">Go To Favorite</CustomButton>
+      </Link>
+      <CustomButton
+        color="primary"
+        onClick={() => {
+          auth.signOut();
+        }}
+      >
+        SIGN OUT
+        </CustomButton>
+    </div>
+  );
+}
+const Bookmarks = () => {
+  return (
+    <div className="flex">
+      <h3>Bookmarks</h3>
+      <p>Stay Connected, More Coming Soon</p>
+    </div>
+  );
+}
+const Trending = () => {
+  return (
+    <div className="flex">
+      <h3>Trending</h3>
+      <p>Stay Connected, More Coming Soon</p>
+    </div>
+  );
+}
+const Statistics = () => {
+  return (
+    <div className="flex">
+      <h3>Statistics</h3>
+      <p>Stay Connected, More Coming Soon</p>
+    </div>
+  );
+}
+
 const UserPage = ({ favQuestions }) => {
   return (
+
     <div className="user-page">
-      <div className="nav-container">
-        <BackToAllButton />
-        <Link className="link-to-all" to={"/favorite"}>
-          <CustomButton color="primary">Go To Favorite</CustomButton>
-        </Link>
-        <CustomButton
-          color="primary"
-          onClick={() => {
-            auth.signOut();
-          }}
-        >
-          SIGN OUT
-        </CustomButton>
+
+      <div className="nav-items">
+        {userMenu.menuLabels.map((item) => {
+          return (
+            <div className="nav-lists" key={item.id}><NavLink to={item.link} activeStyle={{
+              fontWeight: "bold",
+              color: "rgba(245, 123, 0, 0.8)"
+            }}>{item.text}</NavLink></div>
+
+          );
+        })}
+      </div>
+      <div className="nav-container flex">
+        <div>
+          <Switch>
+            {/*  // All 3 this components below would be rendered when in a homepage */}
+            <Route exact path="/user" component={Dashboard} />
+
+            <Route path="/user/dashboard" component={Dashboard} />
+            <Route path="/user/bookmarks" component={Bookmarks} />
+            <Route path="/user/trending" component={Trending} />
+            <Route path="/user/statistics" component={Statistics} />
+          </Switch>
+        </div>
+
       </div>
+
     </div>
   );
 };

src/pages/user/user-page.styles.scss

@@ -1,20 +1,64 @@
 .user-page {
-  .nav-container {
-    margin: 60px auto;
-    width: 140px;
-    min-height: 200px;
+    width: 100vw;
+    height: calc(100vh - 70px);
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .link-to-all {
-      width: 100%;
-      display: block;
-
-      .back-to-all-button,
-      .custom-button {
-        width: 100%;
-      }
+    box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.5);
+    .nav-items {
+        height: calc(100vh - 70px);
+        width: 20%;
+        // max-width: 300px;
+        background: rgba(245, 123, 0, 0.2);
+        .nav-lists {
+            position: relative;
+            margin: 10px 10px 0;
+            padding: 20px 10px;
+            z-index: 1;
+            border: 1px solid rgba(245, 123, 0, 0.8);
+            border-radius: 5px;
+            cursor: pointer;
+            opacity: .8;
+            transition: .3s all;
+        }
+        .nav-lists:hover {
+            background: rgba(245, 123, 0, 0.2);
+        }
+        .nav-lists:active {
+            background: rgba(245, 123, 0, 0.3);
+        }
+        .nav-lists>a {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
     }
-  }
-}
+    .nav-container {
+        margin: 0;
+        padding: 60px 30px;
+        width: 80%;
+        height: calc(100vh - 70px);
+        background: rgba(245, 123, 0, 0.1);
+        .link-to-all {
+            margin-bottom: 10px;
+            width: 100%;
+            display: block;
+            .back-to-all-button,
+            .custom-button {
+                width: 100%;
+            }
+        }
+        .custom-button {
+            width: 100%;
+        }
+    }
+    .flex {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+}