diff --git a/src/components/Drawers.tsx b/src/components/Drawers.tsx index 63df3b6..b3f07a9 100644 --- a/src/components/Drawers.tsx +++ b/src/components/Drawers.tsx @@ -40,6 +40,7 @@ export default function Drawers() { const navigate = useNavigate(); const theme = useTheme(); const upMd = useMediaQuery(theme.breakpoints.up("md")); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isDrawerOpen = useCartStore((state) => state.isDrawerOpen); const cart = useCart(); const userAccount = useUserStore((state) => state.userAccount); @@ -65,7 +66,7 @@ export default function Drawers() { const totalPriceAfterDiscounts = cart.priceAfterDiscounts; return ( - + {location.pathname !== "/" diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 8a07370..c7c17b4 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -11,7 +11,7 @@ interface Props { export default function Navbar({ isLoggedIn, children }: Props) { const theme = useTheme(); - const upMd = useMediaQuery(theme.breakpoints.up("md")); + const upMd = useMediaQuery(theme.breakpoints.up(1000)); return ( (null); const userAccount = useUserStore((state) => state.userAccount); const { tickets, apiPage, ticketsPerPage } = useTicketStore((state) => state); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(550)); useTickets({ url: "https://hub.pena.digital/heruvym/getTickets", @@ -47,8 +57,6 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) { onError: () => {}, }); - const theme = useTheme(); - const handleClose = () => { setOpen(false); }; @@ -75,7 +83,7 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) { outerContainerSx={{ backgroundColor: theme.palette.navbarbg.main, }} - sx={{ height: "51px", padding: "0" }} + sx={{ height: isMobile ? "51px" : "80px", padding: "0" }} > )} - - + + path:nth-child(1)": { fill: "#FFFFFF" }, - "& svg > path:nth-child(2)": { fill: "#FFFFFF" }, - "& svg > path:nth-child(3)": { stroke: "#FFFFFF" }, - }, - }} - > - path:nth-child(1)": { fill: "#FFFFFF" }, + "& svg > path:nth-child(2)": { fill: "#FFFFFF" }, + "& svg > path:nth-child(3)": { stroke: "#FFFFFF" }, + }, + }} + > + + + + + + + setOpenNotificationsModal((isOpened) => !isOpened) + } + aria-label="cart" sx={{ - "& .MuiBadge-badge": { - display: userAccount?.cart.length ? "flex" : "none", - color: "#FFFFFF", + width: "30px", + height: "30px", + background: theme.palette.background.default, + borderRadius: "6px", + "&:hover": { background: theme.palette.brightPurple.main, - transform: "scale(0.7) translate(50%, -50%)", - top: "2px", - right: "3px", - fontWeight: 400, + "& .MuiBadge-badge": { + background: theme.palette.background.default, + color: theme.palette.brightPurple.main, + }, + "& svg > path:first-child": { fill: "#FFFFFF" }, + "& svg > path:last-child": { stroke: "#FFFFFF" }, }, }} > - - - - - setOpenNotificationsModal((isOpened) => !isOpened)} - aria-label="cart" - sx={{ - width: "30px", - height: "30px", - background: theme.palette.background.default, - borderRadius: "6px", - "&:hover": { - background: theme.palette.brightPurple.main, - "& .MuiBadge-badge": { - background: theme.palette.background.default, - color: theme.palette.brightPurple.main, - }, - "& svg > path:first-child": { fill: "#FFFFFF" }, - "& svg > path:last-child": { stroke: "#FFFFFF" }, - }, - }} - > - - - - + + + + + + )} - + + + {!isMobile && } @@ -211,7 +227,7 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) { top: "0", width: 210, height: "100%", - marginTop: "51px", + marginTop: isMobile ? "51px" : "80px", }, }} variant="persistent" @@ -224,7 +240,7 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) { sx={{ width: "100%", minWidth: "100%", - minHeight: "calc(100vh - 51px)", + minHeight: `calc(100vh - ${isMobile ? 51 : 80}px)`, flexGrow: 1, transition: theme.transitions.create("margin", { easing: theme.transitions.easing.sharp, diff --git a/src/components/Navbar/NavbarFull.tsx b/src/components/Navbar/NavbarFull.tsx index fb38e44..ea65d5e 100644 --- a/src/components/Navbar/NavbarFull.tsx +++ b/src/components/Navbar/NavbarFull.tsx @@ -1,28 +1,10 @@ -import { Link, useLocation, useNavigate } from "react-router-dom"; -import { - Box, - Button, - Container, - IconButton, - Typography, - useTheme, -} from "@mui/material"; +import { Link, useLocation } from "react-router-dom"; +import { Box, Button, Container, useTheme } from "@mui/material"; import SectionWrapper from "../SectionWrapper"; -import LogoutIcon from "../icons/LogoutIcon"; -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 { clearTickets } from "@root/stores/tickets"; - -import { currencyFormatter } from "@root/utils/currencyFormatter"; - -import walletIcon from "@root/assets/Icons/wallet_icon.svg"; +import { NavbarPanel } from "./NavbarPanel"; +import { useUserStore } from "@root/stores/user"; import type { ReactNode } from "react"; @@ -33,24 +15,8 @@ interface Props { export default function NavbarFull({ isLoggedIn, children }: Props) { const theme = useTheme(); - const navigate = useNavigate(); const location = useLocation(); const user = useUserStore((state) => state.user); - const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0; - - async function handleLogoutClick() { - try { - await logout(); - clearAuthToken(); - clearUserData(); - clearCustomTariffs(); - clearTickets(); - navigate("/"); - } catch (error: any) { - const message = getMessageFromFetchError(error, "Не удалось выйти"); - if (message) enqueueSnackbar(message); - } - } return ( @@ -76,53 +42,7 @@ export default function NavbarFull({ isLoggedIn, children }: Props) { - - - navigate("/wallet")} - > - wallet - - - - Мой баланс - - - {currencyFormatter.format(cash / 100)} - - - - - - - + ) : ( <> diff --git a/src/components/Navbar/NavbarPanel.tsx b/src/components/Navbar/NavbarPanel.tsx new file mode 100644 index 0000000..109fb34 --- /dev/null +++ b/src/components/Navbar/NavbarPanel.tsx @@ -0,0 +1,89 @@ +import { useNavigate } from "react-router-dom"; +import { + Box, + IconButton, + Typography, + useTheme, + useMediaQuery, +} from "@mui/material"; +import LogoutIcon from "../icons/LogoutIcon"; +import CustomAvatar from "./Avatar"; +import Drawers from "../Drawers"; +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 { clearTickets } from "@root/stores/tickets"; + +import { currencyFormatter } from "@root/utils/currencyFormatter"; + +import walletIcon from "@root/assets/Icons/wallet_icon.svg"; + +export const NavbarPanel = () => { + const navigate = useNavigate(); + const theme = useTheme(); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0; + + async function handleLogoutClick() { + try { + await logout(); + clearAuthToken(); + clearUserData(); + clearCustomTariffs(); + clearTickets(); + navigate("/"); + } catch (error: any) { + const message = getMessageFromFetchError(error, "Не удалось выйти"); + if (message) enqueueSnackbar(message); + } + } + + return ( + + + navigate("/wallet")} + > + wallet + + + + Мой баланс + + + {currencyFormatter.format(cash / 100)} + + + + + + + + ); +};