Sidebar - Copy this React, Tailwind Component to your project

import { useState } from 'react' import { FiBarChart2, FiBell, FiDollarSign, FiHelpCircle, FiHome, FiMenu, FiPackage, FiUsers, FiX } from 'react-icons/fi' import { useNavigate } from 'react-router-dom' const AdminSidebar = () => { const [isOpen, setIsOpen] = useState(true) const menuItems = [ { title: 'Dashboard', icon: <FiHome size={20} />, action: () => console.log('Dashboard clicked') }, { title: 'Transaction', icon: <FiDollarSign size={20} />, action: () => console.log('Transactions clicked') }, { title: 'Member Management', icon: <FiUsers size={20} />, action: () => console.log('Members clicked') }, { title: 'Fetal Growth Standard', icon: <FiBarChart2 size={20} />, action: () => console.log('Fetal Growth clicked') }, { title: 'Membership Plans', icon: <FiPackage size={20} />, action: () => console.log('Plans clicked') }, { title: 'Notifications', icon: <FiBell size={20} />, action: () => console.log('Notifications clicked') }, { title: 'FAQ', icon: <FiHelpCircle size={20} />, action: () => console.log('FAQ clicked') } ] const navigate = useNavigate(); // Khởi tạo useNavigate hook const handleLogoClick = () => { navigate('/admin'); }; return ( <div className='relative'> <button className='lg:hidden fixed top-4 left-4 z-50 p-2 bg-white rounded-md shadow-lg' onClick={() => setIsOpen(!isOpen)} aria-label={isOpen ? 'Close sidebar' : 'Open sidebar'} > {isOpen ? <FiX size={24} /> : <FiMenu size={24} />} </button> <aside className={`${ isOpen ? 'translate-x-0' : '-translate-x-full' } fixed top-0 left-0 h-screen w-64 bg-white shadow-xl transition-transform duration-300 ease-in-out lg:translate-x-0`} > <div className='flex flex-col h-full'> <div className='p-6 border-b border-gray-200'> <div className='flex items-center justify-center space-x-3'> <img src='https://res.cloudinary.com/drcj6f81i/image/upload/v1736744602/PregnaCare/mgxvbwz2fggrx7brtjgo.svg' alt='logo' className='w-8 h-8 cursor-pointer' onClick={handleLogoClick} /> <div> <span className='inline-block text-red-400 text-2xl font-bold'>PregnaCare</span> <span className='inline-block text-xs text-gray-400 mt-1 pl-0'>Modern Admin Dashboard</span> </div> </div> </div> <nav className='flex-1 overflow-y-auto py-4'> <ul className='space-y-1 px-3'> {menuItems.map((item, index) => ( <li key={index}> <button onClick={item.action} className='w-full flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50' aria-label={item.title} > <span className='text-gray-500'>{item.icon}</span> <span className='ml-3 font-medium'>{item.title}</span> </button> </li> ))} </ul> </nav> <div className='p-4 border-t border-gray-200'> <div className='flex items-center space-x-3'> <img src='https://images.unsplash.com/photo-1535713875002-d1d0cf377fde' alt='User Avatar' className='w-10 h-10 rounded-full object-cover' onError={(e) => { e.currentTarget.src = 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde' }} /> <div> <p className='text-sm font-medium text-gray-800'>Admin User</p> <p className='text-xs text-gray-500'>admin@example.com</p> </div> </div> </div> </div> </aside> </div> ) } export default AdminSidebar tôi đã update giao diện cho riêng mình, giờ phần liên quan tới user tôi muốn để nó lên góc phải ở trên của màn hình (tương tự như là 1 header, bên cạnh avatar có 1 nháy hiện dropdown