From d0af063172f8ed1dc0341c105748106862194409 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 26 Jul 2023 12:59:40 +0300
Subject: [PATCH] feat: Tabs mobile styles

---
 src/assets/icons/forward.svg            |   3 +
 src/pages/dashboard/ModalUser/index.tsx | 103 ++++++++++++++++--------
 2 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/icons/forward.svg

diff --git a/src/assets/icons/forward.svg b/src/assets/icons/forward.svg
new file mode 100644
index 0000000..5ee1ea9
--- /dev/null
+++ b/src/assets/icons/forward.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.03641 9.47C4.92841 9.47 4.83841 9.44 4.76641 9.38C4.70641 9.308 4.67641 9.218 4.67641 9.11V8.39C4.67641 8.234 4.70041 8.114 4.74841 8.03C4.79641 7.934 4.88041 7.826 5.00041 7.706L7.70041 5.078L5.00041 2.45C4.88041 2.33 4.79641 2.228 4.74841 2.144C4.70041 2.048 4.67641 1.922 4.67641 1.766V1.046C4.67641 0.937999 4.70641 0.853999 4.76641 0.793999C4.83841 0.722 4.92841 0.686 5.03641 0.686C5.09641 0.686 5.16241 0.704 5.23441 0.739999C5.30641 0.763999 5.37241 0.806 5.43241 0.866L8.92441 4.25C9.03241 4.358 9.10441 4.46 9.14041 4.556C9.17641 4.652 9.20041 4.748 9.21241 4.844V5.312C9.20041 5.408 9.17641 5.504 9.14041 5.6C9.10441 5.696 9.03241 5.798 8.92441 5.906L5.43241 9.29C5.37241 9.35 5.30641 9.398 5.23441 9.434C5.16241 9.458 5.09641 9.47 5.03641 9.47ZM0.428414 9.47C0.320414 9.47 0.230414 9.44 0.158414 9.38C0.0864141 9.308 0.0504141 9.218 0.0504141 9.11V8.39C0.0504141 8.234 0.0744141 8.114 0.122414 8.03C0.170414 7.934 0.254414 7.826 0.374414 7.706L3.09241 5.078L0.374414 2.45C0.254414 2.33 0.170414 2.228 0.122414 2.144C0.0744141 2.048 0.0504141 1.922 0.0504141 1.766V1.046C0.0504141 0.937999 0.0864141 0.853999 0.158414 0.793999C0.230414 0.722 0.320414 0.686 0.428414 0.686C0.488414 0.686 0.548414 0.704 0.608414 0.739999C0.680414 0.763999 0.752414 0.806 0.824414 0.866L4.29841 4.25C4.40641 4.358 4.47841 4.46 4.51441 4.556C4.56241 4.652 4.59241 4.748 4.60441 4.844V5.312C4.59241 5.408 4.56241 5.504 4.51441 5.6C4.47841 5.696 4.40641 5.798 4.29841 5.906L0.824414 9.29C0.752414 9.35 0.680414 9.398 0.608414 9.434C0.548414 9.458 0.488414 9.47 0.428414 9.47Z" fill="#7E2AEA"/>
+</svg>
diff --git a/src/pages/dashboard/ModalUser/index.tsx b/src/pages/dashboard/ModalUser/index.tsx
index cbd52f0..34cc5c5 100644
--- a/src/pages/dashboard/ModalUser/index.tsx
+++ b/src/pages/dashboard/ModalUser/index.tsx
@@ -18,12 +18,12 @@ import { TransactionsTab } from "./TransactionsTab";
 import { VerificationTab } from "./VerificationTab";
 
 import { authStore } from "@root/stores/auth";
-import theme from "@root/theme";
 
 import userIcon from "@root/assets/icons/user.svg";
 import packageIcon from "@root/assets/icons/package.svg";
 import transactionsIcon from "@root/assets/icons/transactions.svg";
 import checkIcon from "@root/assets/icons/check.svg";
+import forwardIcon from "@root/assets/icons/forward.svg";
 
 import type { SyntheticEvent } from "react";
 
