Spaces:
Sleeping
Sleeping
| import { Link, useLocation } from "react-router-dom"; | |
| import { | |
| LayoutDashboard, | |
| Megaphone, | |
| Users, | |
| Mail, | |
| Flame, | |
| Inbox, | |
| Webhook, | |
| BarChart2, | |
| Building2, | |
| CreditCard, | |
| Settings | |
| } from "lucide-react"; | |
| import { cn } from "../utils/cn"; | |
| import { useTheme } from "../context/ThemeContext"; | |
| import AnimatedLogo from "./AnimatedLogo"; | |
| import Logo from "./Logo"; | |
| const navigation = [ | |
| { name: "Command Center", 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: "Pricing", href: "/pricing", icon: CreditCard }, | |
| { name: "Settings", href: "/settings", icon: Settings }, | |
| ]; | |
| export default function Sidebar({ onClose }: { onClose?: () => void }) { | |
| const location = useLocation(); | |
| const { config } = useTheme(); | |
| return ( | |
| <div className="w-64 border-r border-white/5 bg-zinc-950/90 md:bg-zinc-950/60 backdrop-blur-2xl flex flex-col shrink-0 h-full relative z-20 shadow-[4px_0_24px_-4px_rgba(0,0,0,0.8)]"> | |
| <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"> | |
| {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 | |
| ? "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" | |
| )} | |
| style={isActive ? { color: config.accentText } : {}} | |
| > | |
| {isActive && ( | |
| <div | |
| className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 rounded-r-full" | |
| style={{ | |
| backgroundColor: config.accent, | |
| boxShadow: `0 0 15px ${config.accent}` | |
| }} | |
| /> | |
| )} | |
| <item.icon | |
| className={cn("w-4 h-4 transition-transform duration-300 group-hover:scale-110", isActive ? "" : "text-zinc-500")} | |
| style={isActive ? { color: config.accent, filter: `drop-shadow(0 0 8px ${config.accent})` } : {}} | |
| /> | |
| {item.name} | |
| </Link> | |
| ); | |
| })} | |
| </nav> | |
| </div> | |
| ); | |
| } | |