137 lines
4.1 KiB
TypeScript
137 lines
4.1 KiB
TypeScript
import { CloseOutlined } from "@ant-design/icons";
|
|
import { Button, Drawer, Grid } from "antd";
|
|
import BackIcon from "components/Icons/BackIcon";
|
|
import NextIcon from "components/Icons/NextIcon";
|
|
import ProText from "components/ProText";
|
|
import { useState } from "react";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { componentBackground, darkComponentBackground } from "ThemeConstants";
|
|
import useHeaderMenu from "./hooks/useHeaderMenu";
|
|
|
|
const {useBreakpoint} = Grid;
|
|
|
|
export default function HeaderMenuDrawer() {
|
|
const { isRTL, locale } = useAppSelector((state) => state.locale);
|
|
const {themeName} = useAppSelector(state => state.theme)
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
|
const { menuItems } = useHeaderMenu();
|
|
const {xs } = useBreakpoint();
|
|
const isMobile = xs
|
|
const closeMobileMenu = () => setMobileMenuOpen(false);
|
|
|
|
const mobileMenuLinkStyle = (isActive: boolean): React.CSSProperties => ({
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 16,
|
|
padding: "10px 20px",
|
|
borderRadius: 12,
|
|
fontSize: 14,
|
|
fontWeight: isActive ? 600 : 400,
|
|
marginBottom: 4,
|
|
color: "#1f2937",
|
|
});
|
|
|
|
const actionButtonStyle: React.CSSProperties = {
|
|
height: 32, // isMobile ? 44 : 40,
|
|
minWidth: 32, //isMobile ? 44 : "auto",
|
|
width: 32, //isMobile ? 44 : "auto",
|
|
borderRadius: 8,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: isMobile ? 0 : 8,
|
|
backgroundColor: "none",
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
position: "fixed",
|
|
zIndex: 999,
|
|
[isRTL ? "left" : "right"]: 0,
|
|
top: "30%",
|
|
backgroundColor: themeName === "dark" ? darkComponentBackground : componentBackground,
|
|
[isRTL ? "borderTopRightRadius" : "borderTopLeftRadius"]: 10,
|
|
[isRTL ? "borderBottomRightRadius" : "borderBottomLeftRadius"]: 10,
|
|
border:
|
|
themeName === "dark" ? "1px solid #374151" : "1px solid #FDF1D9",
|
|
}}
|
|
>
|
|
<Button
|
|
type="text"
|
|
icon={isRTL ? <NextIcon /> : <BackIcon />}
|
|
onClick={() => setMobileMenuOpen(true)}
|
|
style={actionButtonStyle}
|
|
/>
|
|
</div>
|
|
<Drawer
|
|
placement={isRTL ? "left" : "right"}
|
|
maskClosable={false}
|
|
onClose={closeMobileMenu}
|
|
open={mobileMenuOpen}
|
|
width={isMobile ? "50%" : "25%"}
|
|
styles={{
|
|
body: {
|
|
padding: 0,
|
|
},
|
|
header: {
|
|
padding: "5px 24px",
|
|
borderBottom: `1px solid ${
|
|
themeName === "dark" ? "#374151" : "#e5e7eb"
|
|
}`,
|
|
},
|
|
}}
|
|
closeIcon={null}
|
|
>
|
|
<div className="mobile-drawer-content">
|
|
<div
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
backgroundColor: "#5F6C7B1F",
|
|
borderRadius: "50%",
|
|
gap: 10,
|
|
[isRTL ? "marginRight" : "marginLeft"]: "80%",
|
|
marginTop: "50px",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<CloseOutlined
|
|
onClick={() => {
|
|
closeMobileMenu();
|
|
}}
|
|
/>
|
|
</div>
|
|
{/* Navigation Links */}
|
|
<div className="mobile-drawer-section">
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
{menuItems.map((item) => (
|
|
<div
|
|
key={item.key}
|
|
onClick={() => {
|
|
closeMobileMenu();
|
|
item.onClick?.();
|
|
}}
|
|
>
|
|
<div
|
|
key={item.key}
|
|
style={mobileMenuLinkStyle(locale === item.key)}
|
|
>
|
|
{item.icon}
|
|
<ProText>{item.label.props.children}</ProText>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
}
|