Initial commit

2025-10-04 18:22:24 +03:00
commit 2852c2c054
291 changed files with 38109 additions and 0 deletions
--- a/src/layouts/app/HeaderMenuDrawer.tsx
+++ b/src/layouts/app/HeaderMenuDrawer.tsx
@@ -0,0 +1,135 @@
+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 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 = {
+    color: themeName === "dark" ? "white" : "#1f2937",
+    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,
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          position: "fixed",
+          zIndex: 999,
+          [isRTL ? "left" : "right"]: 0,
+          top: "30%",
+          backgroundColor: themeName === "dark" ? "#111827" : "#FFF",
+          [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={"50%"}
+        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>
+    </>
+  );
+}