| import React from "react"; |
| import { NavLink } from "react-router-dom"; |
| import { motion } from "framer-motion"; |
| import { |
| LayoutDashboard, |
| Briefcase, |
| Search, |
| ShieldAlert, |
| TrendingUp, |
| } from "lucide-react"; |
|
|
| const MOBILE_NAV = [ |
| { id: "dashboard", path: "/", label: "Home", icon: LayoutDashboard }, |
| { id: "screener", path: "/screener", label: "Screener", icon: Search }, |
| { id: "portfolio", path: "/portfolio-doctor", label: "Portfolio",icon: Briefcase }, |
| { id: "strategy", path: "/strategy-builder", label: "Strategy", icon: TrendingUp }, |
| { id: "scam", path: "/scam-detector", label: "Scam AI", icon: ShieldAlert }, |
| ]; |
|
|
| export function BottomNavigation() { |
| return ( |
| <nav |
| aria-label="Mobile navigation" |
| style={{ |
| position: "fixed", |
| bottom: 0, |
| left: 0, |
| right: 0, |
| height: "calc(60px + env(safe-area-inset-bottom))", |
| paddingBottom: "env(safe-area-inset-bottom)", |
| background: "rgba(12, 17, 35, 0.92)", |
| backdropFilter: "blur(24px)", |
| WebkitBackdropFilter: "blur(24px)", |
| borderTop: "1px solid var(--border)", |
| display: "flex", |
| justifyContent: "space-around", |
| alignItems: "center", |
| zIndex: 100, |
| boxShadow: "0 -4px 24px rgba(0,0,0,0.4)", |
| }} |
| > |
| {MOBILE_NAV.map((item) => { |
| const Icon = item.icon; |
| return ( |
| <NavLink |
| key={item.id} |
| to={item.path} |
| aria-label={item.label} |
| end={item.path === "/"} |
| style={{ textDecoration: "none", flex: 1, display: "flex", justifyContent: "center" }} |
| > |
| {({ isActive }) => ( |
| <motion.div |
| whileTap={{ scale: 0.88 }} |
| transition={{ duration: 0.12 }} |
| style={{ |
| display: "flex", |
| flexDirection: "column", |
| alignItems: "center", |
| gap: 4, |
| padding: "6px 8px", |
| position: "relative", |
| minWidth: 48, |
| }} |
| > |
| {/* Active glow background pill */} |
| {isActive && ( |
| <motion.div |
| layoutId="bottomNavPill" |
| style={{ |
| position: "absolute", |
| inset: 0, |
| borderRadius: "var(--radius-md)", |
| background: "rgba(0,201,167,0.1)", |
| border: "1px solid rgba(0,201,167,0.2)", |
| }} |
| transition={{ type: "spring", stiffness: 500, damping: 35 }} |
| /> |
| )} |
| |
| {/* Icon */} |
| <Icon |
| size={20} |
| style={{ |
| position: "relative", |
| color: isActive ? "var(--color-teal)" : "var(--text-muted)", |
| transition: "color 0.18s ease", |
| zIndex: 1, |
| filter: isActive ? "drop-shadow(0 0 6px rgba(0,201,167,0.5))" : "none", |
| }} |
| /> |
| |
| {/* Label */} |
| <span |
| style={{ |
| position: "relative", |
| fontSize: 9, |
| fontWeight: isActive ? 700 : 500, |
| fontFamily: "var(--font-sans)", |
| color: isActive ? "var(--color-teal)" : "var(--text-muted)", |
| transition: "color 0.18s ease", |
| zIndex: 1, |
| letterSpacing: isActive ? "0.3px" : 0, |
| }} |
| > |
| {item.label} |
| </span> |
| |
| {/* Active dot indicator */} |
| {isActive && ( |
| <motion.div |
| initial={{ scale: 0 }} |
| animate={{ scale: 1 }} |
| style={{ |
| position: "absolute", |
| bottom: -6, |
| width: 4, |
| height: 4, |
| borderRadius: "50%", |
| background: "var(--color-teal)", |
| boxShadow: "0 0 6px rgba(0,201,167,0.8)", |
| }} |
| /> |
| )} |
| </motion.div> |
| )} |
| </NavLink> |
| ); |
| })} |
| </nav> |
| ); |
| } |
|
|
