mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Anthony Lio
c145f3e046
## What kind of change does this PR introduce? visual parity fix and refresh + component extraction (stacked on #49942) ## What is the current behavior? guide and reference sidebars each hand-roll their own collapsible section visuals ## What is the new behavior? - adds `NavSection` composition components (`NavSectionCaret`, `NavSectionContent`, `NavSectionList`) shared by both navs via radix `asChild`, so the rail, caret, and motion have a single source of truth - fixes ui drift between both so navs get the same left rail beside expanded children, the same caret and animation - enhances link click area so space between rows is part of the click target | state | preview | | -------|------| | before | <img width="430" height="288" alt="image" src="https://github.com/user-attachments/assets/0052d4b7-7793-43cf-8416-2a5445b95148" /> | | after | <img width="430" height="288" alt="image" src="https://github.com/user-attachments/assets/42713ee3-e147-4e53-a58d-3f3de278264d" /> | ## How to test? 1. run `pnpm dev:docs` 2. open [guide page](http://localhost:3001/docs/guides/integrations/build-a-supabase-oauth-integration) 3. open [reference page](http://localhost:3001/docs/reference/dart/introduction) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added animated expand/collapse behavior and rotating caret indicators to documentation navigation sections. * Added active-child indicators for clearer navigation context. * **Improvements** * Standardized spacing, borders, and animation styles across guide and reference navigation. * Improved collapsible animations to support varying content sizes more reliably. * Navigation items without links or child content, including disabled nested items, are no longer displayed. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
26 lines
808 B
TypeScript
26 lines
808 B
TypeScript
import { ChevronDown } from 'lucide-react'
|
|
import type { HTMLAttributes } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
export const NavSectionCaret = ({ className }: { className?: string }) => (
|
|
<ChevronDown
|
|
width={16}
|
|
className={cn('data-open-parent:rotate-0 data-closed-parent:-rotate-90 transition', className)}
|
|
/>
|
|
)
|
|
|
|
export const NavSectionList = ({ className, ...props }: HTMLAttributes<HTMLUListElement>) => (
|
|
<ul className={cn('leading-5', className)} {...props} />
|
|
)
|
|
|
|
export const NavSectionContent = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (
|
|
<div
|
|
className={cn(
|
|
'border-l border-muted pl-3 ml-1 mt-0.5',
|
|
'overflow-hidden data-open:animate-slide-down data-closed:animate-slide-up motion-reduce:animate-none',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|