front-hub/src/components/Navbar/DialogMenu.tsx

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 CloseIcon from "../icons/CloseIcons";
import React from "react";
import {
  AppBar,
  Box,
  Button,
  Dialog,
  IconButton,
  List,
  ListItem,
  Slide,
  Toolbar,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { Link, useLocation } from "react-router-dom";

const arrayMenu = [
  { name: "Главная", url: "/" },
  { name: "Тарифы", url: "/tariffs" },
  { name: "Тарифы на время", url: "/tariffs/time" },
  { name: "Тарифы на объём", url: "/tariffs/volume" },
  { name: "Вопросы и ответы", url: "/faq" },
  { name: "Кастомный тариф", url: "/tariffconstructor" },
  { name: "Корзина", url: "/basket" },
];

const Transition = React.forwardRef(function Transition(
  props: TransitionProps & {
    children: React.ReactElement;
  },

  ref: React.Ref<null>
) {
  return <Slide direction={"left"} ref={ref} {...props} />;
});

interface DialogMenuProps {
  open: boolean;
  handleClose: () => void;
}

export default function DialogMenu({ open, handleClose }: DialogMenuProps) {
  const theme = useTheme();
  const location = useLocation();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <Dialog
      fullScreen
      sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
      open={open}
      onClose={handleClose}
      TransitionComponent={Transition}
    >
      <AppBar
        sx={{
          position: "relative",
          background: location.pathname === "/" ? "#333647" : "#FFFFFF",
          boxShadow: "none",
          height: isMobile ? "66px" : "100px",
        }}
      >
        <Toolbar
          sx={{
            display: "flex",
            justifyContent: "space-between",
            svg: { color: "#000000" },
          }}
        >
          {isMobile && (
            <Box sx={{ mt: "6px" }}>
              <img src={location.pathname === "/" ? logotip : logotipBlack} alt="icon" />
            </Box>
          )}
          <IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
            <CloseIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <List sx={{ background: location.pathname === "/" ? "#333647" : "#FFFFFF", height: "100vh", p: "0" }}>
        <ListItem sx={{ pl: "40px", flexDirection: "column", alignItems: isMobile ? "stretch" : "end" }}>
          {arrayMenu.map(({ name, url }) => (
            <Link
              key={name}
              to={url}
              style={{
                textDecoration: "none",
                height: "20px",
                marginBottom: "25px",
              }}
            >
              <Button
                disableRipple
                variant="text"
                sx={{
                  fontWeight: "500",
                  color: location.pathname === url ? "#7E2AEA" : location.pathname === "/" ? "white" : "black",
                  height: "20px",
                  textTransform: "none",
                  fontSize: "16px",
                  "&:hover": {
                    background: "none",
                    color: "#7E2AEA",
                  },
                }}
              >
                {name}
              </Button>
            </Link>
          ))}
        </ListItem>
        {isMobile ? (
          location.pathname === "/" ? (
            <Button
              variant="outlined"
              sx={{
                width: "188px",
                color: "white",
                border: "1px solid white",
                ml: "40px",
                mt: "35px",
                textTransform: "none",
                fontWeight: "400",
                fontSize: "18px",
                lineHeight: "24px",
                borderRadius: "8px",
                padding: "8px 17px",
              }}
            >
              Личные кабинет
            </Button>
          ) : (
            <Box
              sx={{
                width: "100%",
                height: "72px",
                background: "#F2F3F7",
                display: "flex",
                alignItems: "center",
                position: "absolute",
                bottom: "0",
              }}
            >
              <CustomAvatar
                sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
              />
              <Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
                <Typography
                  sx={{
                    fontSize: "12px",
                    lineHeight: "14px",
                    color: theme.palette.grey3.main,
                  }}
                >
                  Мой баланс
                </Typography>
                <Typography variant="body2" color={theme.palette.brightPurple.main}>
                  00.00 руб.
                </Typography>
              </Box>
            </Box>
          )
        ) : (
          <Box
            sx={{
              position: "absolute",
              right: "40px",
              bottom: "60px",
            }}
          >
            <img src={location.pathname === "/" ? logotip : logotipBlack} alt="icon" />
          </Box>
        )}
      </List>
    </Dialog>
  );
}