Skip to content

Commit

Permalink
refactor: add scroll area on doc sidebar
Browse files Browse the repository at this point in the history
mickasmt committed Mar 15, 2024
1 parent bf33db0 commit cc6752c
Showing 3 changed files with 26 additions and 12 deletions.
18 changes: 9 additions & 9 deletions src/components/ui/scroll-area.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";

import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";

const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -18,8 +18,8 @@ const ScrollArea = React.forwardRef<
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -33,14 +33,14 @@ const ScrollBar = React.forwardRef<
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 border-t border-t-transparent p-[1px]",
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

export { ScrollArea, ScrollBar }
export { ScrollArea, ScrollBar };
9 changes: 6 additions & 3 deletions src/pages/docs/[...slug].astro
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import DocsSidebarNav from "@/components/layout/sidebar-nav.astro";
import DocsPageHeader from "@/components/page-header.astro";
import DocsPager from "@/components/pager.astro";
import { DashboardTableOfContents } from "@/components/toc";
import { ScrollArea } from "@/components/ui/scroll-area";
import { docsConfig } from "@/config/docs";
import DocsLayout from "@/layouts/docs-layout.astro";
import { getTableOfContents } from "@/lib/toc";
@@ -39,12 +40,14 @@ if (!slug || !doc) {
class="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10"
>
<aside
class="fixed top-18 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r py-6 pr-2 md:sticky md:block lg:py-8"
class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
>
<DocsSidebarNav items={docsConfig.sidebarNav} />
<ScrollArea className="h-full py-6 pr-6 lg:py-8" client:load>
<DocsSidebarNav items={docsConfig.sidebarNav} />
</ScrollArea>
</aside>
<main
class="relative py-6 lg:gap-10 lg:py-10 xl:grid xl:grid-cols-[1fr_300px]"
class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]"
>
<div class="mx-auto w-full min-w-0">
<DocsPageHeader
11 changes: 11 additions & 0 deletions src/styles/globals.css
Original file line number Diff line number Diff line change
@@ -172,4 +172,15 @@

.dark .card_border:hover {
box-shadow: 0 0 0 1px white;
}

/* Custom scrollbar */
[data-radix-scroll-area-viewport] {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}

[data-radix-scroll-area-viewport]::-webkit-scrollbar {
display: none
}

0 comments on commit cc6752c

Please sign in to comment.