248 lines
11 KiB
TypeScript
248 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { Menu, Transition } from '@headlessui/react';
|
|
import { Fragment } from 'react';
|
|
import { useTheme } from 'next-themes';
|
|
import {
|
|
HomeIcon,
|
|
BuildingOfficeIcon,
|
|
LinkIcon,
|
|
Cog6ToothIcon,
|
|
DocumentTextIcon,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
UserCircleIcon,
|
|
ArrowRightOnRectangleIcon,
|
|
SunIcon,
|
|
MoonIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
export interface MenuItem {
|
|
id: string;
|
|
label: string;
|
|
href: string;
|
|
icon: any;
|
|
}
|
|
|
|
interface SidebarRailProps {
|
|
activeTab: string;
|
|
onTabChange: (tab: string) => void;
|
|
isExpanded: boolean;
|
|
onToggle: () => void;
|
|
menuItems: MenuItem[];
|
|
}
|
|
|
|
export const SidebarRail: React.FC<SidebarRailProps> = ({
|
|
activeTab,
|
|
onTabChange,
|
|
isExpanded,
|
|
onToggle,
|
|
menuItems,
|
|
}) => {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const { theme, setTheme } = useTheme();
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
router.push('/login');
|
|
};
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(theme === 'dark' ? 'light' : 'dark');
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
relative h-full bg-white dark:bg-zinc-900 rounded-2xl flex flex-col py-4 gap-1 text-gray-600 dark:text-gray-400 shrink-0 shadow-lg
|
|
transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] px-3 border border-transparent dark:border-zinc-800
|
|
${isExpanded ? 'w-[240px]' : 'w-[80px]'}
|
|
`}
|
|
>
|
|
{/* Toggle Button - Floating on the border */}
|
|
<button
|
|
onClick={onToggle}
|
|
className="absolute -right-3 top-8 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm hover:bg-gray-50 hover:text-gray-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200 transition-colors"
|
|
aria-label={isExpanded ? 'Recolher menu' : 'Expandir menu'}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronLeftIcon className="w-3 h-3" />
|
|
) : (
|
|
<ChevronRightIcon className="w-3 h-3" />
|
|
)}
|
|
</button>
|
|
|
|
{/* Header com Logo */}
|
|
<div className={`flex items-center w-full mb-6 ${isExpanded ? 'justify-start px-1' : 'justify-center'}`}>
|
|
{/* Logo */}
|
|
<div
|
|
className="w-9 h-9 rounded-xl flex items-center justify-center text-white font-bold shrink-0 shadow-md text-lg"
|
|
style={{ background: 'var(--gradient)' }}
|
|
>
|
|
A
|
|
</div>
|
|
|
|
{/* Título com animação */}
|
|
<div className={`overflow-hidden transition-all duration-300 ease-in-out whitespace-nowrap ${isExpanded ? 'opacity-100 max-w-[120px] ml-3' : 'opacity-0 max-w-0 ml-0'}`}>
|
|
<span className="font-bold text-lg text-gray-900 dark:text-white tracking-tight">Aggios</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Separador removido para visual mais limpo */}
|
|
|
|
{/* Navegação */}
|
|
<div className="flex flex-col gap-1 w-full flex-1 overflow-y-auto">
|
|
{menuItems.map((item) => (
|
|
<RailButton
|
|
key={item.id}
|
|
label={item.label}
|
|
icon={item.icon}
|
|
href={item.href}
|
|
active={pathname === item.href || (item.href !== '/superadmin' && item.href !== '/dashboard' && pathname?.startsWith(item.href))}
|
|
onClick={() => onTabChange(item.id)}
|
|
isExpanded={isExpanded}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Separador antes do menu de usuário */}
|
|
<div className="h-px bg-gray-200 dark:bg-zinc-800 my-2" />
|
|
|
|
{/* User Menu - Footer */}
|
|
<div>
|
|
<Menu as="div" className="relative">
|
|
<Menu.Button className={`w-full p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800 transition-all duration-300 flex items-center ${isExpanded ? '' : 'justify-center'}`}>
|
|
<UserCircleIcon className="w-5 h-5 shrink-0 text-gray-600 dark:text-gray-400" />
|
|
<div className={`overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out ${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}`}>
|
|
<span className="font-medium text-xs text-gray-900 dark:text-white">SuperAdmin</span>
|
|
</div>
|
|
</Menu.Button>
|
|
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-100"
|
|
enterFrom="transform opacity-0 scale-95"
|
|
enterTo="transform opacity-100 scale-100"
|
|
leave="transition ease-in duration-75"
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
leaveTo="transform opacity-0 scale-95"
|
|
>
|
|
<Menu.Items className={`absolute ${isExpanded ? 'left-0' : 'left-14'} bottom-0 mb-2 w-48 origin-bottom-left rounded-xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-lg focus:outline-none overflow-hidden z-50`}>
|
|
<div className="p-1">
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
|
>
|
|
<UserCircleIcon className="mr-2 h-4 w-4" />
|
|
Ver meu perfil
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<Link
|
|
href="/superadmin/settings"
|
|
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
|
>
|
|
<Cog6ToothIcon className="mr-2 h-4 w-4" />
|
|
Configurações
|
|
</Link>
|
|
)}
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
onClick={toggleTheme}
|
|
className={`${active ? 'bg-gray-100 dark:bg-zinc-800' : ''} text-gray-700 dark:text-gray-300 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
|
>
|
|
{mounted && theme === 'dark' ? (
|
|
<>
|
|
<SunIcon className="mr-2 h-4 w-4" />
|
|
Tema Claro
|
|
</>
|
|
) : (
|
|
<>
|
|
<MoonIcon className="mr-2 h-4 w-4" />
|
|
Tema Escuro
|
|
</>
|
|
)}
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
<div className="my-1 h-px bg-gray-200 dark:bg-zinc-800" />
|
|
<Menu.Item>
|
|
{({ active }) => (
|
|
<button
|
|
onClick={handleLogout}
|
|
className={`${active ? 'bg-red-50 dark:bg-red-900/20' : ''} text-red-500 group flex w-full items-center rounded-lg px-3 py-2 text-xs`}
|
|
>
|
|
<ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
|
|
Sair
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
</div>
|
|
</Menu.Items>
|
|
</Transition>
|
|
</Menu>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Subcomponente do Botão (Essencial para a animação do texto)
|
|
interface RailButtonProps {
|
|
label: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
href: string;
|
|
active: boolean;
|
|
onClick: () => void;
|
|
isExpanded: boolean;
|
|
}
|
|
|
|
const RailButton: React.FC<RailButtonProps> = ({ label, icon: Icon, href, active, onClick, isExpanded }) => (
|
|
<Link
|
|
href={href}
|
|
onClick={onClick}
|
|
style={{ background: active ? 'var(--gradient)' : undefined }}
|
|
className={`
|
|
flex items-center p-2 rounded-lg transition-all duration-300 group relative overflow-hidden
|
|
${active
|
|
? 'text-white shadow-md'
|
|
: 'hover:bg-gray-100 dark:hover:bg-zinc-800 hover:text-gray-900 dark:hover:text-white text-gray-600 dark:text-gray-400'
|
|
}
|
|
${isExpanded ? '' : 'justify-center'}
|
|
`}
|
|
>
|
|
{/* Ícone */}
|
|
<Icon className="shrink-0 w-4 h-4" />
|
|
|
|
{/* Lógica Mágica do Texto: Max-Width Transition */}
|
|
<div className={`
|
|
overflow-hidden whitespace-nowrap transition-all duration-300 ease-in-out
|
|
${isExpanded ? 'max-w-[150px] opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0'}
|
|
`}>
|
|
<span className="font-medium text-xs">{label}</span>
|
|
</div>
|
|
|
|
{/* Indicador de Ativo (Barra lateral pequena quando fechado) */}
|
|
{active && !isExpanded && (
|
|
<div
|
|
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3 rounded-r-full -ml-3"
|
|
style={{ background: 'var(--gradient)' }}
|
|
/>
|
|
)}
|
|
</Link>
|
|
);
|