added profile section to homepage

style/dashboard.scss

@@ -1,7 +1,5 @@
 @import "theme.scss";
 
 .dashboard-container {
-  width: calc(100% - 22rem);
-  background: green;
-  height: 100vh;
+  width: calc(100% - 22rem - 16rem);
 }

style/home.scss

@@ -7,3 +7,10 @@
   display: flex;
   flex-direction: row;
 }
+.home-component {
+  background: #1c1c1c;
+  height: 100vh;
+  margin: 2px;
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  border-radius: 0.5rem;
+}

style/main.scss

@@ -7,6 +7,7 @@
 @import "dashboard.scss";
 @import 'home.scss';
 @import 'search.scss';
+@import 'personal.scss';
 
 body {
   font-family: sans-serif;

style/personal.scss

@@ -0,0 +1,38 @@
+@import "theme.scss";
+
+.personal-container {
+  width: 16rem;
+  background: #1c1c1c;
+  height: 100vh;
+  margin: 2px;
+  border-radius: 0.5rem;
+
+  .profile-container {
+    display: flex;
+    border-radius: 0.4rem;
+    margin: 0.3rem;
+    min-height: 6rem;
+    border: 2px solid rgba(89, 89, 89, 0.199);
+    padding: 0.5rem;
+
+    .profile-icon {
+      display: inline-flex;
+      padding: 0.2rem;
+      cursor: pointer;
+      font-size: 2rem;
+      border-radius: 50%;
+      transition: all 0.3s;
+      height: max-content;
+      margin-left: auto;
+    }
+
+    .profile-icon:hover {
+      transform: scale(1.1);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .profile-icon:active {
+      transform: scale(0.8);
+    }
+  }
+}

style/search.scss

@@ -1,8 +1,6 @@
-@import 'theme.scss';
+@import "theme.scss";
 
 .search-container {
-    width: calc(100% - 22rem);
-    background: green;
-    height: 100vh;
-  }
-  
+  width: calc(100% - 22rem - 16rem);
+  
+}

style/sidebar.scss

@@ -1,26 +1,26 @@
 @import "theme.scss";
 
 .sidebar-container {
-  background-color: red;
+  background-color: transparent;
   width: 22rem;
   height: calc(100% - 75px);
 }
 
 .sidebar-top-container {
   border-radius: 1rem;
-  background-color: darkblue;
-  height: 10rem;
-  margin: 5px;
-  padding: 0.2rem 1rem 1rem 1rem;
+  background-color: #1c1c1c;
+  height: 9rem;
+  margin: 3px;
+  padding: 0.1rem 1rem 1rem 1rem;
 }
 
 .sidebar-top-container .header {
-  font-size: 1.4rem;
+  font-size: 1.2rem;
 }
 .sidebar-top-container .buttons {
   display: flex;
   flex-direction: row;
-  font-size: 2rem;
+  font-size: 1.8rem;
   align-items: center;
   transition: all 0.5s;
   cursor: pointer;
@@ -32,10 +32,22 @@
 
 .sidebar-top-container .buttons:last-child {
   margin-left: 0.02rem;
+  margin-top: 0.5rem;
 }
 
 .sidebar-top-container h1 {
-  font-size: 1.1rem;
-  margin-left: 0.8rem;
-  font-weight: 200;
+  font-size: 0.95rem;
+  margin-left: 0.9rem;
+  font-weight: 400;
+  font-style: $standard-font;
+  letter-spacing: 0.5px;
+}
+
+.sidebar-bottom-container {
+  border-radius: 1rem;
+  background-color: #1c1c1c;
+  margin: 3px;
+  margin-top: 6px;
+  padding: 0.2rem 1rem 1rem 1rem;
+  height: calc(100% - 9rem);
 }

style/theme.scss

@@ -1,3 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300,400,500,700,800;1,300,400,500,600,800&display=swap');
+
+$standard-font: 'Open Sans', sans-serif;
+
 $background-color: #030303;
 $accent-color: #4032a8;
 $text-controls-color: #e0e0e0;