Ajusta marca na sidebar
All checks were successful
All checks were successful
This commit is contained in:
parent
0a0f722bd8
commit
badcb0f502
3 changed files with 31 additions and 14 deletions
|
|
@ -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>
|
||||
<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 chamados
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
{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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue