147 lines
4.2 KiB
TypeScript
147 lines
4.2 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 { useGetMenuQuery } from "redux/api/others";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import useHeaderMenu from "./hooks/useHeaderMenu";
|
|
import "./styles.css";
|
|
|
|
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",
|
|
};
|
|
|
|
const { restaurant } = useAppSelector((state) => state.order);
|
|
|
|
const { isLoading: isLoadingMenu } = useGetMenuQuery(
|
|
restaurant?.restautantId,
|
|
{
|
|
skip: !restaurant?.restautantId,
|
|
},
|
|
);
|
|
return (
|
|
<>
|
|
{!isLoadingMenu && (
|
|
<div className="header-floating-btn">
|
|
<Button
|
|
type="text"
|
|
icon={isRTL ? <NextIcon /> : <BackIcon />}
|
|
onClick={() => setMobileMenuOpen(true)}
|
|
style={actionButtonStyle}
|
|
/>
|
|
</div>
|
|
)}
|
|
<Drawer
|
|
placement={isRTL ? "left" : "right"}
|
|
maskClosable={false}
|
|
onClose={closeMobileMenu}
|
|
open={mobileMenuOpen}
|
|
styles={{
|
|
body: {
|
|
padding: 0,
|
|
},
|
|
header: {
|
|
padding: "5px 24px",
|
|
borderBottom: `1px solid ${
|
|
themeName === "dark" ? "#374151" : "#e5e7eb"
|
|
}`,
|
|
},
|
|
wrapper: {
|
|
width: isMobile ? "50%" : "25%",
|
|
},
|
|
}}
|
|
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
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 12,
|
|
lineHeight: "140%",
|
|
letterSpacing: 0,
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{item.label.props.children}
|
|
</ProText>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
}
|