| import { Link, useLocation } from "react-router-dom"; | |
| import { | |
| LayoutDashboard, | |
| Megaphone, | |
| Users, | |
| Mail, | |
| Flame, | |
| Inbox, | |
| Webhook, | |
| BarChart2, | |
| Building2, | |
| Settings | |
| } from "lucide-react"; | |
| import { cn } from "../utils/cn"; | |
| import AnimatedLogo from "./AnimatedLogo"; | |
| import Logo from "./Logo"; | |
| const navigation = [ | |
| { name: "Dashboard", href: "/", icon: LayoutDashboard }, | |
| { name: "Campaigns", href: "/campaigns", icon: Megaphone }, | |
| { name: "Leads", href: "/leads", icon: Users }, | |
| { name: "Email Accounts", href: "/email-accounts", icon: Mail }, | |
| { name: "Warmup", href: "/warmup", icon: Flame }, | |
| { name: "Unified Inbox", href: "/inbox", icon: Inbox }, | |
| { name: "Webhooks", href: "/webhooks", icon: Webhook }, | |
| { name: "Analytics", href: "/analytics", icon: BarChart2 }, | |
| { name: "Clients", href: "/clients", icon: Building2 }, | |
| { name: "Settings", href: "/settings", icon: Settings }, | |
| ]; | |
| export default function Sidebar({ onClose }: { onClose?: () => void }) { | |
| const location = useLocation(); | |
| return ( | |
| <div className="w-64 border-r border-white/5 bg-zinc-950/80 md:bg-zinc-950/40 backdrop-blur-xl flex flex-col shrink-0 h-full relative z-20 shadow-[4px_0_24px_-4px_rgba(0,0,0,0.5)]"> | |
| <div className="h-16 flex items-center px-6 border-b border-white/5 shrink-0 gap-3"> | |
| <AnimatedLogo className="w-7 h-7" /> | |
| <Logo /> | |
| </div> | |
| <nav className="flex-1 overflow-y-auto py-4 px-3 space-y-1.5"> | |
| {navigation.map((item) => { | |
| const isActive = location.pathname === item.href || (item.href !== "/" && location.pathname.startsWith(item.href)); | |
| return ( | |
| <Link | |
| key={item.name} | |
| to={item.href} | |
| onClick={onClose} | |
| className={cn( | |
| "w-full flex items-center gap-3 px-3 py-2.5 text-[13px] font-medium rounded-lg transition-all duration-300 relative group overflow-hidden", | |
| isActive | |
| ? "text-indigo-300 bg-white/5 border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)]" | |
| : "text-zinc-400 hover:text-zinc-200 hover:bg-white/5 border border-transparent" | |
| )} | |
| > | |
| {isActive && ( | |
| <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-indigo-500 rounded-r-full shadow-[0_0_10px_rgba(99,102,241,0.8)]" /> | |
| )} | |
| <item.icon className={cn("w-4 h-4 transition-transform duration-300 group-hover:scale-110", isActive ? "text-indigo-400 drop-shadow-[0_0_8px_rgba(99,102,241,0.5)]" : "text-zinc-500")} /> | |
| {item.name} | |
| </Link> | |
| ); | |
| })} | |
| </nav> | |
| </div> | |
| ); | |
| } | |