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

src/app/app.component.css

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

src/app/app.component.html

@@ -1,16 +1,12 @@
 <div class="container-fluid">
 
   <div class="sidebar">
-    <!--
-        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
-    -->
-    <div class="sidebar-wrapper">
     <div class="logo">
-        <a href="javascript:void(0)" class="simple-text logo-normal">
+      <a class="simple-text logo-normal">
         Taskboard
       </a>
     </div>
-      <ul class="nav" data-color="blue">
+      <ul class="nav">
         <li class="active ">
           <a href="/dashboard">
             <p>Dashboard</p>
@@ -33,12 +29,10 @@
         </li>
       </ul>
   </div>
-  </div>
 
-  <div class="container">
   <router-outlet></router-outlet>
-  </div>
 
+  <div class="content">
     <div class=" fixed-plugin">
       <div class=" show-dropdown" ngbDropdown>
         <a data-toggle="dropdown" ngbDropdownToggle>
@@ -77,4 +71,5 @@
         </ul>
       </div>
     </div>
+  </div>
 </div>