83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
'use client'
|
|
import MainContext from "@/app/contexts/mainContext";
|
|
import authAxios from "@/utils/axios";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useContext } from "react";
|
|
import toast from "react-hot-toast";
|
|
|
|
const AccountSidebar = () => {
|
|
const router = useRouter()
|
|
const { setToken } = useContext(MainContext)
|
|
const logoutFn = async () => {
|
|
const response = await authAxios.post('/account/logout/')
|
|
if (response.status == 200) {
|
|
localStorage.removeItem('token')
|
|
setToken(null)
|
|
toast.success(response.data.message)
|
|
router.push('/accounts/login')
|
|
}
|
|
console.log(response)
|
|
}
|
|
return (
|
|
<aside className="bg-white shadow-md overflow-x-auto md:w-64 md:min-h-screen">
|
|
<div className="flex md:flex-col">
|
|
|
|
<nav className="flex md:flex-col whitespace-nowrap">
|
|
<Link
|
|
href="/accounts/profile"
|
|
className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
|
|
>
|
|
<span className="inline-block mr-2">👤</span> My profile
|
|
</Link>
|
|
<Link
|
|
href="/accounts/profile/orders"
|
|
className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
|
|
>
|
|
<span className="inline-block mr-2">📦</span> Orders{" "}
|
|
</Link>
|
|
{/* <Link
|
|
href="/accounts/profile/addresses"
|
|
className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
|
|
>
|
|
<span className="inline-block mr-2">📍</span> Addresses{" "}
|
|
<span className="ml-2 inline-block bg-gray-200 rounded-full px-2 py-1 text-xs">
|
|
1
|
|
</span>
|
|
</Link> */}
|
|
<Link
|
|
href="/accounts/profile/change-password"
|
|
className="block py-2 px-4 text-gray-700 hover:bg-gray-200"
|
|
>
|
|
<span className="inline-block mr-2">🔑</span> Change password
|
|
</Link>
|
|
<button
|
|
onClick={()=> logoutFn()}
|
|
className="block py-2 px-4 text-gray-700 hover:bg-gray-200 pr-80"
|
|
>
|
|
<span className="inline-block mr-2">🚪</span> Logout
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
<style jsx>{`
|
|
@media (max-width: 768px) {
|
|
aside {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
aside::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
aside {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
}
|
|
`}</style>
|
|
</aside>
|
|
|
|
);
|
|
};
|
|
|
|
export default AccountSidebar;
|