UI: Improve inline TOC component

fuma-nama · Oct 15, 2023 · 1cb6385 · 1cb6385
1 parent 27ce871
commit 1cb6385
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/.changeset/clean-ducks-rest.md b/.changeset/clean-ducks-rest.md
@@ -0,0 +1,5 @@
+---
+'next-docs-ui': patch
+---
+
+Improve Inline TOC component
diff --git a/packages/next-docs-ui/src/components/inline-toc.tsx b/packages/next-docs-ui/src/components/inline-toc.tsx
@@ -1,7 +1,7 @@
 'use client'
 
-import { cn } from '@/utils/cn'
 import * as Collapsible from '@radix-ui/react-collapsible'
+import { ChevronDown } from 'lucide-react'
 import type { TOCItemType } from 'next-docs-zeta/server'
 import type { ReactNode } from 'react'
 
@@ -21,8 +21,9 @@ export function InlineTOC({
     >
       <Collapsible.Trigger asChild>
         {children ?? (
-          <button className="nd-font-medium nd-p-4 nd-w-full nd-text-left">
+          <button className="nd-inline-flex nd-items-center nd-justify-between nd-font-medium nd-p-4 nd-w-full [&[data-state=open]>svg]:nd-rotate-180">
             Table of Contents
+            <ChevronDown className="nd-h-4 nd-w-4 nd-transition-transform nd-duration-200" />
           </button>
         )}
       </Collapsible.Trigger>
@@ -32,12 +33,10 @@ export function InlineTOC({
             <a
               key={item.url}
               href={item.url}
-              className={cn(
-                'nd-py-1.5 nd-border-l hover:nd-border-primary',
-                item.depth <= 2 && 'nd-pl-4',
-                item.depth === 3 && 'nd-pl-7',
-                item.depth >= 4 && 'nd-pl-10'
-              )}
+              className="nd-py-1.5 nd-border-l hover:nd-border-primary"
+              style={{
+                paddingLeft: 16 * Math.max(item.depth - 1, 1)
+              }}
             >
               {item.title}
             </a>