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

This commit is contained in:
Tamara 2024-01-18 04:17:03 +03:00
parent 59b54d8b48
commit d775951361
8 changed files with 161 additions and 49 deletions

1
.env.development.local Normal file

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

1
.env.production.local Normal file

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

2
.gitignore vendored

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

@ -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;

@ -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",
borderRadius: "3px",
padding: "20px 10px 0",
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>
))}

@ -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: "/devops", title: "Преимущества" },
{ path: "/mobileapps", title: "Клиенты и партнёры" },
{ path: "/landings", title: "Проекты" },
{ path: "/cloudnative", title: "Контакты" },
{ path: "/design", title: "Меню 6" },
{ path: "/corporatesites", title: "Меню 7" },
{ path: "/crmsystems", title: "Меню 8" },
{ path: "/", title: "Все услуги" },
{ path: "/landings", title: "Разработка Landing Page",},
{ path: "/mobileapps", title: "Разработка мобильных приложений",},
{ path: "/corporatesites", title: "Разработка корпоративных сайтов",},
{ path: "/devops", title: "DevOps & CloudOps",},
{ path: "/cloudnative", title: "Разработка Cloud-Native приложений",},
{ path: "/design", title: "UX/UI дизайн",},
{ 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,30 +185,55 @@ export default function FullScreenDialog({
pl: "40px",
flexDirection: "column",
alignItems: isMobile ? "stretch" : "end",
}}
>
{buttonMenu.map(({ path, title }) => (
<Link
key={path}
to={path}
style={{
textDecoration: "none",
height: "20px",
marginBottom: "25px",
height: "60%",
overflow: "auto",
}}
>
<Button
onClick={() => setSubMenuProdOpen(!subMenuProdOpen)}
disableRipple
variant="text"
sx={{
color:
location.pathname === path
? "#7E2AEA"
: theme === "dark"
? "white"
: "black",
height: "20px",
fontWeight: "500",
// color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
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",
}}
>
{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",
@ -210,8 +243,70 @@ export default function FullScreenDialog({
>
{title}
</Button>
</Link>
))}
</>
: null
}
</Box>
<Button
onClick={() => setSubMenuOpen(!subMenuOpen)}
disableRipple
variant="text"
sx={{
fontWeight: "500",
// color: location.pathname === url ? theme.palette.purple.main : location.pathname === "/" ? "white" : "black",
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: 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",
}}

@ -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>
);

@ -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"