// components/nav/TopNav.js
const signout = async () => {
setAuth({ user: null, token: "" });
localStorage.removeItem("auth");
toast.success("Successfully logged out");
router.push("/signin");
};
Conditionally show menu links
If signed in, show dashboard menu (with logout as submenu). If not signed in show signin and signout (hide dashboard and logout).
// components/nav/TopNav.js
{auth?.user !== null && (
<SubMenu
key="SubMenu"
icon={<SettingOutlined />}
title={auth?.user?.name || "Dashboard"}
style={{ marginLeft: "auto" }}
>
<Menu.ItemGroup title="Management">
<Menu.Item key="setting:1">
<Link href="/admin">
<a>Dashboard</a>
</Link>
</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Others">
<Menu.Item key="setting:2" onClick={signout}>
Sign out
</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
)}
{auth?.user === null && (
<>
<Menu.Item
key="signin"
icon={<UserAddOutlined />}
style={{ marginLeft: "auto" }}
>
<Link href="/signin">
<a>Sign In</a>
</Link>
</Menu.Item>
<Menu.Item key="signup" icon={<UserAddOutlined />}>
<Link href="/signup">
<a>Sign Up</a>
</Link>
</Menu.Item>
</>
)}