no message

craco.config.js

@@ -2,6 +2,13 @@ const path = require('path');
 
 module.exports = {
     webpack: {
+        configure: (webpackConfig) => {
+            // 设置 publicPath
+            // webpackConfig.output.publicPath = 'http://192.168.1.4:8081/';
+
+            // 返回修改后的配置
+            return webpackConfig;
+        },
         alias: {
             '@components': path.resolve(__dirname, 'src/components'),
             '@ui': path.resolve(__dirname, 'src/ui'),

src/App.js

@@ -87,11 +87,29 @@ const App = () => {
             </>
         )
     }
+    // return (
+    //     <CacheProvider value={cacheRtl}>
+    //         <MuiThemeProvider theme={muiTheme}>
+    //             <SidebarProvider>
+    //                 <ThemeProvider theme={{theme: theme}}>
+    //                     <ThemeStyles/>
+    //                     <ToastContainer theme={theme} autoClose={2500}
+    //                                     position={direction === 'ltr' ? 'top-right' : 'top-left'}/>
+    //                     <StyleSheetManager stylisPlugins={plugins}>
+    //                         {
+    //                             renderLayout()
+    //                         }
+    //                     </StyleSheetManager>
+    //                 </ThemeProvider>
+    //             </SidebarProvider>
+    //         </MuiThemeProvider>
+    //     </CacheProvider>
+    // );
     return (
         <CacheProvider value={cacheRtl}>
             <MuiThemeProvider theme={muiTheme}>
-                <SidebarProvider>
-                    <ThemeProvider theme={{theme: theme}}>
+                <ThemeProvider theme={{theme: theme}}>
+                    <SidebarProvider>
                         <ThemeStyles/>
                         <ToastContainer theme={theme} autoClose={2500}
                                         position={direction === 'ltr' ? 'top-right' : 'top-left'}/>
@@ -100,8 +118,8 @@ const App = () => {
                                 renderLayout()
                             }
                         </StyleSheetManager>
-                    </ThemeProvider>
-                </SidebarProvider>
+                    </SidebarProvider>
+                </ThemeProvider>
             </MuiThemeProvider>
         </CacheProvider>
     );

src/Global.js

@@ -1,2 +1,6 @@
 import i18n from './locales/index';
+import symbol from "@assets/symbol-defs.svg";
+import symbol_m from "@assets/symbol-mobile.svg";
 global.i18n=i18n;
+global.symbol=symbol;
+global.symbol_m=symbol_m;

src/components/AutoBanner/styles.module.scss

@@ -1,5 +1,6 @@
+@import "../../styles/vars";
 .banner_container{
-  @media screen and (max-width: 621px) {
+  @media screen and (max-width: $width-mobile-max) {
     margin-top: 0rem;
   }
 }
@@ -42,13 +43,13 @@
   justify-content: center;
   position: relative;
   z-index: 9;
-  @media screen and (max-width: 621px) {
+  @media screen and (max-width: $width-mobile-max) {
     margin-top: -1.75rem;
   }
   & .banner_pagination_dot_active{
     background: #fff;
     width: 1.75rem;
-    @media screen and (max-width: 621px) {
+    @media screen and (max-width: $width-mobile-max) {
       width: .625rem;
     }
   }
@@ -61,7 +62,7 @@
     margin: 0 .3125rem;
     overflow: hidden;
     background: rgba(151, 151, 151, .3);
-    @media screen and (max-width: 621px) {
+    @media screen and (max-width: $width-mobile-max) {
       width: .375rem;
       height: .375rem;
       border-radius: .1875rem;

src/components/AutoWinList/styles.module.scss

@@ -1,3 +1,4 @@
+@import "../../styles/vars";
 @keyframes online-ani {
   0% {
     transform: scale(1);
@@ -24,7 +25,7 @@
   -webkit-box-align: center;
   align-items: center;
   margin: 0 0 8px 8px;
-  @media screen and (max-width: 621px) {
+  @media screen and (max-width: $width-mobile-max) {
     font-size: .875rem;
     white-space: nowrap;
   }

src/components/GameList/styles.module.scss

@@ -1,10 +1,11 @@
+@import "../../styles/vars";
 .list_container {
   //margin-top: 2.75rem;
   & .game_list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 1.25rem .75rem;
-    @media screen and (max-width: 621px){
+    @media screen and (max-width: $width-mobile-max){
       grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }
   }

src/components/GameTabs/styles.module.scss

@@ -1,3 +1,4 @@
+@import "../../styles/vars";
 .container{
   //padding-top: 1.5rem;
   position: relative;
@@ -34,7 +35,7 @@
         fill: var(--text);
       }
     }
-    @media screen and (max-width: 621px) {
+    @media screen and (max-width: $width-mobile-max) {
       flex-wrap: nowrap;
       width: 100%;
       overflow-x: auto;

src/components/Logo/index.jsx

@@ -13,7 +13,8 @@ import logo_small from '@assets/logo/logo_small.png';
 
 const Logo = ({size = 'md'}) => {
     const {theme,isMobile} = useThemeProvider();
-    const logourl=isMobile()?logo_small:(theme=='dark'?logo_dark:logo_light);
+    // const logourl=isMobile()?logo_small:(theme=='dark'?logo_dark:logo_light);
+    const logourl=(theme=='dark'?logo_dark:logo_light);
     return (
         <NavLink className={`${styles.logo} ${styles[size]}`} to="/">
             <img className={styles.logo_img} src={logourl}/>

src/components/Logo/styles.module.scss

@@ -1,5 +1,6 @@
 .logo {
     display: inline-flex;
+    flex: 1;
     align-items: center;
     gap: 8px;
     font-family: var(--heading-font);
@@ -14,8 +15,10 @@
         justify-content: center;
     }
     .logo_img {
-        height: 3rem;
-        width: auto;
+        //height: 3rem;
+        //width: auto;
+        width: 85%;
+        height: auto;
     }
 
     &.sm {

src/components/SvgIcon/index.jsx

@@ -0,0 +1,17 @@
+const symboldef=global.symbol;
+const symbolmobie=global.symbol_m;
+const SvgIcon=({herf,mobile=false,...props})=>{
+    const symbol=mobile?symbolmobie:symboldef;
+    const formatHerf=()=>{
+        if (herf.startsWith("http://")||herf.startsWith("https://")){
+            return herf;
+        }
+        return symbol+"#"+herf;
+    }
+    return (
+        <svg {...props}>
+            <use xlinkHref={formatHerf()} />
+        </svg>
+    )
+}
+export default SvgIcon;

src/constants/routes.js

@@ -1,7 +1,12 @@
-// 0嵌入,1弹窗,2全屏 3 外部链接
+// 0嵌入,1桌面弹窗 手机二级全屏,2弹窗,3全屏 4 外部链接
 const ROUTE_TYPE_IN=0;
-const ROUTE_TYPE_POP=1;
-const ROUTE_TYPE_FULL=2;
-const ROUTE_TYPE_OUTLINK=3;
+const ROUTE_TYPE_POP_OR_FULL=1;
+const ROUTE_TYPE_POP=2;
+const ROUTE_TYPE_FULL=3;
+const ROUTE_TYPE_OUTLINK=4;
 
-export {ROUTE_TYPE_IN,ROUTE_TYPE_POP,ROUTE_TYPE_FULL,ROUTE_TYPE_OUTLINK};
+const SIDE_TYPE_NONE=0;
+const SIDE_TYPE_NOMAL=1;
+const SIDE_TYPE_SPECIAL=2;
+
+export {ROUTE_TYPE_IN,ROUTE_TYPE_POP_OR_FULL,ROUTE_TYPE_POP,ROUTE_TYPE_FULL,ROUTE_TYPE_OUTLINK,SIDE_TYPE_NONE,SIDE_TYPE_NOMAL,SIDE_TYPE_SPECIAL};

src/contexts/sidebarContext.js

@@ -1,17 +1,20 @@
 import {useState, createContext, useContext, useEffect} from 'react';
 import {useLocation} from 'react-router-dom';
 import useScrollLock from '@hooks/useScrollLock';
+import {useThemeProvider} from "@contexts/themeContext";
 
 const SidebarContext = createContext(undefined);
 
 export const SidebarProvider = ({children}) => {
-    const [open, setOpen] = useState(true);
+    const {isMobile} = useThemeProvider();
+    const [open, setOpen] = useState(!isMobile());
     const location = useLocation();
     const setIsLocked = useScrollLock();
 
     // close sidebar when route changes
     useEffect(() => {
         // setOpen(false);
+        if (isMobile())setOpen(false);
     }, [location]);
 
     useEffect(() => {

src/features/mainSlice.js

@@ -1,22 +1,31 @@
 import {createAsyncThunk, createSlice} from "@reduxjs/toolkit";
 import {routes} from "@db/routes";
-import {ROUTE_TYPE_FULL, ROUTE_TYPE_IN, ROUTE_TYPE_OUTLINK, ROUTE_TYPE_POP} from "@constants/routes";
+import {
+    ROUTE_TYPE_FULL,
+    ROUTE_TYPE_IN,
+    ROUTE_TYPE_OUTLINK,
+    ROUTE_TYPE_POP,
+    ROUTE_TYPE_POP_OR_FULL, SIDE_TYPE_NOMAL
+} from "@constants/routes";
 import {REQ_STATUS} from "@api/config";
 import {buildReqReducer, reqGetRoutes} from "@features/api";
+import {dark} from "@mui/material/styles/createPalette";
 const generateNavs=(routes)=>{
     const navs=[];
     const allNavs=[];
+    const allTopNavs=[];
     for (let i = 0; i <routes.length ; i++) {
         let route=routes[i];
         if (!route.side)continue;
         allNavs.push(route);
+        if(route.side===SIDE_TYPE_NOMAL)allTopNavs.push(route);
         let block=route.block!=null?route.block:0;
         let temp=navs[block];
         if (temp==null)temp=[];
         temp.push(route);
         navs[block]=temp;
     }
-    return {navs,allNavs};
+    return {navs,allNavs,allTopNavs};
 }
 const generateRoutes=(routes,asyncRoutes=[])=>{
     const allMap={};
@@ -35,8 +44,9 @@ const generateRoutes=(routes,asyncRoutes=[])=>{
                     route.lv=plevel+key+"_";
                     allMap[route.path]=route;
                     let type=route.type;
-                    if (type===ROUTE_TYPE_IN||type==ROUTE_TYPE_FULL)inRoutes.push(route);
-                    else if (type==ROUTE_TYPE_POP)popRoutes.push(route);
+                    if (type===ROUTE_TYPE_IN||type===ROUTE_TYPE_FULL)inRoutes.push(route);
+                    else if (type===ROUTE_TYPE_POP_OR_FULL)popRoutes.push(route);
+                    else if (type===ROUTE_TYPE_POP)popRoutes.push(route);
                 }
                 let subs=route.subs;
                 if (subs!=null)_generate(subs,route.lv,route.path);
@@ -46,14 +56,63 @@ const generateRoutes=(routes,asyncRoutes=[])=>{
     const allroutes=[...routes, ...asyncRoutes];
     _generate(allroutes,"","");
     const gnavs=generateNavs(allroutes);
-    return {allMap,inRoutes,popRoutes,blockNavs:gnavs.navs,allNavs:gnavs.allNavs};
+    return {allMap,inRoutes,popRoutes,blockNavs:gnavs.navs,allNavs:gnavs.allNavs,allTopNavs:gnavs.allTopNavs};
+}
+const parseThemeStypes=(data)=>{
+    if (data!=null){
+        for (const key in data) {
+            let item=data[key];
+            if (item!=null){
+                if (typeof item=="string"){
+                    if (item.indexOf(";")!=-1){
+                        data[key]=item.split(";");
+                    }
+                }
+            }
+        }
+    }
+    return data;
+}
+const parseStyles=(data)=>{
+    let styles={};
+    if (data!=null){
+        for (let i = 0; i <data.length ; i++) {
+            let item=data[i];
+            if (item){
+                let styleid=item.styleid;
+                let style=item.style;
+                let json={};
+                if (style!=null&&style!=""){
+                    json=JSON.parse(style);
+                    json['dark']=parseThemeStypes(json['dark']);
+                    json['light']=parseThemeStypes(json['light']);
+                }
+                styles[styleid]={styleid,style:json};
+            }
+        }
+    }
+    return styles;
+}
+const parseBlocks=(data)=>{
+    let blocks={};
+    if (data!=null){
+        for (let i = 0; i < data.length; i++) {
+            let item=data[i];
+            if (item){
+                blocks[item.block]=item;
+            }
+        }
+    }
+    return blocks;
 }
 const reducerRoutes=(state,action)=>{
     let json=action.payload;
     if (json&&json.code==0){
         let data=json.data==null?[]:json.data;
-        let generData=generateRoutes(routes,data);
-        Object.assign(state, {routes:routes,asyncRoutes:data,...generData});
+        let generData=generateRoutes(state.routes,data);
+        let styles=parseStyles(json.styles);
+        let blocks=parseBlocks(json.blocks);
+        Object.assign(state, {routes:state.routes,asyncRoutes:data,styles:styles,blocks:blocks,...generData});
     }
 }
 const routesStatus=(state,status,arg)=>{
@@ -65,6 +124,8 @@ export const Main=createSlice({
         status:REQ_STATUS.NONE,
         routes:routes,
         asyncRoutes:[],
+        styles:{},
+        blocks:{},
         ...generateRoutes(routes)
     },
     reducers: {
@@ -95,6 +156,9 @@ export const nBlocks=(state)=>{
 export const allNavs=(state)=>{
     return state.main.allNavs;
 }
+export const allTopNavs=(state)=>{
+    return state.main.allTopNavs;
+}
 export const getRoute=(path)=>(state)=>{
     let route=routesMap(state)[path];
     if (route==null)return {};
@@ -115,6 +179,14 @@ export const getRouteChain=(path)=>(state)=>{
     getChain(path);
     return list;
 }
+export const getRouteStyles=(state)=>{
+    let styles=state.main.styles;
+    return styles;
+}
+export const getBlockColumn=(state)=>{
+    let blocks=state.main.blocks;
+    return blocks;
+}
 export const isFullRoute=(path)=>(state)=>{
     let route=routesMap(state)[path];
     if (route)return route.type===ROUTE_TYPE_FULL;

src/layout/BottomNav/index.jsx

@@ -12,6 +12,11 @@ import useStoreRoute from '@hooks/useStoreRoute';
 import {useShopProvider} from '@contexts/shopContext';
 import symbol_m from "@assets/symbol-mobile.svg";
 import symbol from "@assets/symbol-defs.svg";
+import {ReactComponent as TabGift} from '@assets/tabicon/gift.svg';
+import {ReactComponent as TabWithdraw} from '@assets/tabicon/withdraw.svg';
+import {ReactComponent as TabPay} from '@assets/tabicon/pay.svg';
+import {ReactComponent as TabMessage} from '@assets/tabicon/message.svg';
+import {ReactComponent as TabSett} from '@assets/tabicon/sett.svg';
 const i18n=global.i18n;
 
 const BottomNav = () => {
@@ -55,41 +60,46 @@ const BottomNav = () => {
     return (
         <div className={styles.container}>
             <button className={styles.button}>
-                <svg className={"icon"}>
-                    <use xlinkHref={`${symbol_m}#icon_More`} />
-                </svg>
-                <span>{i18n.t("tab.more")}</span>
+                {/*<svg className={"icon"}>*/}
+                {/*    <use xlinkHref={`${ticon_gift}#gift`} />*/}
+                {/*</svg>*/}
+                <TabGift className={"icon"}></TabGift>
+                <span>{i18n.t("tab.promotion")}</span>
             </button>
             <NavLink className={styles.button} to="/" aria-label="Home">
-                <svg className={"icon"}>
-                 <use xlinkHref={`${symbol_m}#icon_Home_1`} />
-                </svg>
-                <span>{i18n.t("tab.home")}</span>
+                {/*<svg className={"icon"}>*/}
+                {/* <use xlinkHref={`${symbol_m}#icon_Home_1`} />*/}
+                {/*</svg>*/}
+                <TabWithdraw className={"icon"}></TabWithdraw>
+                <span>{i18n.t("tab.withdraw")}</span>
             </NavLink>
             <NavLink className={styles.button} to="/promotions">
                 <div className={styles['wallet-tabbar-wrap']}>
                     <div className={styles['in-1']}>
                         <div className={styles['in-2']}>
-                            <svg className={"icon"}>
-                                <use xlinkHref={`${symbol_m}#icon_Promotions`} />
-                            </svg>
+                            {/*<svg className={"icon"}>*/}
+                            {/*    <use xlinkHref={`${symbol_m}#icon_Promotions`} />*/}
+                            {/*</svg>*/}
+                            <TabPay className={"icon"}></TabPay>
                         </div>
                     </div>
                 </div>
-                <span>{i18n.t("tab.promotions")}</span>
+                <span className={styles.yellow_txt}>{i18n.t("tab.deposit")}</span>
             </NavLink>
             <button className={styles.button}>
-                <svg className={"icon"}>
-                    <use xlinkHref={`${symbol_m}#icon_Account`} />
-                </svg>
-                <span>{i18n.t("tab.account")}</span>
+                {/*<svg className={"icon"}>*/}
+                {/*    <use xlinkHref={`${symbol_m}#icon_Account`} />*/}
+                {/*</svg>*/}
+                <TabMessage className={"icon"}></TabMessage>
+                <span>{i18n.t("tab.message")}</span>
             </button>
             <button className={styles.button}>
                 <div className={styles["dont-badge"]}></div>
-                <svg className={"icon"}>
-                    <use xlinkHref={`${symbol}#icon_Chat`} />
-                </svg>
-                <span>{i18n.t("tab.chat")}</span>
+                {/*<svg className={"icon"}>*/}
+                {/*    <use xlinkHref={`${symbol}#icon_Chat`} />*/}
+                {/*</svg>*/}
+                <TabSett className={"icon"}></TabSett>
+                <span>{i18n.t("tab.service")}</span>
             </button>
         </div>
     )

src/layout/BottomNav/styles.module.scss

@@ -23,7 +23,7 @@
     justify-content: center;
     flex-direction: column;
     position: relative;
-    font-size: .75rem;
+    font-size: .8rem;
     font-weight: 500;
     transition: color var(--transition);
     color: var(--text);
@@ -34,10 +34,13 @@
         }
     }
     svg{
-        width: 1.3rem;
-        height: 1.3rem;
+        width: 1.8rem;
+        height: 1.8rem;
         fill: var(--text);
     }
+    & .yellow_txt{
+        color: #d5c0a4;
+    }
 }
 
 .menu_item {
@@ -83,8 +86,8 @@
     border-radius: 50%;
     background-color: var(--nav-item-hover);
     svg{
-        width: 1.4rem;
-        height: 1.4rem;
+        width: 2.875rem;
+        height: 2.875rem;
         fill: var(--text);
         margin-top: -2px;
     }

src/layout/BreadCrumb/index.jsx

@@ -2,15 +2,19 @@ import styles from './styles.module.scss';
 import {useEffect} from "react";
 import {NavLink, useLocation} from "react-router-dom";
 import {useSelector} from "react-redux";
-import {getRouteChain} from "@features/mainSlice";
+import {getRoute, getRouteChain} from "@features/mainSlice";
 import symbol from '@assets/symbol-defs.svg';
+import {useThemeProvider} from "@contexts/themeContext";
+import SvgIcon from "@components/SvgIcon";
 const i18n=global.i18n;
 const BreadCrumb=()=>{
+    const {isMobile} = useThemeProvider();
     const {pathname} = useLocation();
     const chain=useSelector(getRouteChain(pathname));
+    const currRoute=useSelector(getRoute(pathname));
     useEffect(() => {
     }, [pathname]);
-    const renderBreadCrumb=()=>{
+    const renderDesktop=()=>{
         let len=chain.length;
         if (len<=1)return (<></>);
         return (
@@ -39,6 +43,23 @@ const BreadCrumb=()=>{
             </div>
         )
     }
+    const renderMobile=()=>{
+        let len=chain.length;
+        if (len<=1)return (<></>);
+        return (
+            <div className={styles.container_m}>
+                <div className={styles.game_nav_path}>
+                    <NavLink to={currRoute.ppath}>
+                        <SvgIcon className={styles.icon} herf={"icon_Arrow"}/>
+                        {i18n.t(currRoute.title)}
+                    </NavLink>
+                </div>
+            </div>
+        )
+    }
+    const renderBreadCrumb=()=>{
+        return isMobile()?renderMobile():renderDesktop();
+    }
     return (
         <>
             {

src/layout/BreadCrumb/styles.module.scss

@@ -31,3 +31,27 @@
     }
   }
 }
+.container_m{
+  width: 100%;
+  & .game_nav_path{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: auto;
+    a{
+      gap: .375rem;
+      font-size: 1.5rem;
+      line-height: 1.5rem;
+      font-weight: 700;
+      color: var(--header);
+      display: flex;
+      align-items: center;
+      & .icon{
+        width: 1.25rem;
+        height: 1.4em;
+        transform: rotate(-180deg);
+        fill: var(--text);
+      }
+    }
+  }
+}

src/layout/Layout.jsx

@@ -54,13 +54,15 @@ const Layout=()=>{
           </div>
           {
               hash!=''?(
-                  <Suspense>
-                      <CHashRouter routes={popRoutes} hlocation={{
-                          pathname: (pathname + hash),
-                          search: search,
-                          hash: hash
-                      }} basePath={pathname}></CHashRouter>
-                  </Suspense>
+                  <div className="app-hash">
+                      <Suspense>
+                          <CHashRouter routes={popRoutes} hlocation={{
+                              pathname: (pathname + hash),
+                              search: search,
+                              hash: hash
+                          }} basePath={pathname}></CHashRouter>
+                      </Suspense>
+                  </div>
               ):(<></>)
           }
 

src/layout/Navbar/index.jsx

@@ -24,7 +24,7 @@ import {useSpring} from "@react-spring/core";
 import {useWindowSize} from "react-use";
 import ResizeObserver from "resize-observer-polyfill";
 import {useSelector} from "react-redux";
-import {allNavs, getRoute} from "@features/mainSlice";
+import {allTopNavs, getRoute} from "@features/mainSlice";
 const i18n=global.i18n;
 
 const StyledToggleGroup= styled(ToggleButtonGroup)`
@@ -68,7 +68,7 @@ const StyledToggle=styled(ToggleButton)`
 
 
 const DesktopNavToggle=()=>{
-    const LINKS=useSelector(allNavs);
+    const LINKS=useSelector(allTopNavs);
     const links=LINKS.slice(0,4);
     const {pathname} = useLocation();
     const [alignment, setAlignment] = useState(pathname);
@@ -169,11 +169,11 @@ const MobileSignInUp=()=>{
             <Button  className={`${styles.btn_sign_up} ${styles.btn_sign_up_mobile}`} onClick={()=>{
                 navigate("#/signup");
             }}>{i18n.t('sign_up')}</Button>
-            <Button  className="m-button">
-                <svg className={"ls-icon"} style={{width:'1.4rem',height:'1.4rem'}}>
-                    <use xlinkHref={`${symbol}#icon_Language`} />
-                </svg>
-            </Button>
+            {/*<Button  className="m-button">*/}
+            {/*    <svg className={"ls-icon"} style={{width:'1.4rem',height:'1.4rem'}}>*/}
+            {/*        <use xlinkHref={`${symbol}#icon_Language`} />*/}
+            {/*    </svg>*/}
+            {/*</Button>*/}
         </div>
     );
 }
@@ -181,13 +181,16 @@ const MobileNav=()=>{
     return (
         <div
             className={`d-flex align-items-center justify-content-between ${styles.header} ${styles.header_mobile}`}>
-            <Logo size="sm"/>
+            <div className={`d-flex flex-row flex-1`}>
+                <SidebarTrigger/>
+                <Logo size="sm"/>
+            </div>
             <MobileSignInUp/>
         </div>
     )
 }
 const PageHeader = () => {
-    const LINKS=useSelector(allNavs);
+    const LINKS=useSelector(allTopNavs);
     const {initHeaderHeight} = useThemeProvider();
     const {pathname} = useLocation();
     const navigate=useNavigate();

src/layout/Routes/RouteWrapper.jsx

@@ -1,7 +1,7 @@
 import React, {useMemo, useState} from 'react';
 import Popup from "@components/Popup";
 import { useNavigate } from 'react-router-dom';
-import {ROUTE_TYPE_FULL, ROUTE_TYPE_IN, ROUTE_TYPE_POP} from "@constants/routes";
+import {ROUTE_TYPE_FULL, ROUTE_TYPE_IN, ROUTE_TYPE_POP, ROUTE_TYPE_POP_OR_FULL} from "@constants/routes";
 const i18n=global.i18n;
 const RouteWrapper = (props) => {
     const { Comp, route} = props;
@@ -37,6 +37,9 @@ const RouteWrapper = (props) => {
         if (route.type===ROUTE_TYPE_FULL||route.type===ROUTE_TYPE_IN){
             comp=renderIn();
         }
+        else if (route.type===ROUTE_TYPE_POP_OR_FULL){
+            comp=renderPop();
+        }
         else if (route.type===ROUTE_TYPE_POP){
             comp=renderPop();
         }

src/layout/Sidebar/index.jsx

@@ -5,13 +5,14 @@ import {
     StyledAccordion,
     StyledAccordionDetails,
     StyledAccordionSummary,
-    StyledDrawer,
     StyledBonus,
     StyledButton,
     StyledThemeTabs,
     StyledThemeTab,
     StyledAct,
-    StyledRefer
+    StyledRefer,
+    StyledBlock,
+    StyledIconLink
 }
     from './styles';
 
@@ -49,13 +50,21 @@ import spin_3 from "@assets/activity/spin_3.png";
 import imgrefer from "@assets/activity/rio_refer.png";
 import imgrefer_f from "@assets/activity/rio_refer_f.png";
 import {useSelector} from "react-redux";
-import {allNavs, getRoute, isFullRoute, nBlocks} from "@features/mainSlice";
-import {ROUTE_TYPE_POP} from "@constants/routes";
-const drawerWidth = 250;
+import {allNavs, getBlockColumn, getRoute, getRouteStyles, isFullRoute, nBlocks} from "@features/mainSlice";
+import {
+    ROUTE_TYPE_POP,
+    ROUTE_TYPE_POP_OR_FULL,
+    SIDE_TYPE_GRID,
+    SIDE_TYPE_NOMAL,
+    SIDE_TYPE_SPECIAL
+} from "@constants/routes";
+import SvgIcon from "@components/SvgIcon";
+const drawWidth = 250;
+const drawMobieWidth=250;
 const i18n=global.i18n;
 
-const openedMixin = (theme) => ({
-    width: drawerWidth,
+const openedMixin = (theme,width) => ({
+    width: width,
     transition: theme.transitions.create('width', {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.enteringScreen,
@@ -85,22 +94,23 @@ const closedMixin = (theme) => ({
 });
 
 const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-    ({ theme, open }) => ({
-        width: drawerWidth,
+    ({ theme, open}) => ({
+        width: drawWidth,
         flexShrink: 0,
         whiteSpace: 'nowrap',
         boxSizing: 'border-box',
         // overflowX:'hidden',
         ...(open && {
-            ...openedMixin(theme,),
-            '& .MuiDrawer-paper': openedMixin(theme,),
+            ...openedMixin(theme),
+            '& .MuiDrawer-paper': openedMixin(theme,drawWidth),
         }),
         ...(!open && {
-            ...closedMixin(theme,'0px'),
-            '& .MuiDrawer-paper': closedMixin(theme,),
+            ...closedMixin(theme),
+            '& .MuiDrawer-paper': closedMixin(theme),
         }),
     }),
 );
+
 const DrawerHeader = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -132,13 +142,12 @@ const Sidebar = () => {
 
     const navBlocks=useSelector(nBlocks);
     const currRoute = useSelector(getRoute(pathname));
-    // const navBlocks=JSON.parse(JSON.stringify(oriNavBlocks));
-    // let expandRoutes=[];
+    const blocksColumn=useSelector(getBlockColumn);
+    const routeStyles=useSelector(getRouteStyles);
     const handleActEnter = () => {
         if (open)return;
         setIsActHovered(true);
     };
-
     const handleActLeave = () => {
         if (open)return;
         setIsActHovered(false);
@@ -161,17 +170,23 @@ const Sidebar = () => {
     }
 
     const checkNavOpen=()=>{
-        // let index=getRootRoute(pathname);
-        // if (index==-1)setExpanded(undefined);
-        // else
-        // {
-        //     setExpanded("panel"+index);
-        // }
-        // setExpanded(pathname);
         if (currRoute==null)return;
         let lv=currRoute.lv;
         setExpanded(lv);
     }
+    const getOLStyles=(styleID)=>{
+        let styles=routeStyles[styleID];
+        if (styles==null){
+            styles=routeStyles[1];
+        }
+        let style={};
+        if (styles!=null){
+            style=styles.style;
+        }
+        let thstyles=style[theme];
+        if (thstyles==null)thstyles={};
+        return thstyles;
+    }
     // collapse opened accordion on route change when the drawer is temporary
     useEffect(() => {
         checkNavOpen();
@@ -184,90 +199,82 @@ const Sidebar = () => {
         let lv=currRoute.lv;
         return lv===link.lv;
     }
+    const renderIconLink=(link,olStyle)=>{
+        let ispop=link.type===ROUTE_TYPE_POP||link.type===ROUTE_TYPE_POP_OR_FULL;
+        let linkIcon=(<SvgIcon className={"icon"} herf={link.icon}/>);
+        let linkA=ispop?(
+            <a href={link.path}>
+                {linkIcon}
+            </a>
+        ):(
+            <NavLink to={link.path}>
+                {linkIcon}
+            </NavLink>
+        );
+        return (
+            <MTooltip  disableHoverListener={open} title={i18n.t(link.title)} arrow placement="right">
+                <StyledIconLink olStyle={olStyle}>
+                    {linkA}
+                </StyledIconLink>
+            </MTooltip>
+        );
+    }
     const renderLink=(link)=>{
         let pages=link.subs||link.pages;
-        let linkItem=(
-                <StyledAccordion defaultExpanded={true} open={open} square={true} key={link.lv} expanded={checkCkey(link.lv)} onChange={handleChange(`${link.lv}`,link.path)}>
-                    <MTooltip  disableHoverListener={open} title={i18n.t(link.title)} arrow placement="right">
-                        <StyledAccordionSummary open={open}>
-                                <Link open={open} className={`${checkPath(link) ? 'active' : ''} h4`}>
-                                    <svg className={"icon"}>
-                                        <use xlinkHref={`${symbol}#${link.icon}`} />
-                                    </svg>
-                                    {open?i18n.t(link.title):''}
-                                </Link>
-                            {
-                                open?(
-                                    <svg className="icon-chevron-down">
-                                        <use xlinkHref={`${symbol}#icon_Arrow`} />
-                                    </svg>
-                                ):(<></>)
-                            }
-                        </StyledAccordionSummary>
-                    </MTooltip>
-                    {
-                        open?(
-                            <StyledAccordionDetails>
+        let styles=getOLStyles(link.style);
+        let linkItem=open?(
+                <StyledAccordion olStyle={styles} defaultExpanded={true} square={true} key={link.lv} expanded={checkCkey(link.lv)} onChange={handleChange(`${link.lv}`,link.path)}>
+                    <StyledAccordionSummary olStyle={styles}>
+                        <Link olStyle={styles} className={`${checkPath(link) ? 'active' : ''} h4`}>
+                            <SvgIcon className={"icon"} herf={link.icon}/>
+                            {i18n.t(link.title)}
+                        </Link>
+                        <SvgIcon className={"icon-chevron-down"} herf={'icon_Arrow'}/>
+                    </StyledAccordionSummary>
+                    <StyledAccordionDetails olStyle={styles}>
+                        {
+                            pages.map((page,pindex)=>{
+                                let  subs=page.subs;
+                                if (subs==null||subs.length==0)return renderRLink(page);
+                                else
                                 {
-                                    pages.map((page,pindex)=>{
-                                        let  subs=page.subs;
-                                        if (subs==null||subs.length==0)return renderRLink(page);
-                                        else
-                                        {
-                                            return renderLink(page);
-                                        }
-                                    })
+                                    return renderLink(page);
                                 }
-                            </StyledAccordionDetails>
-                        ):(<></>)
-                    }
+                            })
+                        }
+                    </StyledAccordionDetails>
                 </StyledAccordion>
-            );
+            ):renderIconLink(link,styles);
         return linkItem
     }
-    const renderLinks=()=>{
 
-        return (
-            <nav className="d-flex flex-column g-4 sidebar-nav-block">
-                {
-                    LINKS.map((link, index) => (
-                        renderLink(link,index)
-                    ))
-                }
-            </nav>
-        )
-    }
     const renderRLink=(link)=>{
         let isActive=checkPath(link);
-        let ispop=link.type===ROUTE_TYPE_POP;
+        let ispop=link.type===ROUTE_TYPE_POP||link.type===ROUTE_TYPE_POP_OR_FULL;
         let clname=`${isActive?'active':''} h4`;
         let linktxt=(
             <>
-                <svg className={"icon"}>
-                    <use xlinkHref={`${symbol}#${link.icon}`} />
-                </svg>
-                {open?i18n.t(`${link.title}`):''}
+                <SvgIcon className={"icon"} herf={link.icon}/>
+                {i18n.t(`${link.title}`)}
             </>
         )
         return ispop?(<a className={clname} href={link.path}>{linktxt}</a>):(<NavLink className={clname} to={link.path}>{linktxt}</NavLink>)
     }
     const renderSingleLink=(link)=>{
-        return (
-            <MTooltip key={link.path} disableHoverListener={open} title={i18n.t(`${link.title}`)} arrow placement="right">
-                <SingleLink open={open}>
-                    {
-                        renderRLink(link)
-                    }
-
-                </SingleLink>
-            </MTooltip>
-        )
+        let styles=getOLStyles(link.style);
+        return open?(
+            <SingleLink olStyle={styles}>
+                {
+                    renderRLink(link)
+                }
+            </SingleLink>
+        ):renderIconLink(link,styles)
     }
     const renderLinkNav=(link)=>{
         let linkItem=(<></>);
         let subs=link.subs;
         let len=subs.length;
-        if (len==0&&link.plv==""){
+        if (len===0&&link.plv===""){
             linkItem=renderSingleLink(link);
         }
         else
@@ -277,15 +284,24 @@ const Sidebar = () => {
         return linkItem;
     }
     const renderBlock=(block)=>{
+        if (block==null)return (<></>);
+        let first=block[0];
+        if (first==null)return (<></>);
+        let blockID=first.block;
+        let column=1;
+        if (blocksColumn!=null){
+            let blockC=blocksColumn[blockID];
+            if (blockC!=null)column=blockC.column;
+        }
         return (
             <>
-                <nav className="d-flex flex-column g-4 sidebar-nav-block">
+                <StyledBlock open={open} column={column}>
                     {
                         block.map((link, index) => {
                             return renderLinkNav(link)
                         })
                     }
-                </nav>
+                </StyledBlock>
                 {renderLine()}
             </>
         )
@@ -302,23 +318,26 @@ const Sidebar = () => {
         )
     }
     const renderBonus=()=>{
+        let styles=getOLStyles(0);
+        let herf="/bonus";
+        let link={type:0,title:'links.bonus',icon:'icon_Gift',path:herf}
         return (
-            <div className="sidebar-nav-block">
+            <StyledBlock open={open}>
                 <StyledBonus className="d-flex flex-column g-6" open={open}>
-                    <MTooltip disableHoverListener={open} title={i18n.t("links.bonus")} arrow placement="right">
-                        <SingleLink open={open}>
-                            <NavLink className={`${pathname === `/bonus` ? 'active' : ''} h4`} to={'/bonus'}>
-                                <svg className={"icon"}>
-                                    <use xlinkHref={`${symbol}#icon_Gift`} />
-                                </svg>
-                                {open?i18n.t("links.bonus"):''}
-                            </NavLink>
-                        </SingleLink>
-                    </MTooltip>
+                    {
+                        open?(
+                            <SingleLink olStyle={styles}>
+                                <NavLink className={`${pathname === herf ? 'active' : ''} h4`} to={herf}>
+                                    <SvgIcon className={"icon"} herf={"icon_Gift"}/>
+                                    {i18n.t("links.bonus")}
+                                </NavLink>
+                            </SingleLink>
+                        ):renderIconLink(link,styles)
+                    }
                     <StyledAct open={open} enter={isActHovered} onMouseEnter={handleActEnter} onMouseLeave={handleActLeave}>
                         <div className="bonus-item li-quests">
                             <button className="bonus-item-btn">
-                                <img className="img-bg" src={questsimg} alt={"quests"}></img>
+                                <img className="img-bg" src={questsimg} alt={"quests"}/>
                                 {open?i18n.t("links.quest"):""}
                             </button>
                         </div>
@@ -340,21 +359,19 @@ const Sidebar = () => {
                         </div>
                     </StyledAct>
                 </StyledBonus>
-            </div>
+            </StyledBlock>
         );
     }
     const renderSuport=()=>{
         return (
-            <div className="sidebar-nav-block">
+            <StyledBlock open={open}>
                 <MTooltip disableHoverListener={open} title={i18n.t("links.live_support")} arrow placement="right">
                     <StyledButton open={open} className="h4" fill={"#3bc117"}>
-                        <svg className={"icon"}>
-                            <use xlinkHref={`${symbol}#icon_Support`} />
-                        </svg>
+                        <SvgIcon className={"icon"} herf={"icon_Support"}/>
                         {open?i18n.t("links.live_support"):""}
                     </StyledButton>
                 </MTooltip>
-            </div>
+            </StyledBlock>
         )
     }
     const handleTheme = (event, value) => {
@@ -368,42 +385,41 @@ const Sidebar = () => {
     const renderThemeTabs=()=>{
         if (open){
             return (
-                <div className="sidebar-nav-block" >
+                <StyledBlock open={open} >
                     <StyledThemeTabs sx={{
                         marginTop:'16px',
                     }} className={theme} exclusive value={theme} onChange={handleTheme}>
-                        <div className="theme-bg"></div>
+                        <div className="theme-bg"/>
                         <StyledThemeTab value={"dark"}>
-                            <svg className={"icon"}>
-                                <use xlinkHref={`${symbol}#icon_Dark`} />
-                            </svg>
+                            <SvgIcon className={"icon"} herf={"icon_Dark"}/>
                             {i18n.t("theme.dark")}
                         </StyledThemeTab>
                         <StyledThemeTab value={"light"}>
-                            <svg className={"icon"}>
-                                <use xlinkHref={`${symbol}#icon_Light`} />
-                            </svg>
+                            <SvgIcon className={"icon"} herf={"icon_Light"}/>
                             {i18n.t("theme.light")}
                         </StyledThemeTab>
                     </StyledThemeTabs>
-                </div>
+                </StyledBlock>
             )
         }
         else return(<></>);
     }
     const renderLine=(key="1")=>{
-        if (open)return(<></>);
-        else
-        {
-            return (
-                <div className="fold-line"></div>
-            )
-        }
+        // if (open)return(<></>);
+        // else
+        // {
+        //     return (
+        //         <div className="fold-line"></div>
+        //     )
+        // }
+        return (
+            <div className="fold-line"></div>
+        )
     }
     const renderBanner=()=>{
         let refimg=open?imgrefer:imgrefer_f;
         return (
-            <div className="sidebar-nav-block">
+            <StyledBlock open={open}>
                 <MTooltip disableHoverListener={open} title={i18n.t("refer.title")} arrow placement="right">
                     <StyledRefer open={open}>
                         <img alt={"refer"} src={refimg}/>
@@ -417,13 +433,24 @@ const Sidebar = () => {
                         }
                     </StyledRefer>
                 </MTooltip>
-            </div>
+            </StyledBlock>
+        )
+    }
+    const renderContent=()=>{
+        return (
+            <>
+                {renderBonus()}
+                {renderBanner()}
+                {renderLine()}
+                {renderLinkBlocks()}
+                {renderSuport()}
+                {renderThemeTabs()}
+            </>
         )
     }
     const renderDesktop=()=>{
         return (
             <Drawer variant="permanent" open={open} sx={{
-
             }}>
                 <DrawerHeader>
                     <SidebarTrigger/>
@@ -433,25 +460,51 @@ const Sidebar = () => {
                 </DrawerHeader>
                 <div className={`d-flex flex-column sidebar-nav ${visiblecls}`}>
                     <div className={`d-flex flex-column g-4 ${visiblecls}`}>
-                        {renderBonus()}
-                        {renderLine()}
-                        {renderBanner()}
-                        {/*{renderLine()}*/}
-                        {/*{renderLinks()}*/}
-                        {renderLine()}
-                        {renderLinkBlocks()}
-                        {renderSuport()}
-                        {renderThemeTabs()}
+                        {
+                            renderContent()
+                        }
                     </div>
                 </div>
             </Drawer>
         )
     }
+    const renderMobile=()=>{
+        return (
+            <MuiDrawer open={open} sx={{
+                "& .MuiDrawer-paper": {
+                    width: drawMobieWidth,
+                    boxSizing: "border-box",
+                    overflow:'visible !important',
+                    backgroundColor:'var(--standard);',
+                    boxShadow:'var(--widget-shadow);',
+                },
+                "& .MuiModal-backdrop":{
+                    backgroundColor:'rgba(0,0,0,0)',
+                }
+            }} variant="temporary" onClose={()=>{
+                setOpen(false);
+            }}>
+                <DrawerHeader>
+                    <SidebarTrigger/>
+                    {
+                        open?<Logo/>:<></>
+                    }
+                </DrawerHeader>
+                <div className={`d-flex flex-column sidebar-nav ${visiblecls}`}>
+                    <div className={`d-flex flex-column g-4 ${visiblecls}`}>
+                        {
+                            renderContent()
+                        }
+                    </div>
+                </div>
+            </MuiDrawer>
+        )
+    }
     const {isMobile} = useThemeProvider();
     return (
         <>
             {
-                isMobile()?(<></>):renderDesktop()
+                isMobile()?(renderMobile()):renderDesktop()
             }
         </>
     )

src/layout/Sidebar/styles.js

@@ -10,22 +10,17 @@ import ToggleButton from "@mui/material/ToggleButton";
 import Button from "@mui/material/Button";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 
-const StyledDrawer = styled(SwipeableDrawer)`
-  .MuiDrawer-paper {
-    transition: background-color var(--transition);
-    background-color: var(--widget);
-    box-shadow: var(--widget-shadow);
-    padding: 30px;
-    border: none;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .logo-wrapper {
-      padding-bottom: var(--nav-item-h);
-    }
-  }
-`;
+const COLOR_TYPE_NOMAL=0;
+const COLOR_TYPE_HONER=1;
+const COLOR_TYPE_ACTIVE=2;
 
+const getColor=(colors,type)=>{
+  let color="";
+  if (colors!=null){
+    if (colors[type])color=colors[type]+"";
+  }
+  return color;
+}
 const StyledAccordion = styled(Accordion)`
   transition: background-color var(--transition) !important;
   background-color: var(--nav-item-top) !important;
@@ -34,31 +29,47 @@ const StyledAccordion = styled(Accordion)`
   &:before {
     display: none;
   }
+  &.Mui-expanded {
+    margin: 0 !important;
+    background-color: var(--nav-item-bg) !important;
+  }
   ${(props) => {
-    if (props.open){
+    // if (props.open){
+    //   return `
+    //     &.Mui-expanded {
+    //       margin: 0 !important;
+    //       background-color: var(--nav-item-bg) !important;
+    //     }
+    //   `
+    // }
+    // else
+    // {
+    //   return `
+    //     background-color: transparent !important;
+    //     &.Mui-expanded {
+    //       margin: 0 !important;
+    //     }
+    //   `
+    // }
+      let olStyle=props.olStyle;
+      let button=olStyle.button;
+      let bg=getColor(button,COLOR_TYPE_NOMAL);
+      let bgact=getColor(button,COLOR_TYPE_ACTIVE)
+      let background=bg!=""?`background-color: ${bg} !important;`:''
+      let radius=olStyle.radius?`border-radius:${olStyle.radius} !important;`:"";
       return `
+        ${background}
+        ${radius}
         &.Mui-expanded {
-          margin: 0 !important;
-          background-color: var(--nav-item-bg) !important;
+          background-color: ${bgact} !important;
         }
       `
-    }
-    else
-    {
-      return `
-        background-color: transparent !important;
-        &.Mui-expanded {
-          margin: 0 !important;
-        }
-      `
-    }
   }}
 `;
 // margin: 0 -10px !important;
 const StyledAccordionSummary = styled(AccordionSummary)`
-  padding: 0 10px !important;
+  padding: 0.825rem 0.825rem !important;
   min-height: unset !important;
-  height: var(--nav-item-h);
   border-radius: var(--border-radius) !important;
   transition: background-color var(--transition);
   
@@ -72,37 +83,39 @@ const StyledAccordionSummary = styled(AccordionSummary)`
   & .icon-chevron-down {
     will-change: transform;
     transition: all var(--transition);
-    color: var(--text);
     width: 1rem;
     height: 1rem;
-    fill: var(--text);
   }
-  &:hover {
-    background-color: var(--nav-item-hover) !important; 
+  &.Mui-expanded, &.active {
     & .icon-chevron-down {
-      fill: var(--header);
+      transform: rotate(90deg);
     }
   }
   ${(props) => {
-    if (props.open){
-      return `
-          &.Mui-expanded, &.active {
-            & .icon-chevron-down {
-              transform: rotate(90deg);
-              color: var(--header);
-              fill: var(--header);
-            }
-          }
-        `
-    }
-    else
-    {
-      return `
-          &.Mui-expanded, &.active {
-            background-color: var(--nav-item-hover) !important; 
-          }
-        `
-    }
+    let olStyle=props.olStyle;
+    if (olStyle==null)return ``;
+    const {button,icon,radius}=olStyle;
+    let btnHover=getColor(button,COLOR_TYPE_HONER);
+    let icoNomal=getColor(icon,COLOR_TYPE_NOMAL);
+    let icoHover=getColor(icon,COLOR_TYPE_HONER);
+    let icoActive=getColor(icon,COLOR_TYPE_ACTIVE);
+    return `
+      border-radius:${radius} !important;
+      & .icon-chevron-down {
+        fill:${icoNomal};
+      }
+      &:hover {
+        background-color: ${btnHover} !important; 
+        & .icon-chevron-down {
+          fill: ${icoHover};
+        }
+      }
+      &.Mui-expanded, &.active {
+        & .icon-chevron-down {
+          fill: ${icoActive};
+        }
+      }
+    `
   }}
 `;
 
@@ -114,11 +127,10 @@ const StyledAccordionDetails = styled(AccordionDetails)`
   a {
     display: flex;
     align-items: center;
-    padding: 0 10px !important;
+    padding: 0.825rem 0.825rem !important;
     color: var(--text);
     transition: all var(--transition);
     width: 100%;
-    height: var(--nav-item-h);
     border-radius: var(--border-radius) !important;
     font-family: var(--heading-font);
     gap: 12px;
@@ -134,49 +146,117 @@ const StyledAccordionDetails = styled(AccordionDetails)`
     &.active {
       background-color: var(--nav-item-hover) !important; 
       color: var(--header);
-      text-shadow: 0 0 0 var(--header);
+      
       .icon {
          fill: var(--header);
       }
     }
   }
+  ${(props) => {
+    let olStyle=props.olStyle;
+    if (olStyle==null)return ``;
+    const {button,icon,text,radius}=olStyle;
+    let btnN=getColor(button,COLOR_TYPE_NOMAL);
+    let btnH=getColor(button,COLOR_TYPE_HONER);
+    let btnA=getColor(button,COLOR_TYPE_ACTIVE);
+    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
+    let icoH=getColor(icon,COLOR_TYPE_HONER);
+    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
+    let textN=getColor(text,COLOR_TYPE_NOMAL);
+    let textH=getColor(text,COLOR_TYPE_HONER);
+    let textA=getColor(text,COLOR_TYPE_ACTIVE);
+    return `
+          a {
+            color:${textN};
+            border-radius:${radius} !important;
+            .icon {
+              fill: ${icoN};
+            }
+            &:hover {
+              background-color: ${btnH} !important; 
+              color: ${textH};
+              .icon {
+                 fill: ${icoH};
+              }
+            }
+            &.active {
+              background-color: ${btnA} !important; 
+              color: ${textA};
+              .icon {
+                 fill: ${icoA};
+              }
+            }
+          }
+        `
+  }}
 `;
 
-const SingleLink = styled(StyledAccordionSummary)`
+// const SingleLink = styled(StyledAccordionSummary)`
+//   padding: 0 !important;
+//   min-height: unset !important;
+//   height: var(--nav-item-h);
+//   border-radius: var(--border-radius) !important;
+//   transition: background-color var(--transition);
+//   background-color: var(--nav-item-top) !important;
+//    ${(props) => {
+//       if (!props.open){
+//         return `
+//             background-color: transparent !important;
+//             a{
+//               justify-content: center !important;
+//             }
+//           `
+//       }
+//     }}
+//   .MuiAccordionSummary-content {
+//     height: 100% !important;
+//     margin: 0 !important;
+//     display: flex;
+//     align-items: center;
+//     justify-content: space-between;
+//   }
+//   a {
+//     display: flex;
+//     align-items: center;
+//     padding: 0 10px !important;
+//     color: var(--text);
+//     transition: all var(--transition);
+//     width: 100%;
+//     height: 100%;
+//     border-radius: var(--border-radius) !important;
+//     font-family: var(--heading-font);
+//     gap: 12px;
+//     .icon {
+//         display: flex;
+//         align-items: center;
+//         justify-content: center;
+//         width: 20px;
+//         height: 20px;
+//         fill: var(--text);
+//     }
+//     &:focus{
+//       color: var(--text);
+//     }
+//     &:hover,
+//     &.active {
+//       background-color: var(--nav-item-hover) !important;
+//       color: var(--header);
+//       text-shadow: 0 0 0 var(--header);
+//       .icon {
+//          fill: var(--header);
+//       }
+//     }
+//   }
+// `;
+const SingleLink=styled.div`
   padding: 0 !important;
   min-height: unset !important;
-  height: var(--nav-item-h);
-  border-radius: var(--border-radius) !important;
   transition: background-color var(--transition);
-  background-color: var(--nav-item-top) !important;
-   ${(props) => {
-      if (!props.open){
-        return `
-            background-color: transparent !important;
-            a{
-              justify-content: center !important;
-            }
-          `
-      }
-    }}
-  .MuiAccordionSummary-content {
-    height: 100% !important;
-    margin: 0 !important;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
   a {
     display: flex;
-    align-items: center;
-    padding: 0 10px !important;
-    color: var(--text);
-    transition: all var(--transition);
-    width: 100%;
-    height: 100%;
-    border-radius: var(--border-radius) !important;
-    font-family: var(--heading-font);
     gap: 12px;
+    padding: 0.825rem 0.825rem !important;
+    align-items: center;
     .icon {
         display: flex;
         align-items: center;
@@ -185,22 +265,52 @@ const SingleLink = styled(StyledAccordionSummary)`
         height: 20px;
         fill: var(--text);
     }
-    &:focus{
-      color: var(--text);
-    }
-    &:hover,
-    &.active {
-      background-color: var(--nav-item-hover) !important; 
-      color: var(--header);
-      text-shadow: 0 0 0 var(--header);
-      .icon {
-         fill: var(--header);
-      }
-    }
   }
-`;
-const ALink=styled.a`
-`;
+  ${(props) => {
+    let olStyle=props.olStyle;
+    if (olStyle==null)return ``;
+    const {button,icon,text,radius,direction}=olStyle;
+    let btnN=getColor(button,COLOR_TYPE_NOMAL);
+    let btnH=getColor(button,COLOR_TYPE_HONER);
+    let btnA=getColor(button,COLOR_TYPE_ACTIVE);
+    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
+    let icoH=getColor(icon,COLOR_TYPE_HONER);
+    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
+    let textN=getColor(text,COLOR_TYPE_NOMAL);
+    let textH=getColor(text,COLOR_TYPE_HONER);
+    let textA=getColor(text,COLOR_TYPE_ACTIVE);
+    let flex_d=direction==="horizontal"?"row":"column";
+    let gap=flex_d=="row"?"12px":"6px";
+    return `
+        border-radius: ${radius} !important;
+        a {
+          flex-direction: ${flex_d};
+          gap:${gap};
+          border-radius: ${radius} !important;
+          background-color: ${btnN} !important;
+          color:${textN};
+          border-radius: ${radius} !important;
+          .icon {
+              fill: ${icoN};
+          }
+          &:hover {
+            background-color: ${btnH} !important;
+            color:${textH};
+            .icon {
+              fill: ${icoH};
+            }
+          }
+          &:focus,&.active {
+            background-color: ${btnA} !important;
+            color:${textA};
+            .icon {
+              fill: ${icoA};
+            }
+          }
+        }
+    `
+  }}
+`
 
 const Link = styled.span`
   color: var(--text);
@@ -229,11 +339,33 @@ const Link = styled.span`
     fill: var(--text);
   }
   ${(props) => {
-    if (!props.open){
-      return `
-              justify-content: center !important;
-            `
-    }
+    let olStyle=props.olStyle;
+    if (olStyle==null)return ``;
+    const {icon,text}=olStyle;
+    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
+    let icoH=getColor(icon,COLOR_TYPE_HONER);
+    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
+    let textN=getColor(text,COLOR_TYPE_NOMAL);
+    let textH=getColor(text,COLOR_TYPE_HONER);
+    let textA=getColor(text,COLOR_TYPE_ACTIVE);
+    return `
+        color:${textN};
+        & .icon {
+          fill:${icoN};
+        }
+        &:hover {
+          color:${textH};
+          & .icon {
+            fill:${icoH};
+          }
+        }
+        &.active {
+          color: ${textA};
+          & .icon {
+             fill:${icoA};
+          }
+        }
+      `
   }}
 `;
 
@@ -245,7 +377,6 @@ const StyledBonus=styled.div`
     if (!props.open){
       return `
           padding: 0px;
-          background-color: transparent !important;
           overflow-x: visible !important;
         `
     }
@@ -531,4 +662,74 @@ const StyledRefer=styled.div`
     }
   }}
 `;
-export {StyledDrawer, SingleLink, Link, StyledAccordion, StyledAccordionSummary, StyledAccordionDetails,StyledBonus,StyledButton,StyledThemeTabs,StyledThemeTab,StyledAct,StyledRefer}
+//新修改
+const StyledBlock=styled.nav`
+  position: relative;
+  gap: 0.375rem;
+  ${(props) => {
+    let column=props.column;
+    let open=props.open;
+    let display=column>1?"grid":"flex";
+    let grid_template_columns=column>1&&open?`grid-template-columns: repeat(${column}, minmax(0, 1fr));`:'';
+    let flex_direction=column>1?'':'flex-direction: column;';
+    let padding=props.open?'padding: 0px 1rem;':'padding: 0px 0.43rem;';
+    return`
+      display: ${display};
+      ${grid_template_columns}
+      ${flex_direction}
+      ${padding}
+    `
+  }}
+`
+const StyledIconLink=styled.div`
+  padding: 0 !important;
+  min-height: unset !important;
+  transition: background-color var(--transition);
+  a {
+    display: flex;
+    padding: 0.825rem 0.825rem !important;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius) !important;
+    .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        fill: var(--text);
+    }
+  }
+  ${(props) => {
+    let olStyle=props.olStyle;
+    if (olStyle==null)return ``;
+    const {button,icon}=olStyle;
+    let btnN=getColor(button,COLOR_TYPE_NOMAL);
+    let btnH=getColor(button,COLOR_TYPE_HONER);
+    let btnA=getColor(button,COLOR_TYPE_ACTIVE);
+    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
+    let icoH=getColor(icon,COLOR_TYPE_HONER);
+    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
+    return `
+          a {
+            
+            .icon {
+                fill: ${icoN};
+            }
+            &:hover {
+              background-color: ${btnH} !important;
+              .icon {
+                fill: ${icoH};
+              }
+            }
+            &:focus,&.active {
+              background-color: ${btnA} !important;
+              .icon {
+                fill: ${icoA};
+              }
+            }
+          }
+      `
+  }}
+`
+export {SingleLink, Link, StyledAccordion, StyledAccordionSummary, StyledAccordionDetails,StyledBonus,StyledButton,StyledThemeTabs,StyledThemeTab,StyledAct,StyledRefer,StyledBlock,StyledIconLink}

src/locales/languages/en_US.json

@@ -15,11 +15,11 @@
     "spin": "SPIN"
   },
   "tab": {
-    "more": "More",
-    "home": "Home",
-    "promotions": "Promotions",
-    "account": "Account",
-    "chat": "Chat"
+    "withdraw": "Withdraw",
+    "deposit": "Deposit",
+    "promotion": "Promotion",
+    "message": "Message",
+    "service": "Service"
   },
   "refer": {
     "title": "RIO Carnival 2024",

src/styles/_global.scss

@@ -77,6 +77,11 @@ body {
         }
     }
 }
+.app-hash{
+    position: fixed;
+    z-index: 1000;
+    inset: 0px;
+}
 .pop{
     min-height: 100vh;
     display: flex;
@@ -118,7 +123,7 @@ input, input::placeholder {
 }
 .sidebar-nav-block{
     position: relative;
-    padding: 0px 7px;
+    padding: 0px 1rem;
 }
 .ls-icon{
     display: flex;

src/styles/_vars.scss

@@ -1,4 +1,11 @@
 /* colors, fonts, effects, etc. */
+$width-mobile-max:621px;
+$width-desktop-small-min:622px;
+$width-desktop-small-max:962px;
+$width-desktop-midd-min:963px;
+$width-desktop-midd-max:1263px;
+$width-desktop-big-min:1264px;
+$width-desktop-big-max:1564px;
 
 :root {
     --widget-scale: 0px;
@@ -58,27 +65,27 @@
     --side-close:65px;
 }
 
-@media screen and (min-width: 414px) {
-    :root {
-        --card-padding: 30px;
-    }
-}
-@media screen and (max-width: 621px) {
+//@media screen and (min-width: 414px) {
+//    :root {
+//        --card-padding: 30px;
+//    }
+//}
+@media screen and (max-width: $width-mobile-max) {
     :root {
         --grid-num:3.2;
     }
 }
-@media screen and (min-width: 622px) and (max-width: 962px) {
+@media screen and (min-width: $width-desktop-small-min) and (max-width: $width-desktop-small-max) {
     :root {
         --grid-num:4;
     }
 }
-@media screen and (min-width: 963px) and (max-width: 1263px) {
+@media screen and (min-width: $width-desktop-midd-min) and (max-width: $width-desktop-midd-max) {
     :root {
         --grid-num:5;
     }
 }
-@media screen and (min-width: 1264px) and (max-width: 1564px) {
+@media screen and (min-width: $width-desktop-big-min) and (max-width: $width-desktop-big-max) {
     :root {
         --grid-num:6;
     }

src/widgets/ModuleGameTabs/index.jsx

@@ -25,7 +25,6 @@ const ModuleGameTabs=({data})=>{
         tabdata.data=items;
     }
     parseTabs();
-    console.log(tabdata)
     return (
         <div className={``}>
             <GameTabs data={tabdata}>