56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { IconButton, useTheme } from "@mui/material";
|
||
|
|
import MenuIcon from "@mui/icons-material/Menu";
|
||
|
|
|
||
|
|
import SectionWrapper from "../SectionWrapper";
|
||
|
|
|
||
|
|
import PenaLogo from "../PenaLogo";
|
||
|
|
import DialogMenu from "./DialogMenu";
|
||
|
|
import { Link } from "react-router-dom";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
isLoggedIn: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function NavbarCollapsed({ isLoggedIn }: Props) {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
const handleClickOpen = () => {
|
||
|
|
setOpen(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
setOpen(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SectionWrapper
|
||
|
|
component="nav"
|
||
|
|
maxWidth="lg"
|
||
|
|
outerContainerSx={{
|
||
|
|
backgroundColor: theme.palette.navbarbg.main,
|
||
|
|
position: "sticky",
|
||
|
|
top: 0,
|
||
|
|
zIndex: 1,
|
||
|
|
// borderBottom: "1px solid #E3E3E3",
|
||
|
|
}}
|
||
|
|
sx={{
|
||
|
|
height: "51px",
|
||
|
|
py: "6px",
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Link to="/"><PenaLogo width={100} /></Link>
|
||
|
|
|
||
|
|
<IconButton onClick={handleClickOpen} sx={{ p: 0, width: "30px", color: theme.palette.primary.main }}>
|
||
|
|
<MenuIcon sx={{ height: "30px", width: "30px" }} />
|
||
|
|
</IconButton>
|
||
|
|
<DialogMenu open={open} handleClose={handleClose} />
|
||
|
|
</SectionWrapper>
|
||
|
|
);
|
||
|
|
}
|