Auto-deploy: 2026-01-13 13:02:10 | 2 arquivo(s) alterado(s)
This commit is contained in:
parent
4ac122925b
commit
39369a1fdd
|
|
@ -0,0 +1,146 @@
|
|||
import React, { useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
LayoutDashboard,
|
||||
ArrowUpRight,
|
||||
ArrowDownRight,
|
||||
ArrowRightLeft,
|
||||
Settings,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Search,
|
||||
Zap,
|
||||
User,
|
||||
LogOut,
|
||||
HelpCircle
|
||||
} from 'lucide-react';
|
||||
|
||||
export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
const menuItems = [
|
||||
{ id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, category: 'Geral' },
|
||||
{ id: 'entradas', label: 'Receitas', icon: ArrowUpRight, category: 'Financeiro' },
|
||||
{ id: 'saidas', label: 'Despesas', icon: ArrowDownRight, category: 'Financeiro' },
|
||||
{ id: 'conciliacao', label: 'Conciliação', icon: ArrowRightLeft, category: 'Financeiro' },
|
||||
{ id: 'config', label: 'Ajustes', icon: Settings, category: 'Sistema' },
|
||||
];
|
||||
|
||||
const filteredItems = menuItems.filter(item =>
|
||||
item.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.category.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const categories = [...new Set(menuItems.map(item => item.category))];
|
||||
|
||||
return (
|
||||
<aside className={cn(
|
||||
"bg-[var(--workspace-sec-5-light)] dark:bg-[#0d253a] text-white flex flex-col transition-all duration-500 ease-in-out z-50 shadow-2xl relative",
|
||||
collapsed ? "w-20" : "w-72"
|
||||
)}>
|
||||
{/* Botão de Toggle Flutuante */}
|
||||
<button
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
className="absolute -right-3 top-10 w-6 h-6 bg-[var(--workspace-sec-2-light)] rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform active:scale-95"
|
||||
>
|
||||
{collapsed ? <ChevronRight size={14} className="text-white" /> : <ChevronLeft size={14} className="text-white" />}
|
||||
</button>
|
||||
|
||||
{/* Brand / Logo */}
|
||||
<div className="p-8 flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:rotate-12 transition-transform">
|
||||
<Zap size={24} className="text-white fill-white" />
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xl font-black tracking-tighter leading-none italic">iTGUYS</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.3em] font-bold text-white/40">Workspace</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Busca */}
|
||||
{!collapsed && (
|
||||
<div className="px-6 mb-6">
|
||||
<div className="relative group">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-white/30 group-focus-within:text-[var(--workspace-sec-2-light)] transition-colors" size={16} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Buscar função..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-xs focus:ring-2 focus:ring-[var(--workspace-sec-2-light)] focus:bg-white/10 outline-none transition-all placeholder:text-white/20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Menu scrollable */}
|
||||
<nav className="flex-1 overflow-y-auto px-4 space-y-8 custom-scrollbar pb-8">
|
||||
{categories.map(category => {
|
||||
const items = filteredItems.filter(i => i.category === category);
|
||||
if (items.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={category} className="space-y-2">
|
||||
{!collapsed && (
|
||||
<h3 className="px-4 text-[10px] font-black uppercase tracking-[0.2em] text-white/20">
|
||||
{category}
|
||||
</h3>
|
||||
)}
|
||||
<div className="space-y-1">
|
||||
{items.map(item => {
|
||||
const Icon = item.icon;
|
||||
const isActive = activeScreen === item.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onScreenChange(item.id)}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-4 px-4 py-3.5 rounded-2xl transition-all relative group",
|
||||
isActive
|
||||
? "bg-white/10 text-white shadow-inner"
|
||||
: "text-white/50 hover:text-white hover:bg-white/5"
|
||||
)}
|
||||
>
|
||||
<Icon size={20} className={cn(
|
||||
"transition-transform group-hover:scale-110",
|
||||
isActive ? "text-[var(--workspace-sec-2-light)]" : ""
|
||||
)} />
|
||||
{!collapsed && <span className="font-bold text-sm tracking-tight">{item.label}</span>}
|
||||
|
||||
{isActive && (
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-[var(--workspace-sec-2-light)] rounded-r-full shadow-[0_0_15px_var(--workspace-sec-2-light)]" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Footer / User Profile */}
|
||||
<div className="p-4 border-t border-white/5 bg-black/10">
|
||||
<div className={cn(
|
||||
"flex items-center gap-3 p-3 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors cursor-pointer group",
|
||||
collapsed && "justify-center"
|
||||
)}>
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-slate-400 to-slate-600 flex items-center justify-center text-sm font-black text-white shadow-lg group-hover:scale-105 transition-transform">
|
||||
DA
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs font-bold text-white truncate">Daivid Alves</p>
|
||||
<p className="text-[10px] text-white/40 truncate font-medium uppercase tracking-widest">Master Admin</p>
|
||||
</div>
|
||||
)}
|
||||
{!collapsed && <LogOut size={16} className="text-white/20 hover:text-red-400 cursor-pointer" />}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue