improved sidebar smoothness and status feddback

src/styles/scss/base/_animations.scss

@@ -49,3 +49,14 @@
 		transform: rotate(360deg);
 	}
 }
+
+// You can find a better name, I have no ideas
+@keyframes grayscalize {
+	from {
+		filter: grayscale(0);
+	}
+
+	to {
+		filter: grayscale(1);
+	}
+}

src/styles/scss/base/_base.scss

@@ -3,7 +3,6 @@ html {
 
 	--main-scroll: hsl(0, 0%, 33%);
 	--panels-scroll: hsl(180, 2%, 17%);
-	--accent-color: hsl(210, 100%, 52%);
 	--tag-background: hsl(210, 100%, 38%);
 	--tag-text: hsl(0, 0%, 100%);
 	--toast-background: hsla(0, 0%, 0%, 0.867);
@@ -19,10 +18,14 @@ html[data-theme='light'] {
 	--secondary-background: hsl(0, 0%, 93%);
 	--foreground: hsl(0, 0%, 20%);
 	--foreground-inverted: hsl(0, 0%, 93%);
+	--accent-color: hsl(210, 100%, 52%);
 	--panels-background: hsl(210, 3%, 14%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 0%);
 
+	--sidebar-link-bg: hsl(0, 0%, 24%);
+	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
+
 	--table-bg: hsl(0, 0%, 100%);
 	--table-zebra: hsl(0, 0%, 79%);
 	--table-highlight: hsl(0, 0%, 56%);
@@ -33,10 +36,14 @@ html[data-theme='dark'] {
 	--secondary-background: hsl(0, 0%, 14%);
 	--foreground: hsl(0, 0%, 93%);
 	--foreground-inverted: hsl(0, 0%, 20%);
+	--accent-color: hsl(210, 100%, 52%);
 	--panels-background: hsl(0, 0%, 10%);
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);
 
+	--sidebar-link-bg: hsl(0, 0%, 24%);
+	--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
+
 	--table-bg: hsl(0, 0%, 8%);
 	--table-zebra: hsl(0, 0%, 14%);
 	--table-highlight: hsl(0, 0%, 20%);
@@ -52,6 +59,9 @@ html[data-theme='purple'] {
 	--panels-text: hsl(0, 0%, 100%);
 	--accent-text: hsl(0, 0%, 87%);
 
+	--sidebar-link-bg: hsl(257, 70%, 17%);
+	--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
+
 	--table-bg: hsl(261, 74%, 6%);
 	--table-zebra: hsl(257, 61%, 10%);
 	--table-highlight: hsl(257, 66%, 27%);

src/styles/scss/base/_variables.scss

@@ -0,0 +1 @@
+$sidebar-width: 48px;