42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import { Link } from "react-router-dom"
|
|
import { useNavigation } from "@/contexts/navigation-context"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function MobileNav() {
|
|
const { navItems } = useNavigation()
|
|
|
|
return (
|
|
<nav className="fixed bottom-4 left-4 right-4 z-50 rounded-2xl border border-border/40 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 md:hidden shadow-lg shadow-black/5">
|
|
<div className="flex h-16 items-center justify-around px-2">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.title}
|
|
to={item.url}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center gap-1 rounded-xl px-4 py-2 text-xs font-medium transition-all duration-200",
|
|
"min-w-[48px] min-h-[48px]",
|
|
item.isActive
|
|
? "text-primary bg-primary/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]"
|
|
: "text-muted-foreground/80 hover:text-foreground hover:bg-white/5"
|
|
)}
|
|
>
|
|
<item.icon className={cn(
|
|
"size-5 transition-transform duration-200",
|
|
item.isActive && "scale-110 fill-primary/20"
|
|
)} />
|
|
<span className={cn(
|
|
"truncate max-w-[60px] text-[10px]",
|
|
item.isActive && "font-bold"
|
|
)}>
|
|
{item.title}
|
|
</span>
|
|
{item.isActive && (
|
|
<span className="absolute bottom-1 h-0.5 w-4 rounded-full bg-primary/50 blur-[1px]" />
|
|
)}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|