feat: Navbar tablet styles

2023-08-23 12:27:57 +03:00 · 2023-08-23 12:27:57 +03:00 · 2bf96aff2d
commit 2bf96aff2d
parent d78e8336f7
6 changed files with 191 additions and 164 deletions
--- 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 (
-    <Box sx={{ display: "flex", gap: "20px" }}>
+    <Box sx={{ display: "flex", gap: isTablet ? "10px" : "20px" }}>
      <IconButton
        ref={bellRef}
        aria-label="cart"
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@ -39,6 +39,7 @@ export default function Menu() {
        height: "100%",
        gap: "30px",
        overflow: "hidden",
+        overflowX: "auto",
      }}
    >
      {location.pathname !== "/"
--- 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 (
    <Box
--- a/src/components/Navbar/NavbarCollapsed.tsx
+++ b/src/components/Navbar/NavbarCollapsed.tsx
@ -1,5 +1,12 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { Box, Badge, Drawer, IconButton, useTheme } from "@mui/material";
+import {
+  Box,
+  Badge,
+  Drawer,
+  IconButton,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import { Link } from "react-router-dom";
 import { useTickets } from "@frontend/kitui";

@ -22,6 +29,7 @@ import PenaLogo from "../PenaLogo";
 import CloseIcon from "../icons/CloseIcons";

 import type { ReactNode } from "react";
+import { NavbarPanel } from "./NavbarPanel";

 interface Props {
  isLoggedIn: boolean;
@ -35,6 +43,8 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) {
  const bellRef = useRef<HTMLButtonElement | null>(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" }}
    >
      <Box sx={{ height: "100%" }}>
        <Box
@ -88,7 +96,7 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) {
            display: "flex",
            columnGap: "10px",
            alignItems: "center",
-            height: "51px",
+            height: isMobile ? "51px" : "80px",
            padding: "0 18px",
            background: "#FFFFFF",
          }}
@ -107,81 +115,87 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) {
              <MenuIcon sx={{ height: "30px", width: "30px" }} />
            )}
          </IconButton>
-          <Link to="/cart">
-            <IconButton
-              aria-label="cart"
-              sx={{
-                width: "30px",
-                height: "30px",
-                background: theme.palette.background.default,
-                borderRadius: "6px",
-                "&:hover": {
-                  background: theme.palette.brightPurple.main,
-                  "& .MuiBadge-badge": {
+          {isMobile && (
+            <>
+              <Link to="/cart">
+                <IconButton
+                  aria-label="cart"
+                  sx={{
+                    width: "30px",
+                    height: "30px",
                    background: theme.palette.background.default,
-                    color: theme.palette.brightPurple.main,
-                  },
-                  "& svg > path:nth-child(1)": { fill: "#FFFFFF" },
-                  "& svg > path:nth-child(2)": { fill: "#FFFFFF" },
-                  "& svg > path:nth-child(3)": { stroke: "#FFFFFF" },
-                },
-              }}
-            >
-              <Badge
-                badgeContent={userAccount?.cart.length}
+                    borderRadius: "6px",
+                    "&:hover": {
+                      background: theme.palette.brightPurple.main,
+                      "& .MuiBadge-badge": {
+                        background: theme.palette.background.default,
+                        color: theme.palette.brightPurple.main,
+                      },
+                      "& svg > path:nth-child(1)": { fill: "#FFFFFF" },
+                      "& svg > path:nth-child(2)": { fill: "#FFFFFF" },
+                      "& svg > path:nth-child(3)": { stroke: "#FFFFFF" },
+                    },
+                  }}
+                >
+                  <Badge
+                    badgeContent={userAccount?.cart.length}
+                    sx={{
+                      "& .MuiBadge-badge": {
+                        display: userAccount?.cart.length ? "flex" : "none",
+                        color: "#FFFFFF",
+                        background: theme.palette.brightPurple.main,
+                        transform: "scale(0.7) translate(50%, -50%)",
+                        top: "2px",
+                        right: "3px",
+                        fontWeight: 400,
+                      },
+                    }}
+                  >
+                    <CartIcon />
+                  </Badge>
+                </IconButton>
+              </Link>
+              <IconButton
+                ref={bellRef}
+                onClick={() =>
+                  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" },
                  },
                }}
              >
-                <CartIcon />
-              </Badge>
-            </IconButton>
-          </Link>
-          <IconButton
-            ref={bellRef}
-            onClick={() => 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" },
-              },
-            }}
-          >
-            <Badge
-              badgeContent={notificationsCount}
-              sx={{
-                "& .MuiBadge-badge": {
-                  display: notificationsCount ? "flex" : "none",
-                  color: "#FFFFFF",
-                  background: theme.palette.brightPurple.main,
-                  transform: "scale(0.7) translate(50%, -50%)",
-                  top: "3px",
-                  right: "3px",
-                  fontWeight: 400,
-                },
-              }}
-            >
-              <BellIcon />
-            </Badge>
-          </IconButton>
+                <Badge
+                  badgeContent={notificationsCount}
+                  sx={{
+                    "& .MuiBadge-badge": {
+                      display: notificationsCount ? "flex" : "none",
+                      color: "#FFFFFF",
+                      background: theme.palette.brightPurple.main,
+                      transform: "scale(0.7) translate(50%, -50%)",
+                      top: "3px",
+                      right: "3px",
+                      fontWeight: 400,
+                    },
+                  }}
+                >
+                  <BellIcon />
+                </Badge>
+              </IconButton>
+            </>
+          )}
          <NotificationsModal
            open={openNotificationsModal}
            setOpen={setOpenNotificationsModal}
