Make sure arrows are aligned with nested folders (#812)

* make arrows aligned * add changeset * use className prop
shuding · Sep 5, 2022 · d6d5ab8 · d6d5ab8
1 parent 4731fa7
commit d6d5ab8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/lemon-cycles-turn.md b/.changeset/lemon-cycles-turn.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+Make sure arrows are aligned
diff --git a/packages/nextra-theme-docs/src/components/collapse.tsx b/packages/nextra-theme-docs/src/components/collapse.tsx
@@ -1,10 +1,13 @@
 import React, { useRef, useEffect, ReactElement } from 'react'
+import cn from 'clsx'
 
 export function Collapse({
   children,
+  className,
   open
 }: {
   children: React.ReactNode
+  className?: string
   open: boolean
 }): ReactElement {
   const containerRef = useRef<HTMLDivElement>(null)
@@ -70,7 +73,10 @@ export function Collapse({
     >
       <div
         ref={innerRef}
-        className="p-2 transform-gpu overflow-hidden transition-opacity duration-500 ease-in-out motion-reduce:transition-none"
+        className={cn(
+          'p-2 transform-gpu overflow-hidden transition-opacity duration-500 ease-in-out motion-reduce:transition-none',
+          className
+        )}
         style={{
           opacity: initialState.current ? 1 : 0
         }}

diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -113,7 +113,7 @@ function FolderImpl({ item, anchors }: FolderProps) {
           )}
         />
       </Anchor>
-      <Collapse open={open}>
+      <Collapse className="ltr:pr-0 rtl:pl-0" open={open}>
         {Array.isArray(item.children) ? (
           <Menu
             submenu