Add a blur effect to sidebar buttons when scrolling up

src/components/Sidebar.tsx

@@ -91,7 +91,7 @@ export default function Sidebar () {
           Lncvrt Games Launcher
         </p>
       </div>
-      <nav className='nav-links overflow-auto pt-2'>
+      <nav className='nav-links overflow-auto'>
         <Link
           draggable={false}
           href='/main'

src/styles/sidebar.css

@@ -14,7 +14,23 @@
 }
 
 .nav-links {
-  @apply flex flex-col px-4 space-y-1;
+  @apply flex flex-col px-4 space-y-1 pt-3;
+
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 12px,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 12px,
+    black calc(100% - 24px),
+    transparent 100%
+  );
 }
 
 .link {