filters and sidebar

front/sass/_sidebar.scss

@@ -1,49 +1,89 @@
+.sidebar-top{
+
+  font-size: 18px;
+  padding: 20px 20px ;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--background);
+  filter: brightness(97%);
+  margin-bottom: 15px;
+  border-radius: 12px;
+}
 
 .sidebar {
-  border: 1px solid $border-color;
+  border: 0px solid var(--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%);
+  padding: 20px;
+  background: var(--background);
+  filter: brightness(97%);
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
 
 .sidebar-header {
-  background: $background;
+  display: flex;
+  cursor: pointer;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--background);
   font-size: 16px;
-  padding: 12px 12px 6px;
-  color: $text;
+  padding: 3px 12px 6px;
+  color: var(--text);
   filter: brightness(94%);
+  border-bottom: 0px solid var(--border-color);
+  border-radius: 12px;
+  &:hover {
+    background: var(--secondary);
+  }
 
   &:first-child {
+  }
+
+  &:last-child {
     border-bottom: none;
-    border-radius: 12px 12px 0 0;
   }
 }
 
 .sidebar-item {
 
-  color: $text;
+  color: var(--text);
   display: block;
   font-size: 14px;
-  padding: 6px 12px;
+  padding: 3px 12px;
   text-decoration: none;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 0px solid var(--border-color);
   transition: 600ms;
-
+  border-radius: 12px;
   &:last-child {
     border-bottom: none;
-    border-radius: 0 0 12px 12px;
   }
 
   &:hover {
-    background: $secondary;
+    background: var(--secondary);
   }
 
   &.active {
-    background: $secondary;
+    background: var(--secondary);
   }
 }
+
+.top-nav{
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 10px;
+}
+.top-nav-item{
+  border-radius: 12px;
+  font-size: 14px;
+  filter: brightness(97%);
+  background: var(--background);
+  padding: 3px 10px ;
+  &:hover {
+    background: var(--secondary);
+  }
+}