3c8fc91b3e
- Set up class-based dark mode in Tailwind config - Add pre-hydration dark mode application to avoid theme flash on initial load - Implement accessible dark mode toggle in settings page - Update all UI surfaces (headers, bottom nav, maps) with dark mode color schemes - Add comprehensive global CSS overrides for arbitrary Tailwind classes - Add brand accent strips to header and bottom nav for consistent visual framing - Refine map waypoint styling: reduce dot size, update label positioning and styling
61 lines
No EOL
2.2 KiB
TypeScript
61 lines
No EOL
2.2 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 dark:bg-[#181710]/95 backdrop-blur-lg border-t border-[rgba(38,37,30,0.1)] dark:border-[rgba(242,241,237,0.08)] safe-bottom">
|
|
<div className="brand-accent-top" aria-hidden="true" />
|
|
<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>
|
|
);
|
|
} |