Drawers cerate

src/components/CustomRadioButtons.tsx

@@ -20,7 +20,7 @@ export const CustomRadioButtons: React.FC<Props> = ({ setType, _mocsk_ }) => {
     <List
       sx={{
         marginLeft: "-10px",
-        width: "430px",
+        width: upSm ? "430px" : "auto",
         display: "flex",
         fontWeight: "500",
         fontSize: " 16px",

src/components/Drawer/CustomWrapperDrawer.tsx

@@ -0,0 +1,163 @@
+import { useState } from "react";
+import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
+
+import ClearIcon from "@mui/icons-material/Clear";
+import { basketStore } from "@root/stores/BasketStore";
+
+interface Props {
+  type: string;
+  content: {
+    name: string;
+    desc: string;
+    id: string;
+    privelegeid: string;
+    amount: number;
+    price: number;
+  }[];
+}
+
+export default function CustomWrapperDrawer({ type, content }: Props) {
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const upSm = useMediaQuery(theme.breakpoints.up("sm"));
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+
+  const { remove } = basketStore();
+
+  const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0);
+  const name = Object.values(content).map(({ name }) => name);
+
+  return (
+    <Box
+      sx={{
+        overflow: "hidden",
+        borderRadius: "12px",
+        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
+                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
+                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
+                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
+                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
+                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
+                              4749)`,
+      }}
+    >
+      <Box
+        sx={{
+          backgroundColor: "white",
+          "&:first-of-type": {
+            borderTopLeftRadius: "12px",
+            borderTopRightRadius: "12px",
+          },
+          "&:last-of-type": {
+            borderBottomLeftRadius: "12px",
+            borderBottomRightRadius: "12px",
+          },
+          "&:not(:last-of-type)": {
+            borderBottom: `1px solid ${theme.palette.grey2.main}`,
+          },
+        }}
+      >
+        <Box
+          onClick={() => setIsExpanded((prev) => !prev)}
+          sx={{
+            height: "72px",
+
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            cursor: "pointer",
+            userSelect: "none",
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: upMd ? "20px" : "16px",
+              lineHeight: upMd ? undefined : "19px",
+              fontWeight: 500,
+              color: theme.palette.text.secondary,
+              px: 0,
+            }}
+          >
+            {name[0]}
+          </Typography>
+
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "flex-end",
+              height: "100%",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              sx={{ pr: "11px", color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}
+            >
+              {totalSum} руб.
+            </Typography>
+            <Box
+              sx={{
+                paddingLeft: upSm ? "24px" : 0,
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+              }}
+            ></Box>
+          </Box>
+        </Box>
+        {isExpanded &&
+          Object.values(content).map(({ desc, id, privelegeid, amount, price }, index) => (
+            <Box
+              key={index}
+              sx={{
+                py: upMd ? "10px" : undefined,
+                pt: upMd ? undefined : "15px",
+                pb: upMd ? undefined : "20px",
+
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                gap: "15px",
+              }}
+            >
+              <Typography
+                sx={{
+                  width: "200px",
+                  whiteSpace: "nowrap",
+                  fontSize: upMd ? undefined : "16px",
+                  lineHeight: upMd ? undefined : "19px",
+                  color: theme.palette.grey3.main,
+                }}
+              >
+                {desc}
+              </Typography>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  gap: "10px",
+                  alignItems: "center",
+                }}
+              >
+                <Typography
+                  sx={{
+                    color: theme.palette.grey3.main,
+                    fontSize: "20px",
+                    fontWeight: 500,
+                  }}
+                >
+                  {price} руб.
+                </Typography>
+
+                <SvgIcon
+                  sx={{ cursor: "pointer", color: "#7E2AEA" }}
+                  onClick={() => remove(type, id)}
+                  component={ClearIcon}
+                />
+              </Box>
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  );
+}

src/components/Drawer/DrawerTotalPrice.tsx

@@ -0,0 +1,85 @@
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+import CustomButton from "../CustomButton";
+
+export const DrawerTotalPrice = () => {
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const navigate = useNavigate();
+  return (
+    <Box
+      sx={{
+        mt: "40px",
+        pt: upMd ? "30px" : undefined,
+        borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
+      }}
+    >
+      <Box
+        sx={{
+          width: upMd ? "100%" : undefined,
+          display: "flex",
+          flexWrap: "wrap",
+          flexDirection: "column",
+        }}
+      >
+        <Typography variant="h4" mb={upMd ? "18px" : "30px"}>
+          Итоговая цена
+        </Typography>
+        <Typography color={theme.palette.grey3.main}>
+          Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
+          это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          color: theme.palette.grey3.main,
+          pb: "100px",
+          pt: "38px",
+          pl: upMd ? "20px" : undefined,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: upMd ? "column" : "row",
+            alignItems: upMd ? "start" : "center",
+            mt: upMd ? "10px" : "30px",
+            gap: "15px",
+          }}
+        >
+          <Typography
+            color={theme.palette.orange.main}
+            sx={{
+              textDecoration: "line-through",
+              order: upMd ? 1 : 2,
+            }}
+          >
+            20 190 руб.
+          </Typography>
+          <Typography
+            variant="p1"
+            sx={{
+              fontWeight: 500,
+              fontSize: "26px",
+              lineHeight: "31px",
+              order: upMd ? 2 : 1,
+            }}
+          >
+            6 380 руб.
+          </Typography>
+        </Box>
+        <CustomButton
+          variant="contained"
+          onClick={() => navigate("/basket")}
+          sx={{
+            mt: "25px",
+            backgroundColor: theme.palette.brightPurple.main,
+          }}
+        >
+          Оплатить
+        </CustomButton>
+      </Box>
+    </Box>
+  );
+};

src/components/Drawer/Drawers.tsx

@@ -0,0 +1,86 @@
+import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon } from "@mui/material";
+import { IconsCreate } from "@root/lib/IconsCreate";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ClearIcon from "@mui/icons-material/Clear";
+
+import { basketStore } from "@root/stores/BasketStore";
+import { useState } from "react";
+
+import BasketIcon from "../../assets/Icons/BasketIcon.svg";
+import SectionWrapper from "../SectionWrapper";
+import React from "react";
+import CustomWrapperDrawer from "./CustomWrapperDrawer";
+import { DrawerTotalPrice } from "./DrawerTotalPrice";
+
+interface TabPanelProps {
+  index: number;
+  value: number;
+  children?: React.ReactNode;
+  mt: string;
+}
+
+function TabPanel({ index, value, children, mt }: TabPanelProps) {
+  return (
+    <Box hidden={index !== value} sx={{ mt }}>
+      {children}
+    </Box>
+  );
+}
+
+export const Drawers = () => {
+  const [tabIndex, setTabIndex] = useState<number>(0);
+  const { templ, squiz, reducer, open, openDrawer } = basketStore();
+  const theme = useTheme();
+  const upMd = useMediaQuery(theme.breakpoints.up("md"));
+
+  return (
+    <Typography component="div">
+      <Typography onClick={open(true)}>
+        <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
+      </Typography>
+
+      <Drawer anchor={"right"} open={openDrawer} onClose={open(false)}>
+        <SectionWrapper
+          maxWidth="lg"
+          sx={{
+            pl: "0px",
+            pr: "0px",
+            width: "450px",
+          }}
+        >
+          <Box
+            sx={{
+              width: "100%",
+              pt: "20px",
+              pb: "20px",
+              display: "flex",
+              justifyContent: "space-between",
+              bgcolor: "#F2F3F7",
+              gap: "10px",
+              pl: "20px",
+              pr: "20px",
+            }}
+          >
+            {!upMd && (
+              <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
+                <ArrowBackIcon />
+              </IconButton>
+            )}
+            <Typography component="div" sx={{ fontSize: "18px", lineHeight: "21px", font: "Rubick" }}>
+              Корзина
+            </Typography>
+            <SvgIcon onClick={open(false)} sx={{ cursor: "pointer" }} component={ClearIcon} />
+          </Box>
+          <Box sx={{ pl: "20px", pr: "20px" }}>
+            <TabPanel value={tabIndex} index={0} mt={"10px"}>
+              {Object.keys(templ).length > 0 ? <CustomWrapperDrawer type="templ" content={templ} /> : <></>}
+              {Object.keys(squiz).length > 0 ? <CustomWrapperDrawer type="squiz" content={squiz} /> : <></>}
+              {Object.keys(reducer).length > 0 ? <CustomWrapperDrawer type="reducer" content={reducer} /> : <></>}
+            </TabPanel>
+            <DrawerTotalPrice />
+          </Box>
+        </SectionWrapper>
+      </Drawer>
+    </Typography>
+  );
+};

src/components/Navbar/NavbarFull.tsx

@@ -1,20 +1,19 @@
+import Icon from "@mui/material/Icon";
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
 
+import { Drawers } from "../Drawer/Drawers";
 import NavMenuItem from "../NavMenuItem";
 import SectionWrapper from "../SectionWrapper";
 
-import { basketStore } from "@root/stores/BasketStore";
+import { basketStore } from "@stores/BasketStore";
-import { IconsCreate } from "@root/lib/IconsCreate";
 import { authStore } from "@stores/makeRequest";
 
-import BasketIcon from "../../assets/Icons/BasketIcon.svg";
 import LogoutIcon from "../icons/LogoutIcon";
 import WalletIcon from "../icons/WalletIcon";
 import CustomAvatar from "./Avatar";
 import PenaLogo from "../PenaLogo";
-import Icon from "@mui/material/Icon";
+import { useLocation } from "react-router-dom";
 
 interface Props {
   isLoggedIn: boolean;
@@ -22,15 +21,18 @@ interface Props {
 
 export default function NavbarFull({ isLoggedIn }: Props) {
   const theme = useTheme();
-  const navigate = useNavigate();
   const { clearToken } = authStore();
   const [basketQuantity, setBasketQuantity] = useState<number>(0);
+  const location = useLocation();
 
-  const { templ, squiz, reducer } = basketStore();
+  const { templ, squiz, reducer, open } = basketStore();
 
   useEffect(() => {
     setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length);
-  });
+    if (location.pathname === "/basket") {
+      open(false)();
+    }
+  }, [templ, squiz, location.pathname, open]);
 
   async function handleLogoutClick() {
     clearToken();
@@ -73,9 +75,9 @@ export default function NavbarFull({ isLoggedIn }: Props) {
           ml: "auto",
         }}
       >
-        <IconButton onClick={() => navigate("/basket")} sx={{ p: 0 }}>
+        <IconButton sx={{ p: 0 }}>
           <Typography component="div" sx={{ position: "absolute" }}>
-            <IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
+            <Drawers />
           </Typography>
           {basketQuantity && (
             <Icon

src/pages/Basket/Basket.tsx

@@ -1,11 +1,12 @@
 import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
 import SectionWrapper from "@components/SectionWrapper";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import TotalPrice from "@components/TotalPrice";
 import { basketStore } from "@root/stores/BasketStore";
 import CustomWrapper from "./CustomWrapper";
 import { StepperSquiz } from "@root/components/StepperSquiz";
+import { useLocation } from "react-router-dom";
 
 interface TabPanelProps {
   index: number;
@@ -24,16 +25,19 @@ function TabPanel({ index, value, children, mt }: TabPanelProps) {
 
 export const Basket = () => {
   const theme = useTheme();
-
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
-  const [tabIndex, setTabIndex] = useState<number>(0);
 
-  const { templ, squiz, reducer } = basketStore();
+  const [tabIndex, setTabIndex] = useState<number>(0);
+  const location = useLocation();
+
+  const { templ, squiz, reducer, open } = basketStore();
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setTabIndex(newValue);
   };
 
+  open(false);
+
   return (
     <SectionWrapper
       maxWidth="lg"
@@ -56,7 +60,9 @@ export const Basket = () => {
             <ArrowBackIcon />
           </IconButton>
         )}
-        <Typography variant="h4">Корзина</Typography>
+        <Typography component="h4" variant="h4">
+          Корзина
+        </Typography>
       </Box>
       <TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
         {Object.keys(templ).length > 0 ? <CustomWrapper type="templ" content={templ} /> : <></>}

src/stores/BasketStore.ts

@@ -39,6 +39,7 @@ export const basketStore = create<any>()((set, get) => ({
     },
   },
   reducer: {},
+  openDrawer: false,
   add: ({ id, obj, type }: any) => {
     const store: any = get()[type] || {};
     const newStore = {
@@ -62,4 +63,8 @@ export const basketStore = create<any>()((set, get) => ({
 
     set({ [type]: newStore });
   },
+
+  open: (boolean: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+    set(() => ({ openDrawer: boolean }));
+  },
 }));