fix: make footer navigation scrollable with pinned Home button

app/src/App.tsx

@@ -102,8 +102,32 @@ 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">
+      <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">
-        {navItems.slice(0, 6).map((item) => {
+        {/* Início (Fixo na esquerda) */}
+        {(() => {
+          const homeItem = navItems[0];
+          const isActive = location.pathname === homeItem.path;
+          const label = t(homeItem.labelKey);
+          return (
+            <Link
+              key={homeItem.path}
+              to={homeItem.path}
+              className={cn(
+                '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')}>
+                {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 (
@@ -111,17 +135,18 @@ function AppLayout({ children }: { children: React.ReactNode }) {
                 key={item.path}
                 to={item.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 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]">{label}</span>
+                <span className="scale-90 text-[10px] whitespace-nowrap">{label}</span>
               </Link>
             );
           })}
+        </div>
       </nav>
     </div>
   );

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;
+}