import { signIn, signOut, useSession } from "next-auth/react";
import { buttonVariants } from "../ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export default function SignInButton() {
const { data: session } = useSession();
if (session && session.user) {
return (
<DropdownMenu>
<DropdownMenuTrigger className="right-0 outline py-2 px-2 rounded-md">User</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Subscription</DropdownMenuItem>
<DropdownMenuItem onClick={() => signOut()}>LogOut</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
return (
<button className={buttonVariants({ variant: "outline" })} onClick={() => signIn()}>
LogIn
</button>
);
}
I encountered an issue with the dropdown menu where clicking it causes the menu button to move right and the Chrome scroll bar disappears. Is there a way to solve this using Tailwind CSS or any other method?