// components/nav/AuthorNav
<Menu.Item key="17" icon={<UserOutlined />}>
<Link
href={{
pathname: `/author/${auth.user?._id}`,
query: { routename: "update-user" },
}}
>
<a className={activeName(`/author/${auth.user?._id}`)}>Profile</a>
</Link>
</Menu.Item>
// author/[id].js
import AuthorLayout from "../../components/layout/AuthorLayout";
import { useState, useEffect, useContext } from "react";
import { Row, Col, List, Avatar } from "antd";
import axios from "axios";
import toast from "react-hot-toast";
import { AuthContext } from "../../context/auth";
import { useRouter } from "next/router";
import ProfileUpdate from "../../components/user/ProfileUpdate";
const AuthorProfile = () => {
// context
const [auth, setAuth] = useContext(AuthContext);
// hooks
const router = useRouter();
const { id } = router.query;
useEffect(() => {
if (auth?.token) loadUser();
}, [id, auth?.token]);
const loadUser = async () => {
try {
const { data } = await axios.get(`/user/${id}`);
setAuth({ ...auth, profile: data });
} catch (err) {
console.log(err);
}
};
return (
<AuthorLayout>
<ProfileUpdate title="Edit profile" />
</AuthorLayout>
);
};
export default AuthorProfile;
Repeat the same process for subscribers and admin (on their nav link > Profile)