fixed sidebar position over content, added effect for hovering over links

src/app/app.component.css

@@ -1,15 +1,20 @@
-.sidebar-wrapper {
+.sidebar {
-    position: relative;
+  width: 150px;
-    margin-top: 0px;
+  position: relative;
+  float: left;
+  margin-top: 10px;
 }
 
-.sidebar {
+.nav a {
-    position: absolute;
+    font-size: 1em;
-    width: 15%;
+}
+
+.nav a:hover:not(.active) {
+    font-size: 1.15em;
+  }
+
+.content {
+    position: relative;
+    float: right;
     margin-top: 10px;
 }
-
-.sidebar a:hover:not(.active) {
-  background-color: indigo;
-  color: white;
-}

src/app/app.component.html

@@ -1,16 +1,12 @@
 <div class="container-fluid">
 
   <div class="sidebar">
-    <!--
+    <div class="logo">
-        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
+      <a class="simple-text logo-normal">
-    -->
+        Taskboard
-    <div class="sidebar-wrapper">
+      </a>
-      <div class="logo">
+    </div>
-        <a href="javascript:void(0)" class="simple-text logo-normal">
+      <ul class="nav">
-          Taskboard
-        </a>
-      </div>
-      <ul class="nav" data-color="blue">
         <li class="active ">
           <a href="/dashboard">
             <p>Dashboard</p>
@@ -32,14 +28,12 @@
           </a>
         </li>
       </ul>
-    </div>
   </div>
 
-  <div class="container">
+  <router-outlet></router-outlet>
-    <router-outlet></router-outlet>
-  </div>
 
-  <div class=" fixed-plugin">
+  <div class="content">
+    <div class=" fixed-plugin">
       <div class=" show-dropdown" ngbDropdown>
         <a data-toggle="dropdown" ngbDropdownToggle>
           <i class="fa fa-cog fa-2x"></i>
@@ -76,5 +70,6 @@
           </li>
         </ul>
       </div>
+    </div>
   </div>
 </div>