From dd07e1888d4d74797cc059dd2ac5b34a18161ced Mon Sep 17 00:00:00 2001
From: SameerJS6 <singh6.sameer@gmail.com>
Date: Fri, 26 Sep 2025 09:03:00 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Integrate=20ScrollArea=20component?=
 =?UTF-8?q?=20into=20sidebarMobileMenu=20for=20enhanced=20scrolling=20and?=
 =?UTF-8?q?=20layout=20organization?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/sidebarMobileMenu.svelte | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/sidebarMobileMenu.svelte b/src/components/layout/sidebarMobileMenu.svelte
index 9bc4851..b0e3f3a 100644
--- a/src/components/layout/sidebarMobileMenu.svelte
+++ b/src/components/layout/sidebarMobileMenu.svelte
@@ -10,6 +10,7 @@
 
   import ShowCategories from "@/components/layout/showCategories.svelte";
   import ShowSidebarLinks from "@/components/layout/showSidebarLinks.svelte";
+  import ScrollArea from "@/components/ui/scroll-area/scroll-area.svelte";
 
   interface Props {
     className?: string;
@@ -33,10 +34,14 @@
         <h2 class="text-xl font-medium tracking-tight">svgl</h2>
       </Sheet.Title>
     </Sheet.Header>
-    <nav class="flex flex-col space-y-0.5 overflow-y-auto px-3 pb-3">
+    <ScrollArea
+      class="flex size-full flex-col"
+      viewportClassName="pb-3 px-3 space-y-0.5"
+      maskClassName="before:from-white after:from-white dark:before:from-neutral-900 dark:after:from-neutral-900"
+    >
       <ShowSidebarLinks />
       <Separator orientation="horizontal" class="my-3" />
       <ShowCategories />
-    </nav>
+    </ScrollArea>
   </Sheet.Content>
 </Sheet.Root>