From 7b517c388f5c97211c3312b1ea6baf342e1c0ff8 Mon Sep 17 00:00:00 2001
From: Developer <developer@discord-automod.local>
Date: Tue, 28 Jul 2026 09:07:39 +0700
Subject: [PATCH] feat: redesign mobile bottom nav with glass styling

---
 .../frontend/src/components/layout/mobile-nav.tsx  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/services/frontend/src/components/layout/mobile-nav.tsx b/services/frontend/src/components/layout/mobile-nav.tsx
index f2aef98..e234b12 100644
--- a/services/frontend/src/components/layout/mobile-nav.tsx
+++ b/services/frontend/src/components/layout/mobile-nav.tsx
@@ -10,8 +10,8 @@ export function MobileNav() {
   const pathname = usePathname();
 
   return (
-    <nav className="md:hidden fixed bottom-0 inset-x-0 z-10 border-t border-border/50 bg-background/80 backdrop-blur-lg">
-      <div className="flex">
+    <nav className="md:hidden fixed bottom-0 inset-x-0 z-30 glass-intense border-t border-glass-border">
+      <div className="flex items-center justify-around h-14 px-2">
         {mobileNavItems.map(({ href, label, icon: Icon, matchPrefix }) => {
           const active = isActivePath(pathname, matchPrefix);
           return (
@@ -19,14 +19,16 @@ export function MobileNav() {
               key={href}
               href={href}
               className={cn(
-                "flex-1 flex flex-col items-center gap-1 py-2 text-[11px] font-medium transition-all relative",
-                active ? "text-cyan-400" : "text-muted-foreground/60",
+                "flex flex-col items-center gap-0.5 py-1 px-3 rounded-lg transition-all relative min-w-0",
+                active
+                  ? "text-primary"
+                  : "text-text-secondary/50 hover:text-text-secondary/80",
               )}
             >
               <Icon className="size-5" />
-              <span>{label}</span>
+              <span className="text-[10px] font-medium leading-tight">{label}</span>
               {active && (
-                <span className="absolute -top-px left-1/2 -translate-x-1/2 size-1 rounded-full bg-cyan-400 shadow-[0_0_6px] shadow-cyan-400/80" />
+                <span className="absolute -top-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary shadow-[0_0_6px] shadow-primary/80" />
               )}
             </Link>
           );