transition

front/sass/_sidebar.scss

@@ -1,89 +1,49 @@
 
 .sidebar {
-    background-color: $dark;
-    min-height: 100vh;
-    font-size: 15px;
-    line-height: 28px;
+  border: 1px solid $border-color;
+  border-radius: 12px;
+  min-height: 100vh;
+  font-size: 15px;
+  line-height: 28px;
+  min-width: 300px;
+  max-width: 400px;
+  background: $background;
+  filter: brightness(104%);
 }
 
 .sidebar-header {
-    color: $white;
-    position: relative;
-    padding: 0 10px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    &:hover .actions {
-        visibility: visible;
-    }
-}
+  background: $background;
+  font-size: 16px;
+  padding: 12px 12px 6px;
+  color: $text;
+  filter: brightness(94%);
 
-.sidebar .actions {
-    position: absolute;
-    top: 0px;
-    right: 8px;
-    background-color: $dark;
-    visibility: hidden;
-}
-.sidebar .sidebar-header .actions {
-    background-color: $dark;
-}
-.sidebar .sidebar-item .actions {
-    background-color: $white;
-}
-
-.sidebar .sidebar-item.active .actions {
-    background-color: $primary;
-}
-.sidebar .sidebar-header .actions a,
-.sidebar .sidebar-header .actions span {
-    color: $white !important;
-    cursor: pointer;
-}
-
-.sidebar .sidebar-item .actions a {
-    color: $dark !important;
-    cursor: pointer;
-}
-
-.sidebar .sidebar-item.active .actions a {
-    color: $white !important;
-    cursor: pointer;
+  &:first-child {
+    border-bottom: none;
+    border-radius: 12px 12px 0 0;
+  }
 }
 
 .sidebar-item {
-    a {
-        color: $white;
-        text-decoration: none;
-        padding: 0 0px;
-    }
-    &:hover {
-        background-color: $light;
-        a {
-            color: $dark;
-        }
-    }
-    position: relative;
-    padding: 0 10px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: $white;
-    &:hover .actions {
-        visibility: visible;
-    }
 
-    
-}
+  color: $text;
+  display: block;
+  font-size: 14px;
+  padding: 6px 12px;
+  text-decoration: none;
+  border-bottom: 1px solid $border-color;
+  transition: 600ms;
 
-.sidebar hr {
-    color: $white;
-    line-height: 30px;
-}
+  &:last-child {
+    border-bottom: none;
+    border-radius: 0 0 12px 12px;
+  }
 
-.sidebar .active {
-    background-color: $primary;
-    a {
-        color: $white;
-    }
+  &:hover {
+    background: $secondary;
+  }
+
+  &.active {
+    background: $secondary;
+  }
 }