From fcc53e88ae696be8856403c4b3bee7cc47326e38 Mon Sep 17 00:00:00 2001
From: Marcos <m.reifonas@gmail.com>
Date: Fri, 10 Jul 2026 14:25:47 +0000
Subject: [PATCH] fix: make footer navigation scrollable with pinned Home
 button

---
 app/src/App.tsx   | 43 ++++++++++++++++++++++++++++++++++---------
 app/src/index.css |  8 ++++++++
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index 1ee8740..13622f5 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -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>
   );
diff --git a/app/src/index.css b/app/src/index.css
index 7501774..f1c5208 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -142,3 +142,11 @@
     @apply bg-background text-foreground;
   }
 }
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}