db10eb95c7
Add full PWA support (icons, manifest, service worker, pwa lib and bridge) and introduce install/offline UI. Generate app icons via a new scripts/generate-icons.js and include multiple icon sizes in public/icons; update manifest and layout head meta/preconnect. Revamp global styles (globals.css) with new utilities, animations, spacing for bottom nav, card shadows, skeletons and accessibility tweaks. Polish major screens (login, collections, map, settings) with improved headers, loading states, touch/press feedback, and layout adjustments; add new components (InstallPrompt, OfflineIndicator, PWABridge) and update various components to match new visual/UX patterns. Update Dockerfile to generate icons and use Next.js static export output (/out) for nginx, and bump package setup to support icon generation.
59 lines
No EOL
2 KiB
TypeScript
59 lines
No EOL
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-white/95 backdrop-blur-lg border-t border-gray-200/80 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}
|
|
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-orange-600' : 'text-gray-400'
|
|
)}
|
|
>
|
|
{isActive && (
|
|
<span className="absolute top-0 left-1/2 -translate-x-1/2 w-8 h-0.5 bg-orange-500 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-medium transition-all duration-200',
|
|
isActive ? 'text-orange-700' : 'text-gray-400'
|
|
)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |