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';
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();
const colors = {
primary: '#2171B5',
secondary: '#6BAED6',
tertiary: '#BDD7E7',
background: '#EFF3FF',
};
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(!isCollapsed);
};
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
};
return (
<>
)}
{isMobileMenuOpen && (
)}
);
});
export default Sidebar;
{!isCollapsed && (
)}
{!isCollapsed && (
Rockefeller
-
{menuItems.map((item) => {
const isActive = location.pathname === item.path;
return (
-
{!isCollapsed && {item.label}}
);
})}
{!isCollapsed && (
)}