мобильное меню, ссылки на доки, переменное окружение

.env.development.local

@@ -0,0 +1 @@
+REACT_APP_DOMAIN="https://sadmin.pena.digital"

.env.production.local

@@ -0,0 +1 @@
+REACT_APP_DOMAIN="https://sadmin.pena.digital"

.gitignore

@@ -14,9 +14,7 @@
 # misc
 .DS_Store
 .env.local
-.env.development.local
 .env.test.local
-.env.production.local
 
 npm-debug.log*
 yarn-debug.log*

src/api/contactForm.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 
-const apiUrl = process.env.NODE_ENV === "production" ? "/feedback" : "https://admin.pena.digital/feedback";
+const apiUrl = process.env.REACT_APP_DOMAIN + "/feedback";
 
 export function sendContactFormRequest(body: {
     contact: string;

src/kit/DropDownMenu.tsx

@@ -27,31 +27,43 @@ export const DropDownMenu = ({
         "&.MuiMenu-root.MuiModal-root": { zIndex: "10" },
         "& .MuiPaper-root.MuiMenu-paper": {
           padding: "0 10px",
-          borderRadius: "5px",
+          borderRadius: "8px",
           background: "#252734",
           margin: "0",
+          width: "600px"
         },
       }}
     >
       {items
         .filter(({ url }) => location.pathname !== url)
-        .map(({ name, url }) => (
+        .map(({ name, url }, index) => (
           <Box
             key={name}
             sx={{ "& a:hover": { background: "rgba(255, 255, 255, 0.1)" } }}
           >
             <Link
               style={{
+                fontSize: "16px",
+                lineHeight: "20px",
                 display: "block",
                 textDecoration: "none",
                 color: theme.palette.common.white,
-                padding: "5px",
+                padding: "20px 10px 0",
-                borderRadius: "3px",
+                borderRadius: "8px",
                 transition: ".2s",
               }}
+              target="_blank"
               to={url}
             >
               {name}
+              <span
+                  style={{
+                    width: "100%",
+                    display: "block",
+                    paddingBottom: "20px",
+                    borderBottom: index === items.length - 1 ? "none" : "1px solid rgba(255, 255, 255, 0.1)",
+                  }}
+              />
             </Link>
           </Box>
         ))}

src/kit/PhabletHeader.tsx

@@ -30,14 +30,19 @@ import logotipMobile from "../Icons/Logo/logo_PenaHab_mobile.svg";
 import logotipBlackMobile from "../Icons/Logo/black_logo_PenaHab_mobile.svg";
 
 const buttonMenu: { path: string; title: string }[] = [
-  { path: "/", title: "Процесс" },
+    { path: "/", title: "Все услуги" },
-  { path: "/devops", title: "Преимущества" },
+    { path: "/landings", title: "Разработка Landing Page",},
-  { path: "/mobileapps", title: "Клиенты и партнёры" },
+    { path: "/mobileapps", title: "Разработка мобильных приложений",},
-  { path: "/landings", title: "Проекты" },
+    { path: "/corporatesites", title: "Разработка корпоративных сайтов",},
-  { path: "/cloudnative", title: "Контакты" },
+    { path: "/devops", title: "DevOps & CloudOps",},
-  { path: "/design", title: "Меню 6" },
+    { path: "/cloudnative", title: "Разработка Cloud-Native приложений",},
-  { path: "/corporatesites", title: "Меню 7" },
+    { path: "/design", title: "UX/UI дизайн",},
-  { path: "/crmsystems", title: "Меню 8" },
+    { path: "/crmsystems", title: "Разработка CRM-систем", },
+];
+
+const productButton: { path: string; title: string }[] = [
+    { path: "https://hub.pena.digital/", title: "PenaHub"},
+    { path: "https://quiz.pena.digital/", title: "PenaQuiz"},
 ];
 
 interface Props {
@@ -64,6 +69,8 @@ export default function FullScreenDialog({
   const location = useLocation();
   const themeMUI = useTheme();
   const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
+  const [subMenuOpen, setSubMenuOpen] = useState(false);
+  const [subMenuProdOpen, setSubMenuProdOpen] = useState(false)
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -168,7 +175,8 @@ export default function FullScreenDialog({
         <List
           sx={{
             background: theme === "dark" ? "#252734" : "#F2F3F7",
-            height: "100vh",
+            height: isMobile ? "100vh" : "calc(100vh - 100px)",
+
             p: "0",
           }}
         >
@@ -177,41 +185,128 @@ export default function FullScreenDialog({
               pl: "40px",
               flexDirection: "column",
               alignItems: isMobile ? "stretch" : "end",
+              height: "60%",
+                overflow: "auto",
             }}
           >
-            {buttonMenu.map(({ path, title }) => (
+            <Button
-              <Link
+                onClick={() => setSubMenuProdOpen(!subMenuProdOpen)}
-                key={path}
+                disableRipple
-                to={path}
+                variant="text"
-                style={{
+                sx={{
-                  textDecoration: "none",
+                  fontWeight: "500",
-                  height: "20px",
+                  // color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
-                  marginBottom: "25px",
+                  color: theme === "dark" ? "white" : "black",
+                  height: "fit-content",
+                  textTransform: "none",
+                  justifyContent: isMobile ? "start" : "end",
+                  marginBottom: "19px",
+                  fontSize: "16px",
+                  "&:hover": {
+                    background: "none",
+                    color: "#7E2AEA",
+                  },
                 }}
+            >
+              Наши продукты
+            </Button>
+              <Box
+                  sx={{
+                      ml: "20px",
+                      display: "flex",
+                      alignItems: "flex-start",
+                      flexDirection: "column",
+                  }}
               >
-                <Button
+                  {subMenuProdOpen
+                      ?
+                      <>
+                          {productButton.map(({path, title}) =>(
+                              <Button
+                                  component={Link}
+                                  to={path}
+                                  disableRipple
+                                  variant="text"
+                                  target="_blank"
+                                  sx={{
+                                      fontWeight: "500",
+                                      color: theme === "dark" ? "white" : "black",
+                                      height: "fit-content",
+                                      textTransform: "none",
+                                      marginBottom: "19px",
+                                      fontSize: "16px",
+                                      "&:hover": {
+                                          background: "none",
+                                          color: "#7E2AEA",
+                                      },
+                                  }}
+                              >
+                                  {title}
+                              </Button>
+                          ))}
+                      </>
+
+                      : null
+                  }
+              </Box>
+              <Button
+                  onClick={() => setSubMenuOpen(!subMenuOpen)}
                   disableRipple
                   variant="text"
                   sx={{
-                    color:
+                      fontWeight: "500",
-                      location.pathname === path
+                      // color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
-                        ? "#7E2AEA"
+                      color:  theme === "dark" ? "white" : "black",
-                        : theme === "dark"
+                      height: "fit-content",
-                        ? "white"
+                      textTransform: "none",
-                        : "black",
+                      justifyContent: isMobile ? "start" : "end",
-                    height: "20px",
+                      marginBottom: "19px",
-                    textTransform: "none",
+                      fontSize: "16px",
-                    fontSize: "16px",
+                      "&:hover": {
-                    "&:hover": {
+                          background: "none",
-                      background: "none",
+                          color: "#7E2AEA",
-                      color: "#7E2AEA",
+                      },
-                    },
                   }}
-                >
+              >
-                  {title}
+                  Наши услуги
-                </Button>
+              </Button>
-              </Link>
+              <Box
-            ))}
+                  sx={{
+                      ml: "20px",
+                      display: "flex",
+                      alignItems: isMobile ? "flex-start" : "flex-end",
+                      flexDirection: "column",
+                  }}
+              >
+                  {subMenuOpen ?
+                      <>
+                          {buttonMenu.filter(({ path }) => location.pathname !== path).map(({ path, title }) => (
+                              <Button
+                                  component={Link}
+                                  to={path}
+                                  disableRipple
+                                  variant="text"
+                                  target="_blank"
+                                  sx={{
+                                      fontWeight: "500",
+                                      color: theme === "dark" ? "white" : "black",
+                                      height: "fit-content",
+                                      textTransform: "none",
+                                      textAlign: isMobile ? "start" : "end",
+                                      marginBottom: "19px",
+                                      fontSize: "16px",
+                                      "&:hover": {
+                                          background: "none",
+                                          color: "#7E2AEA",
+                                      },
+                                  }}
+                              >
+                                      {title}
+                                  </Button>
+                          ))}
+                      </> : null}
+              </Box>
+
           </ListItem>
           {isMobile ? (
             <Button
@@ -240,7 +335,7 @@ export default function FullScreenDialog({
           ) : (
             <Box
               sx={{
-                position: "absolute",
+                position: "fixed",
                 right: "40px",
                 bottom: "60px",
               }}

src/kit/footer.tsx

@@ -43,9 +43,12 @@ export default function Component() {
           ml: isMobile ? "0" : "167px",
         }}
       >
-          <Button variant="text" sx={{fontSize: "16px", fontWeight: 500, color: "white", textTransform: "none", justifyContent: isMobile ? "flex-start" : "center"}} href={"https://docs.pena.digital/docs"}>
+          <Button variant="text" sx={{fontSize: "16px", fontWeight: 500, color: "white", textTransform: "none", justifyContent: "flex-start"}} href={"https://hub.pena.digital/docs/oferta"}>
               Пользовательское соглашение
           </Button>
+          <Button variant="text" sx={{fontSize: "16px", fontWeight: 500, color: "white", textTransform: "none", justifyContent: "flex-start"}} href={"https://hub.pena.digital/docs/privacy"}>
+              Политика конфиденциальности
+          </Button>
       </Box>
     </Box>
   );

src/kit/header.tsx

@@ -20,17 +20,17 @@ export type MenuItem = {
 const buttonMenu: MenuItem[] = [
   {
     name: "Наши продукты",
-    url: "/faq",
+    url: "",
     subMenu: [
       { name: "PenaHub", url: "https://hub.pena.digital/" },
-      { name: "PenaQuiz", url: "/" },
+      { name: "PenaQuiz", url: "https://quiz.pena.digital/" },
     ],
   },
   {
     name: "Наши услуги",
-    url: "/cart",
+    url: "",
     subMenu: [
-      { name: "Все услуги", url: "https://pena.digital" },
+      { name: "Все услуги", url: "/" },
       {
         name: "Разработка Landing Page",
         url: "/landings",
@@ -114,6 +114,8 @@ export default function Navbar({
               key={name}
               sx={{
                 whiteSpace: "nowrap",
+                textTransform: "none",
+                fontSize: "16px",
                 color:
                   location.pathname === url
                     ? "#7E2AEA"