sidebar size responsive

src/app/app.component.css

@@ -0,0 +1,15 @@
+.sidebar-wrapper {
+    position: relative;
+    margin-top: 0px;
+}
+
+.sidebar {
+    position: absolute;
+    width: 15%;
+    margin-top: 10px;
+}
+
+.sidebar a:hover:not(.active) {
+  background-color: indigo;
+  color: white;
+}

src/app/app.component.html

@@ -2,9 +2,9 @@
 
   <div class="sidebar">
     <!--
-      Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
+        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red"
-  -->
+    -->
-    <div class="sidebar-wrapper" ps>
+    <div class="sidebar-wrapper">
       <div class="logo">
         <a href="javascript:void(0)" class="simple-text logo-normal">
           Taskboard
@@ -13,70 +13,68 @@
       <ul class="nav" data-color="blue">
         <li class="active ">
           <a href="/dashboard">
-            <i class="tim-icons icon-chart-pie-36"></i>
             <p>Dashboard</p>
           </a>
         </li>
         <li>
           <a href="/sprints">
-            <i class="tim-icons icon-atom"></i>
             <p>Sprints</p>
           </a>
         </li>
         <li>
           <a href="/userstories">
-            <i class="tim-icons icon-pin"></i>
             <p>Userstories</p>
           </a>
         </li>
         <li>
           <a href="/tasks">
-            <i class="tim-icons icon-bell-55"></i>
             <p>Tasks</p>
           </a>
         </li>
       </ul>
-      <div class="ps__rail-x" style="left: 0px; bottom: 0px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 0px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div></div>
     </div>
   </div>
 
-<router-outlet></router-outlet>
+  <div class="container">
+    <router-outlet></router-outlet>
+  </div>
 
-<div class=" fixed-plugin">
+  <div class=" fixed-plugin">
-  <div class=" show-dropdown" ngbDropdown>
+      <div class=" show-dropdown" ngbDropdown>
-    <a data-toggle="dropdown" ngbDropdownToggle>
+        <a data-toggle="dropdown" ngbDropdownToggle>
-      <i class="fa fa-cog fa-2x"></i>
+          <i class="fa fa-cog fa-2x"></i>
-    </a>
-    <ul ngbDropdownMenu>
-      <!--
-      <li class=" header-title">Sidebar Background</li>
-      <li class=" adjustments-line">
-        <a class=" switch-trigger background-color" href="javascript:void(0)">
-          <div class=" badge-colors text-center">
-            <span
-              class=" badge filter badge-danger"
-              [ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
-            >
-            </span>
-            <span
-              class=" badge filter badge-primary"
-              [ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
-            >
-            </span>
-            <span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
-            <span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
-            </span>
-          </div>
-          <div class=" clearfix"></div>
         </a>
-      </li>
+        <ul ngbDropdownMenu>
-      -->
+          <!--
-      <li class=" adjustments-line text-center color-change">
+          <li class=" header-title">Sidebar Background</li>
-        <span class=" color-label"> LIGHT MODE </span>
+          <li class=" adjustments-line">
-        <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
+            <a class=" switch-trigger background-color" href="javascript:void(0)">
-        <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
+              <div class=" badge-colors text-center">
-        <span class=" color-label"> DARK MODE </span>
+                <span
-      </li>
+                  class=" badge filter badge-danger"
-    </ul>
+                  [ngClass]="{'active':sidebarColor==='red'}" (click)="changeSidebarColor('red')"
+                >
+                </span>
+                <span
+                  class=" badge filter badge-primary"
+                  [ngClass]="{'active':sidebarColor==='primary'}" (click)="changeSidebarColor('primary')"
+                >
+                </span>
+                <span class=" badge filter badge-info" [ngClass]="{'active':sidebarColor==='blue'}" (click)="changeSidebarColor('blue')"> </span>
+                <span class=" badge filter badge-success" [ngClass]="{'active':sidebarColor==='green'}" (click)="changeSidebarColor('green')">
+                </span>
+              </div>
+              <div class=" clearfix"></div>
+            </a>
+          </li>
+          -->
+          <li class=" adjustments-line text-center color-change">
+            <span class=" color-label"> LIGHT MODE </span>
+            <span class=" badge light-badge mr-2" (click)="changeDashboardColor('white-content')"> </span>
+            <span class=" badge dark-badge ml-2" (click)="changeDashboardColor('black-content')"> </span>
+            <span class=" color-label"> DARK MODE </span>
+          </li>
+        </ul>
+      </div>
   </div>
 </div>