b80551fe4d
- rename `supplier` field to `suppliers` in OrderItem interface and PocketBase expand queries - complete visual rebrand to warm cream (#f2f1ed) and dark brown (#26251e) color palette with custom CSS variables - add accessibility improvements: skip-to-main content link, focus-visible styles, reduced motion support, and proper ARIA labels - update all component styling to match new theme, including offline indicator, install prompt, login page, modals, map, bottom nav and global CSS - standardize status colors: use green for success, red for errors, retain orange (#f54e00) as primary accent CTAs
60 lines
No EOL
2.1 KiB
TypeScript
60 lines
No EOL
2.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { List, MapPin, Settings } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const navItems = [
|
|
{ href: '/', label: 'Collections', icon: List },
|
|
{ href: '/map/', label: 'Map', icon: MapPin },
|
|
{ href: '/settings/', label: 'Settings', icon: Settings },
|
|
];
|
|
|
|
export default function BottomNav() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-[#e6e5e0]/95 backdrop-blur-lg border-t border-[rgba(38,37,30,0.1)] safe-bottom">
|
|
<div className="flex justify-around items-center h-16 max-w-lg mx-auto">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
className={cn(
|
|
'flex flex-col items-center justify-center flex-1 h-full relative transition-all duration-200',
|
|
'touch-manipulation active:scale-95',
|
|
isActive ? 'text-[#26251e]' : 'text-[rgba(38,37,30,0.55)]'
|
|
)}
|
|
>
|
|
{isActive && (
|
|
<span className="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-[#f54e00] rounded-full" />
|
|
)}
|
|
<Icon
|
|
size={22}
|
|
strokeWidth={isActive ? 2.5 : 1.8}
|
|
className={cn(
|
|
'transition-all duration-200',
|
|
isActive && 'drop-shadow-sm scale-110'
|
|
)}
|
|
/>
|
|
<span
|
|
className={cn(
|
|
'text-[10px] mt-0.5 font-semibold transition-all duration-200',
|
|
isActive ? 'text-[#26251e]' : 'text-[rgba(38,37,30,0.55)]'
|
|
)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |