opexdev · Hossein-ab99 · Aug 15, 2023 · Aug 15, 2023
diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json
@@ -631,5 +631,102 @@
     "needKYC" : "Access denied for KYC status",
     "reload" : "Try Again",
     "errorText" : "Server connection error"
+  },
+  "aboutUs": {
+    "title": "About US",
+    "text1": "About US content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "text2": "",
+    "subTitle1": "",
+    "text3": "",
+    "p5": "",
+    "p6": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": "",
+    "subTitle2": "",
+    "text4": "",
+    "subTitle3": "",
+    "p11": "",
+    "p12": "",
+    "p13": "",
+    "text5": ""
+  },
+  "commissions": {
+    "title": "Commission",
+    "subTitle1": "Commission content",
+    "text1": "",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "text2": "",
+    "text3": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "text4": ""
+
+  },
+  "transferFees": {
+    "title": "Transfer Fees",
+    "text1": "Transfer Fees content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "text2": "",
+    "text3": "",
+    "text4": "",
+    "subTitle1": "",
+    "text5": "",
+    "subTitle2": "",
+    "text6": "",
+    "subTitle3": "",
+    "text7": "",
+    "subTitle4": "",
+    "text8": ""
+  },
+  "guide": {
+    "title": "Guide",
+    "subTitle1": "Guide content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "rules": {
+    "title": "Rules",
+    "subTitle1": "Rules content",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "contactUs": {
+    "title": "Contact Us",
+    "subTitle1": "Contact Us content",
+    "text1": ""
   }
 }
diff --git a/public/assets/locales/fa/translation.json b/public/assets/locales/fa/translation.json
@@ -46,7 +46,7 @@
   "unit": "واحد",
   "offline": "اتصال اینترنت را بررسی کنید!",
   "improperMobileView ": "فعلاً برای موبایل بهینه نشده است.",
-  "home": "صفحه‌اصلی",
+  "home": "صفحه‌ اصلی",
   "country": {
     "iran" : "ایران",
     "germany" : "آلمان",
@@ -631,5 +631,102 @@
     "needKYC" : "دسترسی این بخش فقط برای کاربران احراز هویت شده مجاز است!",
     "reload" : "تلاش مجدد",
     "errorText" : "خطا در ارتباط با سرور"
+  },
+  "aboutUs": {
+    "title": "درباره ما",
+    "text1": "متن درباره ما",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "text2": "",
+    "subTitle1": "",
+    "text3": "",
+    "p5": "",
+    "p6": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": "",
+    "subTitle2": "",
+    "text4": "",
+    "subTitle3": "",
+    "p11": "",
+    "p12": "",
+    "p13": "",
+    "text5": ""
+  },
+  "commissions": {
+    "title": "کارمزد",
+    "subTitle1": "متن کارمزدها",
+    "text1": "",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "text2": "",
+    "text3": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "text4": ""
+
+  },
+  "transferFees": {
+    "title": "کارمزد انتقال",
+    "text1": "متن کارمزد انتقال",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "text2": "",
+    "text3": "",
+    "text4": "",
+    "subTitle1": "",
+    "text5": "",
+    "subTitle2": "",
+    "text6": "",
+    "subTitle3": "",
+    "text7": "",
+    "subTitle4": "",
+    "text8": ""
+  },
+  "guide": {
+    "title": "راهنما",
+    "subTitle1": "متن راهنما",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "rules": {
+    "title": "قوانین",
+    "subTitle1": "متن قوانین",
+    "p1": "",
+    "p2": "",
+    "p3": "",
+    "p4": "",
+    "p5": "",
+    "p6": "",
+    "subTitle2": "",
+    "p7": "",
+    "p8": "",
+    "p9": "",
+    "p10": ""
+  },
+  "contactUs": {
+    "title": "تماس با ما",
+    "subTitle1": "متن تماس با ما",
+    "text1": ""
   }
 }
diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import classes from './Layout.module.css'
+import {Outlet} from "react-router-dom";
+import LayoutHeader from "./LayoutHeader/LayoutHeader";
+import ScrollBar from "../ScrollBar";
+import Footer from "../Footer/Footer";
+
+const Layout = () => {
+    return (
+        <div className={`${classes.container} width-100 column text-color`}>
+            <LayoutHeader/>
+            <div className={`${classes.content} column`}>
+                <ScrollBar>
+                    <Outlet/>
+                    <Footer/>
+                </ScrollBar>
+            </div>
+        </div>
+    );
+};
+
+export default Layout;
diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css
@@ -0,0 +1,8 @@
+.container {
+    height: 100%;
+    background-color: var(--mainContent);
+    position: relative;
+}
+.content {
+    height: 90%;
+}
diff --git a/src/components/Layout/LayoutHeader/LayoutHeader.js b/src/components/Layout/LayoutHeader/LayoutHeader.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import classes from './LayoutHeader.module.css'
+import Icon from "../../Icon/Icon";
+import {setMarketInterval, showSideMenu} from "../../../store/actions/global";
+import {Link, NavLink, Route, Routes, useLocation, useParams} from "react-router-dom";
+import * as RoutesName from "../../../main/Mobile/Routes/routes";
+import {toAbsoluteUrl} from "../../../utils/utils";
+import {useTranslation} from "react-i18next";
+import {useDispatch, useSelector} from "react-redux";
+
+
+const LayoutHeader = () => {
+
+    const {t} = useTranslation();
+
+    const dispatch = useDispatch();
+
+    const isLogin = useSelector((state) => state.auth.isLogin)
+    const firstName = useSelector((state) => state.auth.firstName)
+    const lastName = useSelector((state) => state.auth.lastName)
+    const location = useLocation();
+
+    const interval = useSelector((state) => state.global.marketInterval)
+
+
+    return (
+        <div className={`${classes.container} width-100 row jc-between ai-center`}>
+            <div className={`width-90 height-100 m-auto row jc-between ai-center`}>
+
+                <div className={`column ai-start width-20`}>
+
+                    <Icon iconName="icon-menu_vertical fs-04 flex" onClick={()=>dispatch(showSideMenu(true))}/>
+                </div>
+
+
+
+
+
+                <div className={`width-60 text-center`}>
+                    <Routes>
+                        <Route path={RoutesName.Landing} element={<h3>{t("Landing.title")}</h3>}/>
+                        <Route path={RoutesName.Commission} element={<h3>{t("commissions.title")}</h3>}/>
+                        <Route path={RoutesName.AboutUs} element={<h3>{t("aboutUs.title")}</h3>}/>
+                        <Route path={RoutesName.TransferFees} element={<h3>{t("transferFees.title")}</h3>}/>
+                        <Route path={RoutesName.Guide} element={<h3>{t("guide.title")}</h3>}/>
+                        <Route path={RoutesName.Rules} element={<h3>{t("rules.title")}</h3>}/>
+                        <Route path={RoutesName.ContactUs} element={<h3>{t("contactUs.title")}</h3>}/>
+                        <Route path={RoutesName.AllMarket} element={<div className={`row jc-center ai-baseline`}>
+                            <h2 className={`ml-2`}>{t("market.title")}</h2>
+                            <div className={`mr-2 fs-0-8`}>
+                                <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "24h" && classes.active}`} onClick={()=>dispatch(setMarketInterval("24h"))}>{t("marketIntervalMini.24h")}</span>
+                                <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "7d" && classes.active}`} onClick={()=>dispatch(setMarketInterval("7d"))}>{t("marketIntervalMini.7d")}</span>
+                                <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${interval === "1M" && classes.active}`} onClick={()=>dispatch(setMarketInterval("1M"))}>{t("marketIntervalMini.1M")}</span>
+                            </div>
+                        </div>}/>
+                    </Routes>
+                </div>
+
+
+                <div className={`flex jc-end ai-center width-20`}>
+                    <Link to={RoutesName.Landing}>
+                        <img src={toAbsoluteUrl('/assets/logo/logo-mini.svg')} alt={t("title")} title={t("title")} className={`img-lg-plus flex`}/>
+                    </Link>
+                </div>
+
+            </div>
+
+        </div>
+    );
+};
+
+export default LayoutHeader;
diff --git a/src/components/Layout/LayoutHeader/LayoutHeader.module.css b/src/components/Layout/LayoutHeader/LayoutHeader.module.css
@@ -0,0 +1,9 @@
+.container{
+    height: 10%;
+    background-color: var(--menu);
+}
+
+.active {
+    background-color: var(--activeTitle);
+    color: var(--activeTab);
+}
diff --git a/src/components/ScrollBar/index.js b/src/components/ScrollBar/index.js
@@ -1,7 +1,16 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import {Scrollbars} from "rc-scrollbars";
+import {useLocation} from "react-router-dom";
 
 const ScrollBar = ({customClass, ...props}) => {
+
+    const location = useLocation();
+    const scrollRef = useRef(null);
+
+    useEffect(() => {
+        scrollRef.current.scrollTop()
+    }, [location.pathname]);
+
     const style = props.style ? props.style : {width: "100%", height: "100%"};
     return (
         <Scrollbars
@@ -15,6 +24,7 @@ const ScrollBar = ({customClass, ...props}) => {
                 <div {...props} className="thumb-vertical" />
             )}
             renderView={(props) => <div {...props} className={`scrollView ${customClass && customClass}`} />}
+            ref={scrollRef}
             style={style}>
             {props.children}
         </Scrollbars>