fix: collapsible trigger only if more than 2 subitems

pmndrs · Sep 3, 2024 · c3ccc0d · c3ccc0d
1 parent 75a130d
commit c3ccc0d
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/src/components/Nav/NavCategory.tsx b/src/components/Nav/NavCategory.tsx
@@ -31,6 +31,8 @@ export function NavCategory({
  document.documentElement.style.setProperty('--collapsible-up-duration', dur)
  }, [])
 
+ const nonIndexItems = docsEntries.filter(([page]) => page !== INDEX_PAGE)
+
  return (
  <Collapsible.Root
  className={cn(
@@ -48,27 +50,27 @@ export function NavCategory({
  >
  {category.replace(/\-/g, ' ')}
  </NavItem>
- <Collapsible.Trigger
- asChild
- className={cn('absolute right-0 top-1/2 transition-transform', open && 'rotate-90')}
- >
- <div className="-translate-y-1/2 p-[--NavItem-pad]">
- <IoIosArrowDown className="size-4 -rotate-90" />
- </div>
- </Collapsible.Trigger>
+ {nonIndexItems.length > 0 && (
+ <Collapsible.Trigger
+ asChild
+ className={cn('absolute right-0 top-1/2 transition-transform', open && 'rotate-90')}
+ >
+ <div className="-translate-y-1/2 p-[--NavItem-pad]">
+ <IoIosArrowDown className="size-4 -rotate-90" />
+ </div>
+ </Collapsible.Trigger>
+ )}
  </div>
 
  <Collapsible.Content className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
  <ul>
- {docsEntries
- .filter(([page]) => page !== INDEX_PAGE)
- .map(([page, doc]) => (
- <li key={page}>
- <NavItem href={doc.url} active={doc.url === `/${asPath}`} className="text-xs">
- {doc.title}
- </NavItem>
- </li>
- ))}
+ {nonIndexItems.map(([page, doc]) => (
+ <li key={page}>
+ <NavItem href={doc.url} active={doc.url === `/${asPath}`} className="text-xs">
+ {doc.title}
+ </NavItem>
+ </li>
+ ))}
  </ul>
  </Collapsible.Content>
  </Collapsible.Root>