Gladyson/openmonetis
1
0
Fork 0
forked from git.gladyson/openmonetis
Code Pull Requests Activity

feat: centralizar conteúdo da topbar no max-w-8xl

Browse Source 
Envolve logo, nav e ações num container max-w-8xl mx-auto
para alinhar com a largura do conteúdo das páginas.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-22 20:39:12 +00:00
parent a9f73f7a45
commit 32b7f7b687
1 changed files with 59 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
components/topbar/app-topbar.tsx
View File

@@ -29,63 +29,68 @@ export function AppTopbar({
notificationsSnapshot, notificationsSnapshot,
}: AppTopbarProps) { }: AppTopbarProps) {
return ( return (
<header className="fixed top-0 left-0 right-0 z-50 bg-primary flex h-14 shrink-0 items-center gap-3 px-4 shadow-md"> <header className="fixed top-0 left-0 right-0 z-50 bg-primary shadow-md h-14 shrink-0 flex items-center">
{/* Logo */} <div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-3 h-full">
<Link href="/dashboard" className="flex items-center gap-2 shrink-0 mr-1"> {/* Logo */}
<Image <Link
src="/logo_small.png" href="/dashboard"
alt="OpenMonetis" className="flex items-center gap-2 shrink-0 mr-1"
width={28} >
height={28} <Image
className="object-contain" src="/logo_small.png"
priority alt="OpenMonetis"
/> width={28}
<Image height={28}
src="/logo_text.png" className="object-contain"
alt="OpenMonetis" priority
width={90} />
height={28} <Image
className="object-contain invert hidden sm:block" src="/logo_text.png"
priority alt="OpenMonetis"
/> width={90}
</Link> height={28}
className="object-contain invert hidden sm:block"
priority
/>
</Link>
{/* Navigation */} {/* Navigation */}
<TopNavMenu preLancamentosCount={preLancamentosCount} /> <TopNavMenu preLancamentosCount={preLancamentosCount} />
{/* Right-side actions — CSS vars overridden so icons render light on primary bg */} {/* Right-side actions — CSS vars overridden so icons render light on primary bg */}
<div <div
className="ml-auto flex items-center gap-1" className="ml-auto flex items-center gap-1"
style={ style={
{ {
"--foreground": "var(--primary-foreground)", "--foreground": "var(--primary-foreground)",
"--muted-foreground": "--muted-foreground":
"color-mix(in oklch, var(--primary-foreground) 70%, transparent)", "color-mix(in oklch, var(--primary-foreground) 70%, transparent)",
"--accent": "--accent":
"color-mix(in oklch, var(--primary-foreground) 15%, transparent)", "color-mix(in oklch, var(--primary-foreground) 15%, transparent)",
"--accent-foreground": "var(--primary-foreground)", "--accent-foreground": "var(--primary-foreground)",
"--border": "--border":
"color-mix(in oklch, var(--primary-foreground) 30%, transparent)", "color-mix(in oklch, var(--primary-foreground) 30%, transparent)",
} as React.CSSProperties } as React.CSSProperties
} }
> >
<NotificationBell <NotificationBell
notifications={notificationsSnapshot.notifications} notifications={notificationsSnapshot.notifications}
totalCount={notificationsSnapshot.totalCount} totalCount={notificationsSnapshot.totalCount}
/> />
<CalculatorDialogButton withTooltip /> <CalculatorDialogButton withTooltip />
<RefreshPageButton /> <RefreshPageButton />
<PrivacyModeToggle /> <PrivacyModeToggle />
<AnimatedThemeToggler /> <AnimatedThemeToggler />
<span <span
aria-hidden aria-hidden
className="h-5 w-px bg-primary-foreground/30 mx-1 hidden sm:block" className="h-5 w-px bg-primary-foreground/30 mx-1 hidden sm:block"
/> />
<FeedbackDialog /> <FeedbackDialog />
</div>
{/* User avatar — outside the var-override div so dropdown stays normal */}
<TopbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
</div> </div>
{/* User avatar — outside the var-override div so dropdown stays normal */}
<TopbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
</header> </header>
); );
} }