Spaces:
Running
Running
File size: 3,416 Bytes
8e723d7 d3ab8d1 8e723d7 d3ab8d1 8e723d7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | "use client";
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
LayoutDashboard,
Package,
Users,
UserSquare2,
ShoppingCart,
CheckSquare,
Network,
MessageSquare,
Map as MapIcon,
FileText,
LogOut
} from "lucide-react";
import { motion } from "framer-motion";
import { auth } from "@/lib/firebase";
const menuItems = [
{ icon: LayoutDashboard, label: "Dashboard", href: "/" },
{ icon: Package, label: "Inventario", href: "/inventory" },
{ icon: ShoppingCart, label: "Ventas", href: "/sales" },
{ icon: Users, label: "Clientes", href: "/clients" },
{ icon: UserSquare2, label: "Personal / RRHH", href: "/hr" },
{ icon: CheckSquare, label: "Tareas", href: "/tasks" },
{ icon: FileText, label: "Facturación", href: "/billing" },
{ icon: Network, label: "Organigrama", href: "/org-chart" },
{ icon: MessageSquare, label: "Intranet", href: "/intranet" },
{ icon: MapIcon, label: "Mapa Mental", href: "/mind-map" },
];
export default function Sidebar() {
const pathname = usePathname();
if (pathname === "/login") return null;
return (
<motion.aside
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
className="fixed left-6 top-6 bottom-6 w-64 bg-white/5 border border-white/10 rounded-[40px] backdrop-blur-3xl z-40 p-8 flex flex-col shadow-2xl overflow-hidden"
>
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
<div className="mb-10 flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-900/40 font-black text-xl">E</div>
<span className="font-black text-xl tracking-tighter uppercase italic">Premium ERP</span>
</div>
<nav className="flex-1 space-y-2 overflow-y-auto no-scrollbar">
{menuItems.map((item) => {
const isActive = pathname === item.href;
return (
<Link key={item.href} href={item.href}>
<div className={`
flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group relative overflow-hidden
${isActive ? 'bg-white/10 text-blue-400' : 'text-gray-400 hover:bg-white/5 hover:text-white'}
`}>
{isActive && (
<motion.div
layoutId="active-pill"
className="absolute inset-0 bg-blue-500/10 border border-blue-500/20 rounded-2xl"
/>
)}
<item.icon size={20} className={`relative z-10 ${isActive ? 'text-blue-400' : 'group-hover:scale-110 transition-transform'}`} />
<span className="font-semibold text-sm relative z-10">{item.label}</span>
</div>
</Link>
);
})}
</nav>
<div className="mt-8 pt-6 border-t border-white/5">
<button
onClick={() => auth.signOut()}
className="flex items-center gap-4 px-4 py-3 w-full text-red-400 hover:bg-red-500/10 rounded-2xl transition-all group"
>
<LogOut size={20} className="group-hover:-translate-x-1 transition-transform" />
<span className="font-bold text-sm">Cerrar Sesión</span>
</button>
</div>
</motion.aside>
);
}
|