Vitex Tecnologia
128 lines
4.1 KiB
TypeScript
128 lines
4.1 KiB
TypeScript
import { useState } from "react";
|
|
import { NavLink } from "react-router-dom";
|
|
import {
|
|
LayoutDashboard,
|
|
Plug,
|
|
Bot,
|
|
ChevronLeft,
|
|
Menu,
|
|
X,
|
|
DollarSign,
|
|
UserCircle,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const navItems = [
|
|
{ title: "Home", path: "", icon: LayoutDashboard },
|
|
{ title: "Finanças", path: "financas", icon: DollarSign },
|
|
{ title: "Integrações", path: "integracoes", icon: Plug },
|
|
{ title: "Meu Perfil", path: "meu-perfil", icon: UserCircle },
|
|
];
|
|
|
|
export function AppSidebar() {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
|
|
const SidebarContent = () => (
|
|
<>
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-3 px-4 py-6 border-b border-sidebar-border">
|
|
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center cyber-glow">
|
|
<Bot className="w-5 h-5 text-primary" />
|
|
</div>
|
|
{!collapsed && (
|
|
<div className="animate-fade-in">
|
|
<h1 className="text-sidebar-foreground font-semibold text-lg">AI Agent</h1>
|
|
<p className="text-muted-foreground text-xs">Painel Admin</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 px-3 py-4 space-y-1">
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
end={item.path === ""} // Apenas a Home precisa de match exato
|
|
onClick={() => setMobileOpen(false)}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
"nav-item flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 w-full",
|
|
isActive
|
|
? "text-primary bg-sidebar-accent font-medium"
|
|
: "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent"
|
|
)
|
|
}
|
|
>
|
|
<item.icon className="w-5 h-5 flex-shrink-0" />
|
|
{!collapsed && <span className="animate-fade-in">{item.title}</span>}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Collapse button - desktop only */}
|
|
<div className="hidden lg:block px-3 py-4 border-t border-sidebar-border">
|
|
<button
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
className="nav-item flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 w-full justify-center lg:justify-start text-muted-foreground hover:text-foreground hover:bg-sidebar-accent"
|
|
>
|
|
<ChevronLeft
|
|
className={cn(
|
|
"w-5 h-5 transition-transform duration-300 flex-shrink-0",
|
|
collapsed && "rotate-180"
|
|
)}
|
|
/>
|
|
{!collapsed && <span>Recolher</span>}
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile menu button */}
|
|
<button
|
|
onClick={() => setMobileOpen(true)}
|
|
className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg bg-card border border-border shadow-sm"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
</button>
|
|
|
|
{/* Mobile overlay */}
|
|
{mobileOpen && (
|
|
<div
|
|
className="lg:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
|
|
onClick={() => setMobileOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Mobile sidebar */}
|
|
<aside
|
|
className={cn(
|
|
"lg:hidden fixed left-0 top-0 h-full w-64 bg-sidebar z-50 flex flex-col border-r border-sidebar-border transition-transform duration-300",
|
|
mobileOpen ? "translate-x-0" : "-translate-x-full"
|
|
)}
|
|
>
|
|
<button
|
|
onClick={() => setMobileOpen(false)}
|
|
className="absolute top-4 right-4 p-2 rounded-lg hover:bg-sidebar-accent"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<SidebarContent />
|
|
</aside>
|
|
|
|
{/* Desktop sidebar */}
|
|
<aside
|
|
className={cn(
|
|
"hidden lg:flex flex-col h-screen bg-sidebar border-r border-sidebar-border transition-all duration-300 sticky top-0",
|
|
collapsed ? "w-[72px]" : "w-64"
|
|
)}
|
|
>
|
|
<SidebarContent />
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|