admtracksteel/BrainWind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make footer navigation scrollable with pinned Home button

Browse Source
This commit is contained in:
Marcos
2026-07-10 14:25:47 +00:00
parent 85269bd99e
commit fcc53e88ae
2 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/App.tsx
+34 -9
View File
@@ -102,26 +102,51 @@ function AppLayout({ children }: { children: React.ReactNode }) {
<div className="flex-1 overflow-auto">{children}</div>
</main>
<nav className="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-card border-t flex items-center justify-around px-1 z-50 pb-safe overflow-x-auto">
{navItems.slice(0, 6).map((item) => {
const isActive = location.pathname === item.path;
const label = t(item.labelKey);
<nav className="md:hidden fixed bottom-0 left-0 right-0 h-16 bg-card border-t flex items-center z-50 pb-safe overflow-hidden">
{/* Início (Fixo na esquerda) */}
{(() => {
const homeItem = navItems[0];
const isActive = location.pathname === homeItem.path;
const label = t(homeItem.labelKey);
return (
<Link
key={item.path}
to={item.path}
key={homeItem.path}
to={homeItem.path}
className={cn(
'flex flex-col items-center justify-center h-full px-1 text-xs transition-colors min-w-[3rem]',
'flex flex-col items-center justify-center h-full px-3 text-xs transition-colors shrink-0 border-r bg-card z-20 shadow-[4px_0_8px_-4px_rgba(0,0,0,0.15)]',
isActive ? 'text-primary font-medium' : 'text-muted-foreground',
)}
>
<div className={cn('p-1 rounded-full transition-colors', isActive && 'bg-primary/10')}>
{item.icon}
{homeItem.icon}
</div>
<span className="scale-90 text-[10px]">{label}</span>
</Link>
);
})}
})()}
{/* Demais itens (Rolagem horizontal) */}
<div className="flex-1 flex items-center h-full overflow-x-auto no-scrollbar py-1 gap-1">
{navItems.slice(1).map((item) => {
const isActive = location.pathname === item.path;
const label = t(item.labelKey);
return (
<Link
key={item.path}
to={item.path}
className={cn(
'flex flex-col items-center justify-center h-full px-3 text-xs transition-colors shrink-0 min-w-[4.25rem]',
isActive ? 'text-primary font-medium' : 'text-muted-foreground',
)}
>
<div className={cn('p-1 rounded-full transition-colors', isActive && 'bg-primary/10')}>
{item.icon}
</div>
<span className="scale-90 text-[10px] whitespace-nowrap">{label}</span>
</Link>
);
})}
</div>
</nav>
</div>
);