PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

фикс по меню на главной

Browse Source
This commit is contained in:
ArtChaos189 2024-01-16 23:10:22 +03:00
parent d34b7cf61f
commit d54244eb50
1 changed files with 115 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/NavbarLanding/DialogMenu.tsx
View File

@ -2,15 +2,42 @@ import { TransitionProps } from "@mui/material/transitions";
import logotip from "../../assets/Icons/logoPenaHab.svg";
import logotipBlack from "../../assets/Icons/black_logo_PenaHab.svg";
import CustomAvatar from "./Avatar";
import React from "react";
import React, { useState } from "react";
import { Box, Button, Dialog, List, ListItem, Slide, Typography, useMediaQuery, useTheme } from "@mui/material";
import { Link, useLocation } from "react-router-dom";
import { useUserStore } from "@root/stores/user";
import { currencyFormatter } from "@root/utils/currencyFormatter";
const arrayMenu = [
{ name: "Наши продукты", url: "/" },
{ name: "Наши услуги", url: "/" },
const subMenu = [
{ name: "Все услуги", url: "https://pena.digital" },
{
name: "Разработка Landing Page",
url: "https://pena.digital/landings",
},
{
name: "Разработка мобильных приложений",
url: "https://pena.digital/mobileapps",
},
{
name: "Разработка корпоративных сайтов",
url: "https://pena.digital/corporatesites",
},
{
name: "DevOps & CloudOps",
url: "https://pena.digital/devops",
},
{
name: "Разработка Cloud-Native приложений",
url: "https://pena.digital/cloudnative",
},
{
name: "UX/UI дизайн",
url: "https://pena.digital/design",
},
{
name: "Разработка CRM-систем",
url: "https://pena.digital/crmsystems",
},
];
const Transition = React.forwardRef(function Transition(
@ -32,9 +59,12 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
const theme = useTheme();
const location = useLocation();
const isTablet = useMediaQuery(theme.breakpoints.down(900));
const isTabletMenu = useMediaQuery(theme.breakpoints.down(1000));
const user = useUserStore((state) => state.user);
const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0;
const [subMenuOpen, setSubMenuOpen] = useState(false);
const isMobileHeight = useMediaQuery("(max-height: 400px)");
return (
@ -71,32 +101,86 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
alignItems: isTablet ? "start" : "end",
}}
>
{arrayMenu.map(({ name, url }, index) => (
<Button
key={index}
component={Link}
to={url}
onClick={handleClose}
state={user ? undefined : { backgroundLocation: location }}
disableRipple
variant="text"
sx={{
fontWeight: "500",
// color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
color: "white",
height: "20px",
textTransform: "none",
marginBottom: "25px",
fontSize: "16px",
"&:hover": {
background: "none",
color: theme.palette.purple.main,
},
}}
>
{name}
</Button>
))}
<Button
component={Link}
to="/faq"
onClick={handleClose}
state={user ? undefined : { backgroundLocation: location }}
disableRipple
variant="text"
sx={{
fontWeight: "500",
// color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
color: "white",
height: "fit-content",
textTransform: "none",
marginBottom: "19px",
fontSize: "16px",
"&:hover": {
background: "none",
color: theme.palette.purple.main,
},
}}
>
Наши продукты
</Button>
<Button
onClick={() => setSubMenuOpen(!subMenuOpen)}
disableRipple
variant="text"
sx={{
fontWeight: "500",
// color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
color: "white",
height: "20px",
textTransform: "none",
marginBottom: "25px",
fontSize: "16px",
"&:hover": {
background: "none",
color: theme.palette.purple.main,
},
}}
>
Наши услуги
</Button>
<Box
sx={{
ml: "20px",
display: "flex",
alignItems: "flex-start",
flexDirection: "column",
}}
>
{subMenuOpen
? subMenu.map(({ name, url }, index) => (
<Button
key={index}
component={Link}
to={url}
state={user ? undefined : { backgroundLocation: location }}
disableRipple
variant="text"
sx={{
fontWeight: "500",
// color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
color: "white",
height: "fit-content",
textTransform: "none",
marginBottom: "19px",
fontSize: "16px",
"&:hover": {
background: "none",
color: theme.palette.purple.main,
},
}}
>
{name}
</Button>
))
: null}
</Box>
</ListItem>
</List>
{isTablet ? (
@ -106,7 +190,7 @@ export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
to={user ? "/tariffs" : "/signin"}
state={user ? undefined : { backgroundLocation: location }}
variant="pena-contained-dark"
sx={{ px: "30px", ml: "40px", width: "245px" }}
sx={{ px: "30px", ml: "40px", width: "245px", mt: subMenuOpen ? "50px" : "0" }}
>
Регистрация / Войти
</Button>