@ -195,9 +209,11 @@ export default function NavbarCollapsed({ isLoggedIn, children }: Props) {
                watched: ticket.top_message.shown.me === 1,
              }))}
          />
-          <Link to="/" style={{ marginLeft: "auto" }}>
+
+          <Link to="/" style={{ marginLeft: isMobile ? "auto" : 0 }}>
            <PenaLogo width={100} />
          </Link>
+          {!isMobile && <NavbarPanel />}
        </Box>
      </Box>
      <Box sx={{ display: "flex", overflow: open ? "hidden" : "unset" }}>
@ -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,
--- 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 (
    <Box>
@ -76,53 +42,7 @@ export default function NavbarFull({ isLoggedIn, children }: Props) {
            <PenaLogo width={124} />
          </Link>
          <Menu />
-          <Box sx={{ display: "flex", ml: "auto" }}>
-            <Drawers />
-            <IconButton
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                ml: "20px",
-                bgcolor: "#F2F3F7",
-                borderRadius: "6px",
-                height: "36px",
-                width: "36px",
-              }}
-              onClick={() => navigate("/wallet")}
-            >
-              <img src={walletIcon} alt="wallet" />
-            </IconButton>
-            <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}
-              >
-                {currencyFormatter.format(cash / 100)}
-              </Typography>
-            </Box>
-            <CustomAvatar />
-            <IconButton
-              onClick={handleLogoutClick}
-              sx={{
-                ml: "20px",
-                bgcolor: "#F2F3F7",
-                borderRadius: "6px",
-                height: "36px",
-                width: "36px",
-              }}
-            >
-              <LogoutIcon />
-            </IconButton>
-          </Box>
+          <NavbarPanel />
        </Container>
      ) : (
        <>
--- a/src/components/Navbar/NavbarPanel.tsx
+++ 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 (
+    <Box sx={{ display: "flex", ml: "auto" }}>
+      <Drawers />
+      <IconButton
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          ml: isTablet ? "10px" : "20px",
+          bgcolor: "#F2F3F7",
+          borderRadius: "6px",
+          height: "36px",
+          width: "36px",
+        }}
+        onClick={() => navigate("/wallet")}
+      >
+        <img src={walletIcon} alt="wallet" />
+      </IconButton>
+      <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}>
+          {currencyFormatter.format(cash / 100)}
+        </Typography>
+      </Box>
+      <CustomAvatar />
+      <IconButton
+        onClick={handleLogoutClick}
+        sx={{
+          ml: "20px",
+          bgcolor: "#F2F3F7",
+          borderRadius: "6px",
+          height: "36px",
+          width: "36px",
+        }}
+      >
+        <LogoutIcon />
+      </IconButton>
+    </Box>
+  );
+};