phase 2

src/components/MobileNav.tsx

@@ -0,0 +1,41 @@
+import { Link, useRouterState } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+
+const NAV_ITEMS = [
+  { to: '/', label: 'Home', icon: 'home', matchPrefix: '/', exact: true },
+  { to: '/toeic', label: 'Luyện đề', icon: 'assignment', matchPrefix: '/toeic', exact: false },
+  { to: '/writing', label: 'Writing', icon: 'edit_note', matchPrefix: '/writing', exact: false },
+  { to: '/vocab', label: 'Từ vựng', icon: 'menu_book', matchPrefix: '/vocab', exact: false },
+]
+
+function isActive(pathname: string, prefix: string, exact: boolean) {
+  return exact ? pathname === prefix : pathname.startsWith(prefix)
+}
+
+export function MobileNav() {
+  const { location } = useRouterState()
+  const pathname = location.pathname
+
+  return (
+    <nav className="fixed bottom-0 inset-x-0 lg:hidden bg-white border-t border-slate-200 z-50 flex safe-area-inset-bottom">
+      {NAV_ITEMS.map((item) => {
+        const active = isActive(pathname, item.matchPrefix, item.exact)
+        return (
+          <Link
+            key={item.to}
+            to={item.to}
+            className={cn(
+              'flex-1 flex flex-col items-center justify-center gap-0.5 py-2 min-h-[56px] text-[11px] font-medium transition-colors',
+              active ? 'text-blue-600' : 'text-slate-400',
+            )}
+          >
+            <span className="material-symbols-outlined" style={{ fontSize: 22 }}>
+              {item.icon}
+            </span>
+            {item.label}
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}