@@ -54,6 +54,7 @@ export type Verification = {
 const ModalUser = () => {
   const [user, setUser] = useState<Verification | null>(null);
   const [value, setValue] = useState<number>(0);
+  const [openNavigation, setOpenNavigation] = useState<boolean>(false);
   const { userId } = useParams();
   const { makeRequest } = authStore();
   const theme = useTheme();
@@ -89,13 +90,13 @@ const ModalUser = () => {
               transform: "translate(-50%, -50%)",
               display: "flex",
               flexDirection: "column",
-              width: "100%",
+              width: mobile ? "100%" : "98vw",
               maxWidth: tablet ? "920px" : "1070px",
-              height: "605px",
+              height: mobile ? "100%" : "605px",
               bgcolor: theme.palette.background.default,
               color: theme.palette.secondary.main,
               boxShadow: 24,
-              borderRadius: "12px",
+              borderRadius: mobile ? "0" : "12px",
               outline: "none",
               overflow: "hidden",
             }}
@@ -116,40 +117,72 @@ const ModalUser = () => {
             </Typography>
 
             <Box sx={{ width: "100%", height: "100%", display: "flex" }}>
-              <Tabs
-                orientation="vertical"
-                variant="scrollable"
-                value={value}
-                onChange={(event: SyntheticEvent, newValue: number) =>
-                  setValue(newValue)
-                }
-                aria-label="Vertical tabs example"
-                sx={{ padding: "10px", width: "100%", maxWidth: "276px" }}
-                TabIndicatorProps={{ style: { background: "transparent" } }}
+              <Box
+                sx={{
+                  width: "100%",
+                  height: "100%",
+                  maxWidth: mobile
+                    ? openNavigation
+                      ? "276px"
+                      : "68px"
+                    : "276px",
+                }}
               >
-                {TABS.map(({ name, icon }) => (
-                  <Tab
-                    icon={<img src={icon} alt={name} />}
-                    iconPosition="start"
-                    key={name}
-                    label={name}
-                    sx={{
-                      justifyContent: "flex-start",
-                      textTransform: "inherit",
-                      minHeight: "auto",
-                      fontSize: "15px",
-                      padding: "15px",
-                      marginBottom: "5px",
-                      color: theme.palette.common.black,
-                      "&.MuiButtonBase-root.Mui-selected": {
-                        borderRadius: "12px",
-                        color: "#7E2AEA",
-                        background: "rgba(126, 42, 234, 0.07)",
-                      },
+                {mobile && (
+                  <img
+                    src={forwardIcon}
+                    alt="forward"
+                    style={{
+                      display: "block",
+                      width: "11px",
+                      margin: "25px 0 15px 28px",
+                      transform: openNavigation ? "rotate(180deg)" : "",
+                      transition: ".2s",
                     }}
+                    onClick={() => setOpenNavigation((isOpened) => !isOpened)}
                   />
-                ))}
-              </Tabs>
+                )}
+                <Tabs
+                  orientation="vertical"
+                  variant="scrollable"
+                  value={value}
+                  onChange={(event: SyntheticEvent, newValue: number) =>
+                    setValue(newValue)
+                  }
+                  aria-label="Vertical tabs example"
+                  sx={{
+                    padding: mobile ? "16px" : "10px",
+                    width: "100%",
+                  }}
+                  TabIndicatorProps={{ style: { background: "transparent" } }}
+                >
+                  {TABS.map(({ name, icon }) => (
+                    <Tab
+                      icon={<img src={icon} alt={name} />}
+                      iconPosition="start"
+                      key={name}
+                      label={mobile ? (openNavigation ? name : "") : name}
+                      sx={{
+                        justifyContent: "flex-start",
+                        textTransform: "inherit",
+                        minHeight: "auto",
+                        minWidth: "auto",
+                        fontSize: "15px",
+                        padding: mobile ? "9px" : "15px",
+                        marginBottom: mobile ? "15px" : "5px",
+                        color: theme.palette.common.black,
+                        whiteSpace: "nowrap",
+                        lineHeight: "18px",
+                        "&.MuiButtonBase-root.Mui-selected": {
+                          borderRadius: "12px",
+                          color: "#7E2AEA",
+                          background: "rgba(126, 42, 234, 0.07)",
+                        },
+                      }}
+                    />
+                  ))}
+                </Tabs>
+              </Box>
 
               <Box
                 sx={{