Spaces:
Sleeping
Sleeping
File size: 4,969 Bytes
bea55e2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, Search, Plus, ShoppingCart, User, Send, Grid3x3 } from 'lucide-react';
import { useAuth } from '@/components/auth-provider';
/**
* MobileNav — WhatsApp Liquid Glass floating island bottom navigation.
*
* BUYER nav: Messenger | Shorts | [Home] | Category | Cart
* (Notification + Account icons are in the HEADER, not the nav)
*
* SELLER nav: Home | Shorts | [+] | Cart | Account
* (Messenger + Notification icons are in the HEADER, not the nav)
* (Account in nav = /profile personal profile; Account in header = /seller-dashboard store)
*/
export function MobileNav() {
const pathname = usePathname();
const { cartCount, user, isSeller, unreadMessages } = useAuth();
const navItems = isSeller
? [
{ href: '/', label: 'Home', icon: Home },
{ href: '/shorts', label: 'Shorts', icon: Grid3x3 },
{ href: '/create', label: 'Add', icon: Plus, center: true },
{ href: '/cart', label: 'Cart', icon: ShoppingCart, showBadge: true },
{ href: '/profile', label: 'Account', icon: User, showAvatar: true },
]
: [
{ href: '/messenger', label: 'Messages', icon: Send },
{ href: '/shorts', label: 'Shorts', icon: Grid3x3 },
{ href: '/', label: 'Home', icon: Home, center: true },
{ href: '/categories', label: 'Category', icon: Search },
{ href: '/cart', label: 'Cart', icon: ShoppingCart, showBadge: true },
];
return (
<div
className="fx-nav glass-nav fixed left-1/2 -translate-x-1/2 z-50 md:hidden"
style={{
bottom: 'calc(env(safe-area-inset-bottom) + 16px)',
width: '90%',
maxWidth: '400px',
height: '64px',
borderRadius: '32px',
}}
>
<div className="flex items-center justify-around h-full px-4">
{navItems.map((item) => {
const isActive = pathname === item.href;
const Icon = item.icon;
if (item.center) {
return (
<Link
key={item.href}
href={item.href}
className="flex items-center justify-center"
aria-label={item.label}
>
<div
className="w-12 h-12 rounded-full flex items-center justify-center transition-transform active:scale-90"
style={{
background: 'linear-gradient(135deg, #000000 0%, #333333 100%)',
boxShadow: '0 4px 16px rgba(0,0,0,0.15)',
}}
>
<Icon className="w-5 h-5 text-white" strokeWidth={2.5} />
</div>
</Link>
);
}
return (
<Link
key={item.href}
href={item.href}
className="flex items-center justify-center relative transition-all"
style={{ flex: '1 1 0', height: '100%' }}
aria-label={item.label}
>
{isActive && (
<div
className="glass-active-pill glass-pill-enter absolute"
style={{
width: '48px',
height: '38px',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
borderRadius: '14px',
}}
/>
)}
<div className="relative flex items-center justify-center">
<Icon
className={`w-6 h-6 transition-all duration-300 ${
isActive ? 'text-white scale-110' : 'text-slate-400'
}`}
strokeWidth={isActive ? 2.5 : 1.8}
fill={isActive && (item.label === 'Home' || item.label === 'Messages') ? 'currentColor' : 'none'}
/>
{item.showBadge && cartCount > 0 && (
<span className="absolute -top-1.5 -right-2 bg-red-500 text-white text-[9px] font-bold rounded-full min-w-[16px] h-4 flex items-center justify-center px-1">
{cartCount}
</span>
)}
{item.showAvatar && user && (
<span className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white" />
)}
{item.label === 'Messages' && user && unreadMessages > 0 && (
<span className="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-red-500 rounded-full border-2 border-white flex items-center justify-center">
<span className="text-white text-[9px] font-bold leading-none">{unreadMessages > 9 ? '9+' : unreadMessages}</span>
</span>
)}
</div>
</Link>
);
})}
</div>
</div>
);
}
|