conditional rendering logout menu without logged in user

// 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>
</>
)}