143 lines
4.6 KiB
JavaScript
143 lines
4.6 KiB
JavaScript
import * as React from "react";
|
||
import Box from "@mui/material/Box";
|
||
import IconButton from "@mui/material/IconButton";
|
||
import Typography from "@mui/material/Typography";
|
||
import Menu from "@mui/material/Menu";
|
||
import MenuIcon from "@mui/icons-material/Menu";
|
||
import Container from "@mui/material/Container";
|
||
import MenuItem from "@mui/material/MenuItem";
|
||
import { useNavigate } from "react-router-dom";
|
||
import Settings from "./Settings";
|
||
import { AppBar, Button, Grid, Toolbar } from "@mui/material";
|
||
|
||
const pages = [
|
||
{ name: "Abdest Hakkında", href: "/abdesthakkinda" },
|
||
{ name: "Abdest Nasıl Alınır?", href: "/abdestnasilalinir" },
|
||
{ name: "Abdestin Etimolojisi", href: "/abdestetimoloji" },
|
||
{ name: "Abdestin Hükümleri", href: "/abdestinhukumleri" },
|
||
{ name: "Abdestin Farzları", href: "/abdestinfarzlari" },
|
||
{ name: "Abdestin Sünnetleri", href: "/abdestinsunnetleri" },
|
||
{ name: "Abdestin Mehrukları", href: "/abdestinmehruklari" },
|
||
{ name: "Abdesti Bozan Durumlar", href: "/abdestbozandurumlar" },
|
||
{ name: "Engelli Abdesti Nasıl Alınır?", href: "/engelliabdesti" },
|
||
{
|
||
name: "Teyemmüm Abdesti Nasıl Alınır?",
|
||
href: "/teyemmumabdesti",
|
||
},
|
||
];
|
||
|
||
function NavMenu() {
|
||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||
const navigate = useNavigate();
|
||
|
||
const handleOpenNavMenu = (event) => {
|
||
setAnchorElNav(event.currentTarget);
|
||
};
|
||
|
||
const handleCloseNavMenu = (href) => {
|
||
setAnchorElNav(null);
|
||
if (href) {
|
||
navigate(href);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<React.Fragment>
|
||
<AppBar position="sticky" sx={{ zIndex: 99 }}>
|
||
<Container maxWidth="xxl">
|
||
<Toolbar disableGutters>
|
||
<Grid
|
||
item
|
||
width={300}
|
||
textAlign={"center"}
|
||
sx={{
|
||
display: { xs: "none", lg: "block" },
|
||
}}>
|
||
<Typography
|
||
variant="h6"
|
||
noWrap
|
||
component="a"
|
||
href="/"
|
||
sx={{
|
||
fontFamily: "monospace",
|
||
fontWeight: 700,
|
||
letterSpacing: ".3rem",
|
||
color: "inherit",
|
||
textDecoration: "none",
|
||
}}>
|
||
quickabdest
|
||
</Typography>
|
||
</Grid>
|
||
|
||
<Box sx={{ flexGrow: 1, display: { xs: "flex", lg: "none" } }}>
|
||
<IconButton
|
||
size="large"
|
||
aria-label="account of current user"
|
||
aria-controls="menu-appbar"
|
||
aria-haspopup="true"
|
||
onClick={handleOpenNavMenu}
|
||
color="inherit">
|
||
<MenuIcon />
|
||
</IconButton>
|
||
<Menu
|
||
id="menu-appbar"
|
||
anchorEl={anchorElNav}
|
||
anchorOrigin={{
|
||
vertical: "bottom",
|
||
horizontal: "left",
|
||
}}
|
||
keepMounted
|
||
transformOrigin={{
|
||
vertical: "top",
|
||
horizontal: "left",
|
||
}}
|
||
open={Boolean(anchorElNav)}
|
||
onClose={handleCloseNavMenu}
|
||
sx={{
|
||
display: { xs: "block", lg: "none" },
|
||
}}>
|
||
{pages.map((page) => (
|
||
<MenuItem
|
||
key={page.name}
|
||
onClick={() => handleCloseNavMenu(page.href)}>
|
||
<Typography textAlign="center">{page.name}</Typography>
|
||
</MenuItem>
|
||
))}
|
||
</Menu>
|
||
</Box>
|
||
<Typography
|
||
variant="h5"
|
||
noWrap
|
||
component="a"
|
||
href="/"
|
||
sx={{
|
||
mr: 2,
|
||
display: { xs: "flex", lg: "none" },
|
||
flexGrow: 1,
|
||
fontFamily: "monospace",
|
||
fontWeight: 700,
|
||
letterSpacing: ".5rem",
|
||
color: "inherit",
|
||
textDecoration: "none",
|
||
}}>
|
||
quickabdest
|
||
</Typography>
|
||
<Box sx={{ flexGrow: 4, display: { xs: "none", lg: "flex" } }}>
|
||
{pages.map((page) => (
|
||
<Button
|
||
key={page.name}
|
||
onClick={() => handleCloseNavMenu(page.href)}
|
||
sx={{ color: "white", display: "block" }}
|
||
noWrap>
|
||
{page.name}
|
||
</Button>
|
||
))}
|
||
</Box>
|
||
<Settings />
|
||
</Toolbar>
|
||
</Container>
|
||
</AppBar>
|
||
</React.Fragment>
|
||
);
|
||
}
|
||
export default NavMenu;
|