esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix header actions layout on mobile

Browse source
This commit is contained in:
Esdras Renan 2025-10-08 00:10:52 -03:00
parent b880aa3ea6
commit 51b38eb608
1 changed files with 50 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/site-header.tsx
View file

@ -1,8 +1,9 @@
import type { ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar"
import type { ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { SidebarTrigger } from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"
interface SiteHeaderProps {
title: string
@ -11,46 +12,48 @@ interface SiteHeaderProps {
secondaryAction?: ReactNode
}
export function SiteHeader({
title,
lead,
primaryAction,
secondaryAction,
}: SiteHeaderProps) {
return (
<header className="flex h-(--header-height) shrink-0 items-center gap-3 border-b bg-background/80 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height) lg:px-8">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mx-3 hidden h-6 sm:block" />
<div className="flex flex-1 flex-col gap-1">
{lead ? <span className="text-sm text-muted-foreground">{lead}</span> : null}
<h1 className="text-lg font-semibold">{title}</h1>
</div>
<div className="flex items-center gap-2">
{secondaryAction}
{primaryAction}
</div>
</header>
)
}
export function SiteHeader({
title,
lead,
primaryAction,
secondaryAction,
}: SiteHeaderProps) {
return (
<header className="flex h-auto shrink-0 flex-wrap items-start gap-3 border-b bg-background/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/60 transition-[width,height] ease-linear sm:h-(--header-height) sm:flex-nowrap sm:items-center sm:px-6 lg:px-8 sm:group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mx-3 hidden h-6 sm:block" />
<div className="flex flex-1 flex-col gap-1">
{lead ? <span className="text-sm text-muted-foreground">{lead}</span> : null}
<h1 className="text-lg font-semibold">{title}</h1>
</div>
<div className="flex w-full flex-col items-stretch gap-2 sm:w-auto sm:flex-row sm:items-center">
{secondaryAction}
{primaryAction}
</div>
</header>
)
}
SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({
children,
...props
}: React.ComponentProps<typeof Button>) {
return (
<Button size="sm" {...props}>
{children}
</Button>
)
}
SiteHeader.SecondaryButton = function SiteHeaderSecondaryButton({
children,
...props
}: React.ComponentProps<typeof Button>) {
return (
<Button size="sm" variant="outline" {...props}>
{children}
</Button>
)
}
SiteHeader.PrimaryButton = function SiteHeaderPrimaryButton({
children,
className,
...props
}: React.ComponentProps<typeof Button>) {
return (
<Button size="sm" className={cn("w-full sm:w-auto", className)} {...props}>
{children}
</Button>
)
}
SiteHeader.SecondaryButton = function SiteHeaderSecondaryButton({
children,
className,
...props
}: React.ComponentProps<typeof Button>) {
return (
<Button size="sm" variant="outline" className={cn("w-full sm:w-auto", className)} {...props}>
{children}
</Button>
)
}