From 3771a9e8fce013f1fd999c9c2105dd45b16bc24b Mon Sep 17 00:00:00 2001
From: Lncvrt <lncvrtreal@gmail.com>
Date: Sun, 10 May 2026 13:56:19 -0700
Subject: [PATCH] Add a blur effect to sidebar buttons when scrolling up

---
 src/components/Sidebar.tsx |  2 +-
 src/styles/sidebar.css     | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index f784fa9..eed247d 100644
--- a/src/components/Sidebar.tsx
+++ b/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'
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index 1c81479..1113724 100644
--- a/src/styles/sidebar.css
+++ b/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 {