import React, { useState, useEffect, memo } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { Home, DollarSign, Briefcase, Settings, LogOut, Menu, X, AlertCircle } from 'lucide-react';
import toast from 'react-hot-toast';
// Modern, glassmorphism, smooth UX 2025 Sidebar
const Sidebar = memo(() => {
const [isCollapsed, setIsCollapsed] = useState(localStorage.getItem('sidebarCollapsed') === 'true');
const [isDarkMode, setIsDarkMode] = useState(localStorage.getItem('darkMode') === 'true');
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const location = useLocation();
const navigate = useNavigate();
// Color palette for 2025 look
const colors = {
primary: '#2563eb', // blue-600
secondary: '#60a5fa', // blue-400
tertiary: '#f1f5f9', // slate-100
background: isDarkMode ? 'rgba(30,41,59,0.85)' : 'rgba(255,255,255,0.85)',
glass: isDarkMode
? 'bg-gradient-to-br from-gray-900/80 via-gray-800/70 to-gray-900/60'
: 'bg-gradient-to-br from-white/80 via-blue-50/70 to-white/60',
border: isDarkMode ? 'border-gray-700/60' : 'border-blue-200/60',
shadow: isDarkMode ? 'shadow-blue-900/30' : 'shadow-blue-200/40',
navItemActiveBg: isDarkMode
? 'bg-gradient-to-r from-blue-700 via-blue-800 to-blue-900'
: 'bg-gradient-to-r from-blue-600 to-blue-400',
navItemInactiveBg: isDarkMode
? 'hover:bg-gray-800/80'
: 'hover:bg-blue-100/80',
navItemInactiveText: isDarkMode
? 'text-gray-200'
: 'text-gray-700',
navItemActiveText: 'text-white',
navItemHoverText: isDarkMode
? 'hover:text-blue-300'
: 'hover:text-blue-700',
};
useEffect(() => {
localStorage.setItem('sidebarCollapsed', isCollapsed);
}, [isCollapsed]);
useEffect(() => {
localStorage.setItem('darkMode', isDarkMode);
}, [isDarkMode]);
const menuItems = [
{ path: '/home', label: 'Trang chủ', icon: Home },
{ path: '/expenses', label: 'Chi tiêu', icon: DollarSign },
{ path: '/investments', label: 'Đầu tư', icon: Briefcase },
{ path: '/settings', label: 'Cài đặt', icon: Settings },
];
const handleLogout = async () => {
try {
const token = localStorage.getItem('token');
if (token) {
await fetch('https://rockefeller-finance-backend.onrender.com/api/logout', {
method: 'POST',
headers: { Authorization: `Bearer ${token}` },
});
}
localStorage.removeItem('token');
navigate('/login');
toast.success('Đăng xuất thành công!');
} catch (err) {
toast.error('Lỗi khi đăng xuất');
}
};
const toggleSidebar = () => setIsCollapsed((c) => !c);
const toggleMobileMenu = () => setIsMobileMenuOpen((m) => !m);
// Helper: close sidebar on mobile when navigating
const handleMenuItemClick = () => {
if (window.innerWidth < 768) setIsMobileMenuOpen(false);
};
// Close sidebar on route change (mobile)
useEffect(() => {
if (isMobileMenuOpen) setIsMobileMenuOpen(false);
// eslint-disable-next-line
}, [location.pathname]);
// Prevent scroll when sidebar is open on mobile
useEffect(() => {
if (isMobileMenuOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
return () => {
document.body.style.overflow = '';
};
}, [isMobileMenuOpen]);
// Animation classes for 2025 feel
const sidebarAnim = `
transition-all duration-500 ease-[cubic-bezier(.77,0,.18,1)]
will-change-transform
backdrop-blur-xl
${colors.glass}
${colors.shadow}
border-r-2 ${colors.border}
`;
// Modern nav item style
const navItemBase =
'group flex items-center gap-3 px-4 py-3 rounded-xl font-medium text-base transition-all duration-200 cursor-pointer select-none';
// Use explicit bg/text for dark mode fix
const navItemActive = `
${colors.navItemActiveBg} ${colors.navItemActiveText}
shadow-lg scale-[1.04] border border-blue-300/30
`;
const navItemInactive = `
${colors.navItemInactiveText} ${colors.navItemInactiveBg} ${colors.navItemHoverText}
transition-colors
`;
// Modern mobile menu button
const mobileMenuBtn =
'md:hidden fixed top-4 left-4 z-[100] p-2 rounded-full bg-white/80 dark:bg-gray-900/80 shadow-lg border border-blue-200/40 dark:border-gray-700/40 backdrop-blur-lg transition-all duration-200 hover:scale-110';
// Modern collapse/expand button
const collapseBtn =
'p-1.5 rounded-full hover:bg-blue-100/80 dark:hover:bg-gray-800/80 text-blue-600 dark:text-blue-300 transition-all duration-200 shadow-sm border border-blue-200/40 dark:border-gray-700/40';
// Modern dark mode button
const darkModeBtn =
'w-full p-2 mb-2 rounded-xl font-semibold text-white bg-gradient-to-r from-blue-600 to-blue-400 hover:from-blue-700 hover:to-blue-500 transition-all duration-200 shadow-md hover:scale-105';
// Modern logout button
const logoutBtn =
'flex items-center gap-3 p-2 rounded-xl w-full transition-all duration-200 bg-gradient-to-r from-red-500/90 to-pink-500/90 text-white hover:from-red-600 hover:to-pink-600 shadow-md hover:scale-105';
// Sidebar width
const sidebarWidth = isCollapsed ? 72 : 270;
return (
<>
{/* Mobile menu button */}
{/* Sidebar */}
{/* Overlay for mobile */}
{isMobileMenuOpen && (
)}
);
});
export default Sidebar;
siderba dinh cao cua nhan loai
byHuyền
•