User Profile - Copy this React, Tailwind Component to your project

'use client'; import React, { useState, useEffect } from 'react'; import { FiUsers, FiBook, FiFileText, FiMenu, FiUser, FiPrinter, FiLogOut } from 'react icons/fi'; const AdminDashboard = ({ children }) => { const [isSidebarOpen, setIsSidebarOpen] = useState(true); const [textVisible, setTextVisible] = useState(true); // New state for text visibility const toggleSidebar = () => { setIsSidebarOpen(!isSidebarOpen); }; // Helper function to get the initials from the user's name const getInitials = (name) => { const names = name.split(' '); const initials = names.map(n => n[0]).join(''); return initials.toUpperCase(); }; const userName = "Shivank Goel"; const userRole = "Administrator"; useEffect(() => { let timer; if (isSidebarOpen) { // Delay showing text until sidebar is fully opened timer = setTimeout(() => setTextVisible(true), 300); // Adjust the delay to match the transition duration } else { // Immediately hide text when sidebar is closing setTextVisible(false); } return () => clearTimeout(timer); }, [isSidebarOpen]); const closeSidebar = () => { setTextVisible(false); let timer = setTimeout(() => setIsSidebarOpen(false), 100); return () => clearTimeout(timer); }; return ( <div className="flex h screen w screen"> {/* Sidebar */} <div className={`${ isSidebarOpen ? 'w 64' : 'w 20' } bg white shadow lg transition all duration 500 ease in out`} onMouseEnter={() => setIsSidebarOpen(true)} onMouseLeave={() => closeSidebar()} > <div className="flex items center justify between p 4"> <button onClick={toggleSidebar} className="text gray 500 hover:text gray 700 focus:outline none" aria label="Toggle Sidebar" > <FiMenu size={24} /> </button> {/* Only show "Admin Panel" text when the sidebar is open */} <h2 className={`text xl font semibold transition all duration 400 ${textVisible ? 'opacity 100' : 'opacity 0'}`}>Admin Panel</h2> </div> <div className="flex flex col items center mt 8"> {/* Replace the image with initials */} <div className="w 16 h 16 rounded full bg purple 500 text white flex items center justify center text 2xl font bold" > {getInitials(userName)} </div> {textVisible && ( <div className={`mt 2 text center transition all duration 400 ${textVisible ? 'opacity 100' : 'opacity 0'}`}> <h3 className="font semibold">{userName}</h3> <p className="text sm text gray 500">{userRole}</p> </div> )} </div> <nav className="mt 8"> <a href="#" className="flex items center px 4 py 2 text gray 700 hover:bg gray 100" > <FiUser className="mr 3" /> {textVisible && <span>Manage User</span>} </a> <a href="#" className="flex items center px 4 py 2 text gray 700 hover:bg gray 100" > <FiBook className="mr 3" /> {textVisible && <span>Manage Course</span>} </a> <a href="#" className="flex items center px 4 py 2 text gray 700 hover:bg gray 100" > <FiFileText className="mr 3" /> {textVisible && <span>Form Status</span>} </a> <a href="#" className="flex items center px 4 py 2 text gray 700 hover:bg gray 100" > <FiPrinter className="mr 3" /> {textVisible && <span>Print Form</span>} </a> <a href="#" className="flex items center px 4 py 2 text gray 700 hover:bg gray 100" > <FiLogOut className="mr 3" /> {textVisible && <span>Logout</span>} </a> </nav> </div> <main className="w [100%]"> {children} </main> </div> ); }; export default AdminDashboard; add some animation in the sidebar