From d3d75cb004c67eb0c80bf15ef851e177855870c0 Mon Sep 17 00:00:00 2001 From: Nastya Date: Tue, 1 Aug 2023 00:20:17 +0300 Subject: [PATCH] old dialog navbar --- src/components/NavbarOld/Avatar.tsx | 42 ++++ src/components/NavbarOld/DialogMenu.tsx | 210 +++++++++++++++++++ src/components/NavbarOld/Navbar.tsx | 15 ++ src/components/NavbarOld/NavbarCollapsed.tsx | 55 +++++ src/components/NavbarOld/NavbarFull.tsx | 133 ++++++++++++ src/pages/Landing/Landing.tsx | 2 +- 6 files changed, 456 insertions(+), 1 deletion(-) create mode 100644 src/components/NavbarOld/Avatar.tsx create mode 100644 src/components/NavbarOld/DialogMenu.tsx create mode 100644 src/components/NavbarOld/Navbar.tsx create mode 100644 src/components/NavbarOld/NavbarCollapsed.tsx create mode 100644 src/components/NavbarOld/NavbarFull.tsx diff --git a/src/components/NavbarOld/Avatar.tsx b/src/components/NavbarOld/Avatar.tsx new file mode 100644 index 0000000..d47875a --- /dev/null +++ b/src/components/NavbarOld/Avatar.tsx @@ -0,0 +1,42 @@ +import { Avatar, Box, IconButton, SxProps, Theme, Typography, useTheme } from "@mui/material"; +import { useNavigate } from "react-router-dom"; + + +interface Props { + sx?: SxProps; +} +export default function CustomAvatar({ sx }: Props) { + const theme = useTheme(); + const navigate = useNavigate() + + return ( + navigate("/settings")} + sx={{ + ml: "27px", + height: "36px", width: "36px", + ...sx, + }} + > + + AA + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/components/NavbarOld/DialogMenu.tsx b/src/components/NavbarOld/DialogMenu.tsx new file mode 100644 index 0000000..e86846f --- /dev/null +++ b/src/components/NavbarOld/DialogMenu.tsx @@ -0,0 +1,210 @@ +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"; +import { useUserStore } from "@root/stores/user"; +import { currencyFormatter } from "@root/utils/currencyFormatter"; + +const arrayMenu = [ + { name: "Главная", url: "/" }, + { name: "Тарифы", url: "/tariffs" }, + { name: "Тарифы на время", url: "/tariffs/time" }, + { name: "Тарифы на объём", url: "/tariffs/volume" }, + { name: "Кастомный тариф", url: "/tariffconstructor" }, + { name: "Вопросы и ответы", url: "/faq" }, + { name: "История", url: "/history" }, + { name: "Оплата", url: "/payment" }, + { name: "Оплата", url: "/wallet" }, + { name: "Корзина", url: "/basket" }, +]; + +const Transition = React.forwardRef(function Transition( + props: TransitionProps & { + children: React.ReactElement; + }, + + ref: React.Ref +) { + return ; +}); + +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)); + const user = useUserStore((state) => state.user); + const cash = useUserStore(state => state.userAccount?.wallet.cash) ?? 0; + + return ( + + + + {isMobile && ( + + icon + + )} + + + + + + + + {arrayMenu.map(({ name, url }, index) => ( + + ))} + + {isMobile ? ( + location.pathname === "/" ? ( + + ) : ( + + + + + Мой баланс + + + {currencyFormatter.format(cash / 100)} + + + + ) + ) : ( + <> + + + icon + + + )} + + + ); +} diff --git a/src/components/NavbarOld/Navbar.tsx b/src/components/NavbarOld/Navbar.tsx new file mode 100644 index 0000000..a191c67 --- /dev/null +++ b/src/components/NavbarOld/Navbar.tsx @@ -0,0 +1,15 @@ +import { useMediaQuery, useTheme } from "@mui/material"; +import NavbarCollapsed from "./NavbarCollapsed"; +import NavbarFull from "./NavbarFull"; + +interface Props { + isCollapsed?: boolean; + isLoggedIn: boolean; +} + +export default function Navbar({ isLoggedIn, isCollapsed = false }: Props) { + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + + return upMd ? : ; +} diff --git a/src/components/NavbarOld/NavbarCollapsed.tsx b/src/components/NavbarOld/NavbarCollapsed.tsx new file mode 100644 index 0000000..838bc32 --- /dev/null +++ b/src/components/NavbarOld/NavbarCollapsed.tsx @@ -0,0 +1,55 @@ +import { useState } from "react"; +import { IconButton, useTheme } from "@mui/material"; +import MenuIcon from "@mui/icons-material/Menu"; + +import SectionWrapper from "../SectionWrapper"; + +import PenaLogo from "../PenaLogo"; +import DialogMenu from "./DialogMenu"; +import { Link } from "react-router-dom"; + +interface Props { + isLoggedIn: boolean; +} + +export default function NavbarCollapsed({ isLoggedIn }: Props) { + const [open, setOpen] = useState(false); + + const theme = useTheme(); + + const handleClickOpen = () => { + setOpen(true); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + + + + + + + + + ); +} diff --git a/src/components/NavbarOld/NavbarFull.tsx b/src/components/NavbarOld/NavbarFull.tsx new file mode 100644 index 0000000..f927b8c --- /dev/null +++ b/src/components/NavbarOld/NavbarFull.tsx @@ -0,0 +1,133 @@ +import { Link, useLocation, useNavigate } from "react-router-dom"; +import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material"; +import SectionWrapper from "../SectionWrapper"; +import LogoutIcon from "../icons/LogoutIcon"; +import WalletIcon from "../icons/WalletIcon"; +import CustomAvatar from "./Avatar"; +import Drawers from "../Drawers"; +import PenaLogo from "../PenaLogo"; +import Menu from "../Menu"; +import { logout } from "@root/api/auth"; +import { enqueueSnackbar } from "notistack"; +import { clearUserData, useUserStore } from "@root/stores/user"; +import { clearAuthToken, getMessageFromFetchError } from "@frontend/kitui"; +import { clearCustomTariffs } from "@root/stores/customTariffs"; +import { currencyFormatter } from "@root/utils/currencyFormatter"; + +interface Props { + isLoggedIn: boolean; +} + +export default function NavbarFull({ isLoggedIn }: Props) { + const theme = useTheme(); + const location = useLocation(); + const navigate = useNavigate(); + const user = useUserStore((state) => state.user); + const cash = useUserStore(state => state.userAccount?.wallet.cash) ?? 0; + + async function handleLogoutClick() { + try { + await logout(); + clearAuthToken(); + clearUserData(); + clearCustomTariffs(); + navigate("/"); + } catch (error: any) { + const message = getMessageFromFetchError(error, "Не удалось выйти"); + if (message) enqueueSnackbar(message); + } + } + + return isLoggedIn ? ( + + + + + + navigate("/wallet")} + > + + + + + Мой баланс + + + {currencyFormatter.format(cash / 100)} + + + + + + + + + ) : ( + <> + + + + + + + ); +} diff --git a/src/pages/Landing/Landing.tsx b/src/pages/Landing/Landing.tsx index 458e22c..f6e2277 100644 --- a/src/pages/Landing/Landing.tsx +++ b/src/pages/Landing/Landing.tsx @@ -7,7 +7,7 @@ import Section5 from "./Section5"; import FloatingSupportChat from "@root/components/FloatingSupportChat/FloatingSupportChat"; import Footer from "@root/components/Footer"; import darkTheme from "@root/utils/themes/dark"; -import Navbar from "@root/components/Navbar/Navbar"; +import Navbar from "@root/components/NavbarOld/Navbar"; interface Props { templaterOnly?: boolean;