feat: Tabs mobile styles
This commit is contained in:
IlyaDoronin
parent
2cf2b0521f
commit
d0af063172
3
src/assets/icons/forward.svg
Normal file
3
src/assets/icons/forward.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -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={{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user