mirror of
https://github.com/supabase/supabase.git
synced 2026-07-03 08:04:21 +08:00
0035920bf1
* SheetProvider in studio * mobile global nav * view sub navigation * fix ProjectLayout conditional * Account mobile layout * width * hide * layout * overflow * responsive button * overflow * fix mobile nav if IS_PLATFORM * refactor * hide if no content * show command menu item on mobile * ui-patterns sheet provider * use client * show if productMenu * show if productMenu * drag to close * drag to close * 16px input fontsize on inputs to avoid zoom on mobile * offscreen test element * offscreen test element * offscreen test element * update test * update test * update test * pb * test? * test * test * test * spec-click-target * remove console * remove unused import * add dependency to sheet content * close sheet on router.asPath change * remove provider and use simple Sheet * update sidebar mobile * align labels * avoid input zoom on mobile * remove yo
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { ComponentProps, ReactNode, forwardRef } from 'react'
|
|
import { Button, cn } from 'ui'
|
|
|
|
export const NavigationIconButton = forwardRef<
|
|
HTMLButtonElement,
|
|
Omit<
|
|
ComponentProps<typeof Button>,
|
|
// omit other icon props to avoid confusion
|
|
// using `icon` instead as there is only 1 use case for this component
|
|
'iconRight' | 'iconLeft'
|
|
> & {
|
|
rightText?: ReactNode
|
|
}
|
|
>(({ icon, rightText, ...props }, ref) => {
|
|
return (
|
|
<Button
|
|
ref={ref}
|
|
type="text"
|
|
size="tiny"
|
|
{...props}
|
|
className={cn(
|
|
'h-10 [&>span]:relative [&>span]:items-center [&>span]:gap-3 [&>span]:flex [&>span]:w-full [&>span]:h-full p-0',
|
|
props.className
|
|
)}
|
|
>
|
|
<div className="absolute left-2 text-foreground-lighter">{icon}</div>
|
|
<span
|
|
className={cn(
|
|
'absolute left-10 md:left-7 md:group-data-[state=expanded]:left-10',
|
|
'opacity-100 md:opacity-0 md:group-data-[state=expanded]:opacity-100',
|
|
'w-[10rem] text-sm flex flex-col items-center',
|
|
'transition-all'
|
|
)}
|
|
>
|
|
<span className="w-full text-left text-foreground-light truncate">{props.children}</span>
|
|
</span>
|
|
{rightText && (
|
|
<div
|
|
className={cn(
|
|
'absolute right-2 flex items-center',
|
|
'opacity-100 md:opacity-0 transition-all',
|
|
'md:group-data-[state=expanded]:opacity-100 '
|
|
)}
|
|
>
|
|
{rightText}
|
|
</div>
|
|
)}
|
|
</Button>
|
|
)
|
|
})
|
|
|
|
NavigationIconButton.displayName = 'NavigationIconButton'
|