Ajusta marca na sidebar
All checks were successful
CI/CD Web + Desktop / Detect changes (push) Successful in 6s
CI/CD Web + Desktop / Deploy (VPS Linux) (push) Successful in 3m40s
CI/CD Web + Desktop / Deploy Convex functions (push) Has been skipped
Quality Checks / Lint, Test and Build (push) Successful in 4m2s

This commit is contained in:
rever-tecnologia 2025-12-19 00:17:11 -03:00
parent 0a0f722bd8
commit badcb0f502
3 changed files with 31 additions and 14 deletions

View file

@ -1646,7 +1646,7 @@ const resolvedAppUrl = useMemo(() => {
alt="Logotipo Raven"
width={160}
height={160}
className="h-14 w-auto md:h-16"
className="h-16 w-auto md:h-20"
onError={() => {
if (logoFallbackRef.current) return
logoFallbackRef.current = true
@ -1655,9 +1655,14 @@ const resolvedAppUrl = useMemo(() => {
/>
<div className="flex flex-col items-center gap-2">
<span className="text-lg font-semibold text-neutral-900">Raven</span>
<span className="inline-flex whitespace-nowrap rounded-full bg-neutral-900 px-2.5 py-1 text-[11px] font-medium text-white">
Plataforma de chamados
</span>
<div className="flex flex-col items-center gap-1">
<span className="inline-flex whitespace-nowrap rounded-full bg-neutral-900 px-2.5 py-1 text-[11px] font-medium text-white">
Plataforma de
</span>
<span className="inline-flex whitespace-nowrap rounded-full bg-neutral-900 px-2.5 py-1 text-[11px] font-medium text-white">
Chamados
</span>
</div>
<StatusBadge status={status} />
</div>
</div>

View file

@ -263,6 +263,7 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
logoAlt="Logotipo Raven"
title="Raven"
subtitle="Plataforma de chamados"
showTitle={false}
/>
</SidebarHeader>
<SidebarContent>

View file

@ -20,26 +20,30 @@ interface SidebarBrandProps {
logoAlt: string
title: string
subtitle: string
showTitle?: boolean
}
export function SidebarBrand({ logoSrc, logoAlt, title, subtitle }: SidebarBrandProps) {
export function SidebarBrand({ logoSrc, logoAlt, title, subtitle, showTitle = true }: SidebarBrandProps) {
const { state } = useSidebar()
const isCollapsed = state === "collapsed"
const subtitleBadges = subtitle === "Plataforma de chamados"
? ["Plataforma de", "Chamados"]
: [subtitle]
const brandContent = (
<div className="flex items-center gap-3 transition-all duration-200 ease-linear">
<div className={cn(
"flex shrink-0 items-center justify-center transition-all duration-200 ease-linear",
isCollapsed ? "size-9" : "size-8"
isCollapsed ? "size-16" : "size-14"
)}>
<Image
src={logoSrc}
alt={logoAlt}
width={36}
height={36}
width={64}
height={64}
className={cn(
"object-contain transition-all duration-200 ease-linear",
isCollapsed ? "size-9" : "size-8"
isCollapsed ? "size-16" : "size-14"
)}
priority
/>
@ -48,10 +52,17 @@ export function SidebarBrand({ logoSrc, logoAlt, title, subtitle }: SidebarBrand
"flex flex-col items-start gap-1 leading-none transition-all duration-200 ease-linear overflow-hidden",
isCollapsed ? "w-0 opacity-0" : "w-auto opacity-100"
)}>
<span className="text-lg font-semibold whitespace-nowrap">{title}</span>
<span className="inline-flex whitespace-nowrap rounded-full bg-neutral-900 px-2.5 py-1 text-[11px] font-medium text-white">
{subtitle}
</span>
{showTitle ? <span className="text-lg font-semibold whitespace-nowrap">{title}</span> : null}
<div className="flex flex-col items-start gap-1.5">
{subtitleBadges.map((badge) => (
<span
key={badge}
className="inline-flex whitespace-nowrap rounded-full bg-neutral-900 px-3 py-1.5 text-[12px] font-medium text-white"
>
{badge}
</span>
))}
</div>
</div>
</div>
)
@ -79,7 +90,7 @@ export function SidebarBrand({ logoSrc, logoAlt, title, subtitle }: SidebarBrand
align="center"
className="bg-sidebar border-sidebar-border text-sidebar-foreground shadow-lg"
>
<p className="font-semibold">{title}</p>
{showTitle ? <p className="font-semibold">{title}</p> : null}
<p className="text-xs text-sidebar-foreground/70">{subtitle}</p>
</TooltipContent>
</Tooltip>