Upon clicking the user id popover on my page, it expands the page width instead of adjusting within the page boundaries.
This is the issue: https://i.stack.imgur.com/EqaMo.png
There's a small white space present that I want to eliminate. When the popover is closed, everything looks fine: https://i.stack.imgur.com/iM672.png
How can I correct this formatting?
Below is the popover component code snippet:
import * as React from "react";
import Popover from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { IconButton } from "@mui/material";
import navStyles from "../styles/Nav.module.css";
export default function BasicPopover() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div>
<IconButton
aria-describedby={id}
variant="contained"
onClick={handleClick}
>
<AccountCircleIcon className={navStyles.pfp} />
</IconButton>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{ p: 0, m: 0 }}>
<ul>
<li>Login/Logout</li>
<li>Account</li>
<li>Your Trips</li>
<li>Help</li>
<li>Settings</li>
</ul>
</Typography>
</Popover>
</div>
);
}
Here is the navigation component code snippet:
import Link from "next/link";
import navStyles from "../styles/Nav.module.css";
import AccountMenu from "../components/AccountMenu.js";
import { useAuth } from "./contexts/userContext";
import { useRouter } from "next/router";
const Nav = () => {
const { logout, user } = useAuth();
const router = useRouter();
async function handleLogout() {
try {
await logout();
console.log("logged out");
router.push("/");
} catch (err) {
alert(err);
}
}
return (
<nav className={navStyles.nav}>
<ul>
<li>
<Link href="/">
<img
className={navStyles.logo}
src="/blue.png"
style={{ cursor: "pointer" }}
/>
</Link>
</li>
<li>
<Link href="/Properties">Properties</Link>
</li>
</ul>
<ul style={{ margin: "0px", padding: "0px" }}>
{!user ? (
<li style={{ margin: "0px", padding: "0px" }}>
<Link href="/Authentication/Login">Login </Link>
</li>
) : (
<div>
<div style={{ color: "green" }}>Welcome {user?.email} </div>
<li>
<Link href="/Account">Account</Link>
</li>
<div
onClick={handleLogout}
style={{ color: "black", cursor: "pointer" }}
>
Logout
</div>
</div>
)}
<li style={{ margin: "0px" }}>
<AccountMenu className={navStyles.pfp} />
</li>
</ul>
</nav>
);
};
export default Nav;