dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

tone down sidebar demo icons and clip preview corners

Browse Source
This commit is contained in:
Danny White committed 2026-10-02 17:22:04 +10:00
1 parent a95221415b
commit 6af67b96f6
3 files changed
+77 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/registry/default/example/sidebar-collapsible-icon.tsx
+39 -33
View File
@@ -24,40 +24,46 @@ const items = [
{ title: 'Settings', url: '#', icon: Settings },
]
const menuButtonClassName =
'[&>svg]:size-4 text-foreground-muted data-[active=true]:text-foreground'
export default function SidebarCollapsibleIcon() {
return (
<SidebarProvider defaultOpen className="h-[480px] min-h-0! w-full overflow-hidden">
<Sidebar collapsible="icon">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={item.title === 'Home'}
tooltip={item.title}
>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
<SidebarInset>
<header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1" />
</header>
</SidebarInset>
</SidebarProvider>
<div className="h-[480px] w-full overflow-hidden">
<SidebarProvider defaultOpen className="h-full min-h-0!">
<Sidebar collapsible="icon" className="[&_[data-sidebar=sidebar]]:bg-transparent">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={item.title === 'Home'}
tooltip={item.title}
className={menuButtonClassName}
>
<a href={item.url}>
<item.icon strokeWidth={1.5} />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarRail />
</Sidebar>
<SidebarInset>
<header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1 text-foreground-muted" />
</header>
</SidebarInset>
</SidebarProvider>
</div>
)
}
apps/design-system/registry/default/example/sidebar-demo.tsx
+37 -28
View File
@@ -23,35 +23,44 @@ const items = [
{ title: 'Settings', url: '#', icon: Settings },
]
const menuButtonClassName =
'[&>svg]:size-4 text-foreground-muted data-[active=true]:text-foreground'
export default function SidebarDemo() {
return (
<SidebarProvider className="h-[480px] min-h-0! w-full overflow-hidden">
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={item.title === 'Home'}>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1" />
</header>
</SidebarInset>
</SidebarProvider>
<div className="h-[480px] w-full overflow-hidden">
<SidebarProvider className="h-full min-h-0!">
<Sidebar className="[&_[data-sidebar=sidebar]]:bg-transparent">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton
asChild
isActive={item.title === 'Home'}
className={menuButtonClassName}
>
<a href={item.url}>
<item.icon strokeWidth={1.5} />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>
<header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
<SidebarTrigger className="-ml-1 text-foreground-muted" />
</header>
</SidebarInset>
</SidebarProvider>
</div>
)
}
packages/ui/src/components/shadcn/ui/sidebar.tsx
+1 -1
View File
@@ -277,7 +277,7 @@ const SidebarTrigger = React.forwardRef<
}}
{...props}
>
<PanelLeft />
<PanelLeft className="size-4" />
<span className="sr-only">Toggle Sidebar</span>
</Button>
)