Restyle Sidebar. Make table hover shade lighter.

scss/elements/_sidebar.scss

@@ -8,15 +8,13 @@
   flex-shrink: 0;
 
   min-height: 100vh;
-  width: 200px;
-  padding: 5px 10px;
+  width: 240px;
+  padding: 0.25rem 0.75rem;
 
   background-color: $white;
 
-  transition: none;
-
-  &-brand {
-    margin: 10px;
+  .sidebar-brand {
+    margin: 0.75rem 1rem;
     font-size: 1.125rem;
     text-decoration: none;
 
@@ -25,65 +23,28 @@
     }
   }
 
-  &-header {
-    margin: 10px 10px 5px;
-    font-weight: bold;
-    color: $secondary;
-  }
-
-  &-link {
-    padding: 10px 10px;
-    border-radius: 5px;
-    color: $secondary;
-    text-decoration: none;
-
-    &:hover {
-      color: $primary;
-      background-color: $primary-50;
-      text-decoration: none;
-    }
-  }
-
-  &-btn-collapse {
-    margin-top: 10px;
-  }
-
-  .sidebar-collapsed-shown {
-    display: none;
-  }
-}
-
-.sidebar-collapsed {
-  width: 60px;
-  padding: 5px 5px;
-  overflow-y: overlay;
-
-  transition: width 0.25s;
-
-  .sidebar-brand {
-    text-align: center;
-
-    span {
-      display: none;
-    }
-  }
-
   .sidebar-header {
-    display: none;
+    margin: 1rem 1rem 0.25rem;
+    color: $secondary;
+    font-weight: bold;
+    font-size: 0.875rem;
   }
 
   .sidebar-link {
-    padding: 10px 15px;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    color: $secondary;
+    text-decoration: none;
 
-    span {
-      display: none;
+    &.active {
+      color: $primary;
+      background-color: $primary-50;
+    }
+
+    &:hover {
+      color: $gray-800;
+      background-color: $gray-200;
+      text-decoration: none;
     }
   }
-
-  .sidebar-collapsed-hidden {
-    display: none;
-  }
-  .sidebar-collapsed-shown {
-    display: inline;
-  }
 }