feat: Navbar tablet styles

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"

src/components/Menu.tsx

@@ -39,6 +39,7 @@ export default function Menu() {
         height: "100%",
         gap: "30px",
         overflow: "hidden",
+        overflowX: "auto",
       }}
     >
       {location.pathname !== "/"

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

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">
+          {isMobile && (
-            <IconButton
+            <>
-              aria-label="cart"
+              <Link to="/cart">
-              sx={{
+                <IconButton
-                width: "30px",
+                  aria-label="cart"
-                height: "30px",
+                  sx={{
-                background: theme.palette.background.default,
+                    width: "30px",
-                borderRadius: "6px",
+                    height: "30px",
-                "&:hover": {
-                  background: theme.palette.brightPurple.main,
-                  "& .MuiBadge-badge": {
                     background: theme.palette.background.default,
-                    color: theme.palette.brightPurple.main,
+                    borderRadius: "6px",
-                  },
+                    "&:hover": {
-                  "& svg > path:nth-child(1)": { fill: "#FFFFFF" },
+                      background: theme.palette.brightPurple.main,
-                  "& svg > path:nth-child(2)": { fill: "#FFFFFF" },
+                      "& .MuiBadge-badge": {
-                  "& svg > path:nth-child(3)": { stroke: "#FFFFFF" },
+                        background: theme.palette.background.default,
-                },
+                        color: theme.palette.brightPurple.main,
-              }}
+                      },
-            >
+                      "& svg > path:nth-child(1)": { fill: "#FFFFFF" },
-              <Badge
+                      "& svg > path:nth-child(2)": { fill: "#FFFFFF" },
-                badgeContent={userAccount?.cart.length}
+                      "& 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": {
+                  width: "30px",
-                    display: userAccount?.cart.length ? "flex" : "none",
+                  height: "30px",
-                    color: "#FFFFFF",
+                  background: theme.palette.background.default,
+                  borderRadius: "6px",
+                  "&:hover": {
                     background: theme.palette.brightPurple.main,
-                    transform: "scale(0.7) translate(50%, -50%)",
+                    "& .MuiBadge-badge": {
-                    top: "2px",
+                      background: theme.palette.background.default,
-                    right: "3px",
+                      color: theme.palette.brightPurple.main,
-                    fontWeight: 400,
+                    },
+                    "& svg > path:first-child": { fill: "#FFFFFF" },
+                    "& svg > path:last-child": { stroke: "#FFFFFF" },
                   },
                 }}
               >
-                <CartIcon />
+                <Badge
-              </Badge>
+                  badgeContent={notificationsCount}
-            </IconButton>
+                  sx={{
-          </Link>
+                    "& .MuiBadge-badge": {
-          <IconButton
+                      display: notificationsCount ? "flex" : "none",
-            ref={bellRef}
+                      color: "#FFFFFF",
-            onClick={() => setOpenNotificationsModal((isOpened) => !isOpened)}
+                      background: theme.palette.brightPurple.main,
-            aria-label="cart"
+                      transform: "scale(0.7) translate(50%, -50%)",
-            sx={{
+                      top: "3px",
-              width: "30px",
+                      right: "3px",
-              height: "30px",
+                      fontWeight: 400,
-              background: theme.palette.background.default,
+                    },
-              borderRadius: "6px",
+                  }}
-              "&:hover": {
+                >
-                background: theme.palette.brightPurple.main,
+                  <BellIcon />
-                "& .MuiBadge-badge": {
+                </Badge>
-                  background: theme.palette.background.default,
+              </IconButton>
-                  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>
           <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,

src/components/Navbar/NavbarFull.tsx

@@ -1,28 +1,10 @@
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation   } from "react-router-dom";
-import {
+import { Box, Button, Container, useTheme } from "@mui/material";
-  Box,
-  Button,
-  Container,
-  IconButton,
-  Typography,
-  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 { NavbarPanel } from "./NavbarPanel";
-import { enqueueSnackbar } from "notistack";
+import { useUserStore } from "@root/stores/user";
-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 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" }}>
+          <NavbarPanel />
-            <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>
         </Container>
       ) : (
         <>

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>
+  );
+};