Stable version with additional styling

components/layout/app-nav.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import {
   Home,
   ListPlus,
+  Palette,
   ShoppingBag,
   Sparkles,
   UserRound,
@@ -19,10 +20,12 @@ const gridColsClass = {
   3: "grid-cols-3",
   4: "grid-cols-4",
   5: "grid-cols-5",
+  6: "grid-cols-6",
 } as const;
 
 const navIcons = {
   [routes.avatar]: Home,
+  [routes.customize]: Palette,
   [routes.habits]: ListPlus,
   [routes.dailyQuiz]: Sparkles,
   [routes.shop]: ShoppingBag,
@@ -37,14 +40,21 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
   const pathname = usePathname();
   const columnCount = Math.min(
     items.length,
-    5,
+    6,
   ) as keyof typeof gridColsClass;
 
   return (
-    <nav className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+    <nav
+      className="fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
+      style={{ height: "var(--bottom-nav-height)" }}
+    >
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-secondary/40"
+      />
       <div
         className={cn(
-          "mx-auto grid max-w-lg gap-1 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
+          "mx-auto grid h-full max-w-6xl gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
           gridColsClass[columnCount],
         )}
       >
@@ -59,18 +69,20 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
               key={item.href}
               href={item.href}
               className={cn(
-                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 text-[9px] font-medium leading-tight transition-colors",
+                "flex flex-col items-center justify-center gap-1.5 border-2 px-1 py-2 text-[9px] leading-none transition-all duration-75",
                 isActive
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  ? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)] -translate-y-0.5"
+                  : "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground hover:-translate-y-0.5",
               )}
             >
-              <Icon className="h-4 w-4" />
-              <span>{item.shortLabel}</span>
+              <Icon className="h-5 w-5 shrink-0" strokeWidth={2.5} />
+              <span className="max-w-full truncate uppercase tracking-wide">
+                {item.shortLabel}
+              </span>
             </Link>
           );
         })}
       </div>
     </nav>
   );
-}
+}