87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
'use client';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { LuLayoutDashboard } from 'react-icons/lu';
|
|
import { RiUser4Line } from 'react-icons/ri';
|
|
import { TbHome2, TbLogout2 } from 'react-icons/tb';
|
|
|
|
|
|
|
|
export default function Sidebar() {
|
|
const router = useRouter();
|
|
const pathname = usePathname(); // Get the current route
|
|
|
|
|
|
// Define the routes with relevant icons
|
|
const routes = [
|
|
{
|
|
name: 'Dashboard',
|
|
path: '/dashboard',
|
|
icon: <LuLayoutDashboard size={18} />,
|
|
},
|
|
{
|
|
name: 'Home',
|
|
path: '/home',
|
|
icon: <TbHome2 size={18}/>,
|
|
},
|
|
{
|
|
name: 'Profile',
|
|
path: '/profile',
|
|
icon: <RiUser4Line size={18} />,
|
|
},
|
|
];
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/logout', {
|
|
method: 'GET',
|
|
credentials: 'include', // Ensure cookies are sent
|
|
});
|
|
|
|
if (response.ok) {
|
|
console.log('Logout successful');
|
|
router.push('/login'); // Redirect to login page
|
|
} else {
|
|
console.error('Failed to log out:', response.status);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error while logging out:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
// <div className="bg-blue-950 text-white h-full z-10 rounded-xl shadow-md transition-width ease-in-out duration-150 w-16 hover:w-1/5">
|
|
<div className="bg-blue-950 text-white h-full z-10 rounded-xl shadow-md transition-width ease-in-out duration-150 w-1/5">
|
|
<div className="flex items-center justify-start py-2 ps-3 gap-2">
|
|
<img src="/images/logo2.png" width={40} alt="Logo" /><h1 className="text-lg font-black ">
|
|
P ink A ura</h1>
|
|
</div>
|
|
<nav className="mt-6">
|
|
<ul className="p-2">
|
|
{/* Map through the routes */}
|
|
{routes.map((route) => (
|
|
<li
|
|
key={route.path}
|
|
onClick={() => router.push(route.path)}
|
|
className={`flex items-center gap-3 px-4 mb-1 rounded-md py-2 text-sm cursor-pointer transition duration-150 ${
|
|
pathname === route.path
|
|
? 'bg-pink-500 text-white' // Active class
|
|
: 'hover:bg-pink-500 hover:text-white' // Hover class
|
|
}`}
|
|
>
|
|
{route.icon} {/* Render the icon */}
|
|
<p>{route.name}</p>
|
|
</li>
|
|
))}
|
|
{/* Logout option */}
|
|
<li
|
|
onClick={handleLogout}
|
|
className="flex items-center gap-3 px-4 mb-0 rounded-md py-2 hover:bg-pink-500 hover:text-white text-sm cursor-pointer transition duration-150"
|
|
><TbLogout2 size={18} />
|
|
<p>Logout</p>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|