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

src/components/NavbarLanding/DialogMenu.tsx

@@ -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 = [
+const subMenu = [
-  { name: "Наши продукты", url: "/" },
+  { name: "Все услуги", url: "https://pena.digital" },
-  { name: "Наши услуги", url: "/" },
+  {
+    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
-            <Button
+            component={Link}
-              key={index}
+            to="/faq"
-              component={Link}
+            onClick={handleClose}
-              to={url}
+            state={user ? undefined : { backgroundLocation: location }}
-              onClick={handleClose}
+            disableRipple
-              state={user ? undefined : { backgroundLocation: location }}
+            variant="text"
-              disableRipple
+            sx={{
-              variant="text"
+              fontWeight: "500",
-              sx={{
+              // color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
-                fontWeight: "500",
+              color: "white",
-                // color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
+              height: "fit-content",
-                color: "white",
+              textTransform: "none",
-                height: "20px",
+              marginBottom: "19px",
-                textTransform: "none",
+              fontSize: "16px",
-                marginBottom: "25px",
+              "&:hover": {
-                fontSize: "16px",
+                background: "none",
-                "&:hover": {
+                color: theme.palette.purple.main,
-                  background: "none",
+              },
-                  color: theme.palette.purple.main,
+            }}
-                },
+          >
-              }}
+            Наши продукты
-            >
+          </Button>
-              {name}
+          <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>