started with dashboard (#70)

frontend/components/Dashboard/Dashboard.jsx

@@ -1,25 +1,45 @@
 import DashboardStyle from "./Dashboard.style";
 
-function Sidebar1(){
-    return(
-        <div className="sidebar" style={{backgroundColor:"#696969"}}>
+function Sidebar1() {
+    return (
+        <div className="sidebar">
             <ul>
-                <li className="nav-item mb-2"><h3>Brand Name</h3></li>
-                <li className="nav-item mb-2"><img src="logo.svg" style={{'borderRadius':'5px'}}></img></li>
-                <li className="nav-item mb-2">Hyat</li>
-                <li className="nav-item mb-2">Product Desiner</li>
-                <li className="nav-item mb-2"><button>Create Link</button></li>
-                <li className="nav-item mb-2">Overview</li>
-                <li className="nav-item mb-2">MyLinks</li>
-                <li className="nav-item mb-2">Extras</li>
+                <div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div>
+                <div className="profile">
+                    <div className="profile-image"><img
+                        src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
+                    </div>
+                    <p className="name">Hayat</p>
+                    <p className="profession">Product Designer</p>
+                </div>
+                <div className="creatButton">
+                    <button className={""}>Create Link</button>
+                </div>
+                <li className="nav-buttons">
+                    <div className="nav-item">
+                        <button>
+                            Overview
+                        </button>
+                    </div>
+                    <div className="nav-item">
+                        <button>
+                            My Links
+                        </button>
+                    </div>
+                    <div className="nav-item">
+                        <button>
+                            Extras
+                        </button>
+                    </div>
+                </li>
             </ul>
         </div>
     )
 }
-function Sidebar2()
-{
-    return(
-        <div  className="sidebar2">
+
+function Sidebar2() {
+    return (
+        <div className="sidebar2">
             <h2 className="dash">Overview</h2>
             <div className="row">
                 <div className="column">Box1</div>
@@ -29,14 +49,14 @@ function Sidebar2()
         </div>
     )
 }
-function Graph()
-{
+
+function Graph() {
     return (
-        <div  className="sidebar2">
+        <div className="sidebar2">
             <div className="row">
                 <div className="column">Daily Insight</div>
                 <div className="column">
-                    <ul >
+                    <ul>
                         <li className="list2">Api Version</li>
                         <li className="list2">Frontend Version</li>
                         <li className="list2">Links generated yet</li>
@@ -52,9 +72,9 @@ function Graph()
 function App() {
     return (
         <DashboardStyle>
-            <Sidebar1 />
-            <Sidebar2 />
-            <Graph />
+            <Sidebar1/>
+            <Sidebar2/>
+            <Graph/>
         </DashboardStyle>
     );
 }

frontend/components/Dashboard/Dashboard.style.js

@@ -2,13 +2,80 @@ import styled from "styled-components"
 
 export default styled.div`
   .sidebar{
+    background-color:#00253A;
     float: left;
     width: 20%;
     height: 100vh;
+    color:white !important;
+    .brand-name{
+      margin-top:40px;
+      padding-left:20px;
+    }
+    .profile{
+      margin:25px 0;
+      display:flex;
+      flex-direction:column;
+      justify-content: center;
+      align-items:center;
+      .profile-image{
+        max-width:35%;
+        margin:auto;
+        border-radius:100%;
+        img{
+          max-width:100%;
+          border-radius:100%;
+        }
+      }
+      .name{
+        font-size:1.2rem;
+        font-weight:bold;
+        margin: 3px 0;
+      }
+      .profession{
+        color:gray;
+        font-size:0.8rem;
+        font-weight:bold;
+        margin:  0;
+      }
+    }
+    .creatButton{
+      
+      margin:40px auto 80px;
+      width:70%;
+      button{
+        width:100%;
+        color:white;
+        font-weight:bold;
+        font-size:1rem;
+        padding:10px;
+        background-color:blueviolet;
+        outline:none;
+        border:none;
+        border-radius:5px;
+      }
+    }
   }
-  .nav-item {
-    margin: 2.5rem;
-    list-style-type: none;
+  .nav-buttons{
+    .nav-item {
+      margin:0;
+      button{
+        width:100%;
+        background-color:transparent;
+        border:none;
+        outline:none;
+        padding:10px;
+        color:white;
+        font-size:1.1rem;
+        margin:0;
+        padding-left:20px;
+        text-align: left;
+        :hover{
+          background-color:#07344A;
+          color:#43BFD6;
+          border-left:5px solid #43BFD6;
+        }
+      }
+    }
   }
   .sidebar2{
     text-align: center;