From 7b817806428d74d490d984921eba9f56e92bb13e Mon Sep 17 00:00:00 2001
From: SameerJS6 <singh6.sameer@gmail.com>
Date: Fri, 26 Sep 2025 09:01:11 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Integrate=20Lina=20(ScrollArea=20an?=
 =?UTF-8?q?d=20ScrollAreaScrollbar)=20into=20sidebar=20layout=20for=20impr?=
 =?UTF-8?q?oved=20scrolling=20and=20organization=20of=20categories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/sidebar.svelte | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/sidebar.svelte b/src/components/layout/sidebar.svelte
index fbbf470..9e9b2e0 100644
--- a/src/components/layout/sidebar.svelte
+++ b/src/components/layout/sidebar.svelte
@@ -4,6 +4,8 @@
   import { Separator } from "@/components/ui/separator";
   import ShowCategories from "@/components/layout/showCategories.svelte";
   import ShowSidebarLinks from "@/components/layout/showSidebarLinks.svelte";
+  import ScrollArea from "@/components/ui/scroll-area/scroll-area.svelte";
+  import ScrollAreaScrollbar from "@/components/ui/scroll-area/scroll-area-scrollbar.svelte";
 </script>
 
 <section>
@@ -11,17 +13,25 @@
     class={cn(
       "md:fixed md:left-1 md:h-[calc(100vh-4.5rem)]",
       "overflow-x-hidden",
-      "w-54 pr-2 pl-2",
+      "w-54",
       "hidden flex-col space-y-3 md:flex",
       "bg-neutral-100 dark:bg-neutral-950",
     )}
   >
-    <nav class="flex flex-col space-y-0.5">
+    <nav class="flex flex-col space-y-0.5 px-2">
       <ShowSidebarLinks />
     </nav>
-    <Separator orientation="horizontal" />
-    <nav class="relative flex h-auto flex-col space-y-0.5 overflow-y-auto">
-      <ShowCategories />
+    <div class="px-2">
+      <Separator orientation="horizontal" />
+    </div>
+    <nav class="relative flex h-auto flex-col space-y-0.5 overflow-hidden">
+      <ScrollArea
+        maskClassName="before:from-neutral-100 after:from-neutral-100 dark:before:from-neutral-950 dark:after:from-neutral-950"
+        class="flex size-full flex-col gap-y-0.5 overflow-hidden px-2"
+      >
+        <ShowCategories />
+        <ScrollAreaScrollbar orientation="vertical" />
+      </ScrollArea>
     </nav>
   </aside>
   <main class={cn("px-2 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}>