qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Integrate Lina (ScrollArea and ScrollAreaScrollbar) into sidebar layout for improved scrolling and organization of categories

Browse Source
This commit is contained in:
SameerJS6
2025-09-26 09:01:11 +05:30
parent 6264d775cb
commit 7b81780642
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/sidebar.svelte
+13 -3
View File
@@ -4,6 +4,8 @@
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import ShowCategories from "@/components/layout/showCategories.svelte"; import ShowCategories from "@/components/layout/showCategories.svelte";
import ShowSidebarLinks from "@/components/layout/showSidebarLinks.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> </script>
<section> <section>
@@ -11,17 +13,25 @@
class={cn( class={cn(
"md:fixed md:left-1 md:h-[calc(100vh-4.5rem)]", "md:fixed md:left-1 md:h-[calc(100vh-4.5rem)]",
"overflow-x-hidden", "overflow-x-hidden",
"w-54 pr-2 pl-2", "w-54",
"hidden flex-col space-y-3 md:flex", "hidden flex-col space-y-3 md:flex",
"bg-neutral-100 dark:bg-neutral-950", "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 /> <ShowSidebarLinks />
</nav> </nav>
<div class="px-2">
<Separator orientation="horizontal" /> <Separator orientation="horizontal" />
<nav class="relative flex h-auto flex-col space-y-0.5 overflow-y-auto"> </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 /> <ShowCategories />
<ScrollAreaScrollbar orientation="vertical" />
</ScrollArea>
</nav> </nav>
</aside> </aside>
<main class={cn("px-2 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}> <main class={cn("px-2 md:mr-4 md:ml-56 md:px-0", "overflow-hidden")}>