43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import { Box, Typography, useTheme } from "@mui/material";
|
||
|
|
import { Link, useLocation } from "react-router-dom";
|
||
|
|
|
||
|
|
export default function Menu() {
|
||
|
|
const theme = useTheme();
|
||
|
|
const location = useLocation();
|
||
|
|
|
||
|
|
const color = location.pathname === "/" ? "white" : "black";
|
||
|
|
|
||
|
|
const arrayMenu = [
|
||
|
|
{ name: "Тарифы", url: "/tariffs" },
|
||
|
|
{ name: "Тарифы на время", url: "/tariffs/time" },
|
||
|
|
{ name: "Тарифы на объём", url: "/tariffs/volume" },
|
||
|
|
{ name: "Вопросы и ответы", url: "/faq" },
|
||
|
|
{ name: "Кастомный тариф", url: "/tariffconstructor" },
|
||
|
|
{ name: "Корзина", url: "/basket" },
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
gap: "30px",
|
||
|
|
overflow: "hidden",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{arrayMenu.map(({ name, url }, index) => (
|
||
|
|
<Link key={name} style={{ textDecoration: "none" }} to={url}>
|
||
|
|
<Typography
|
||
|
|
color={location.pathname === url ? theme.palette.brightPurple.main : color}
|
||
|
|
variant="body2"
|
||
|
|
sx={{
|
||
|
|
whiteSpace: "nowrap",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{name}
|
||
|
|
</Typography>
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|