feat: Sidebar

messages/br.json

@@ -22,6 +22,18 @@
     "desc3":  "2. este jogo contém compras no app.",
     "desc4": "3. O fato de um jogador jogar ou ganhar em um jogo de apostas sociais não significa que ele ganhará em apostas com dinheiro real e jogos relacionados no futuro."
   },
+  "Sidebar": {
+    "casino": "Casino",
+    "esportes": "Esportes",
+    "promocoes": "Promoções",
+    "promoCode": "Have a promo code?",
+    "codeInputPlaceHolder": "Insira o código",
+    "promoButton": "Redeem",
+    "coumnidade": "Junte-se à nossa comunidade",
+    "ajude": " Visitar o Centro de Ajuda ",
+    "email": " Relatar Problema ",
+    "inicial": " Adicionar à Tela inicial "
+  },
 
   "Header": {
     "login": "Login",

src/app/[locale]/affiliate/summary/page.tsx

@@ -1,315 +1,379 @@
-'use client'
+"use client";
+import { useRouter } from "@/i18n";
 import { FC, PropsWithChildren, useRef, useState } from "react";
-import './page.scss'
-import { useRouter } from "@/i18n"
+import "./page.scss";
 
-interface Props { }
+interface Props {}
 
 const App: FC<PropsWithChildren<Props>> = (props) => {
-    const router:any = useRouter()
-    const goPage = (path = '')=>{
-        if(path){
-            if(path === 'home'){
-                router.replace('/')
-                return
+    const router: any = useRouter();
+    const goPage = (path = "") => {
+        if (path) {
+            if (path === "home") {
+                router.replace("/");
+                return;
             }
-            
+
             // console.log(router);
-            
-            router.replace(`/affiliate/${path}`)
-            return 
+
+            router.replace(`/affiliate/${path}`);
+            return;
         }
-        router.back()
-    }
-    const sliderRef = useRef<HTMLDivElement>(null)
-    const [num,setNum] = useState(100)
-    const [money,setMoney] = useState('5000')
-    const handleSlide:any =(e:React.MouseEvent<HTMLDivElement,MouseEvent>)=>{
-        if(sliderRef.current){
-            const startX = sliderRef.current.getBoundingClientRect().x
-            const x = e.clientX - startX
-            const xRem = x/(144*0.6)
-            const intNum = Math.round(10000*xRem)-Math.round(10000*xRem%10)
-            setNum(intNum)
-            const m = intNum*50
-            let r = ''
-            const arr = m.toString().split('')
-            arr.forEach((item,i)=>{
-                if(i!==arr.length&&(arr.length-i-1)%3===0){
-                    r += item + ','
-                }else{
-                    r += item
+        router.back();
+    };
+    const sliderRef = useRef<HTMLDivElement>(null);
+    const [num, setNum] = useState(100);
+    const [money, setMoney] = useState("5000");
+    const handleSlide: any = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (sliderRef.current) {
+            const startX = sliderRef.current.getBoundingClientRect().x;
+            const x = e.clientX - startX;
+            const xRem = x / (144 * 0.6);
+            const intNum = Math.round(10000 * xRem) - Math.round((10000 * xRem) % 10);
+            setNum(intNum);
+            const m = intNum * 50;
+            let r = "";
+            const arr = m.toString().split("");
+            arr.forEach((item, i) => {
+                if (i !== arr.length && (arr.length - i - 1) % 3 === 0) {
+                    r += item + ",";
+                } else {
+                    r += item;
                 }
-            })
-            
-            setMoney(r)
-            const scale = ((Math.round((xRem * 10000)))/100.00).toFixed(2) + '%';
-            sliderRef.current.style.width = scale
+            });
+
+            setMoney(r);
+            const scale = (Math.round(xRem * 10000) / 100.0).toFixed(2) + "%";
+            sliderRef.current.style.width = scale;
         }
-    }
+    };
     return (
-            <div className="vux-drawer-summary">
-                <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
-                    <div className="referral router-view" id="id-router-view" style={{ backgroundColor: "rgb(237, 237, 237)" }}>
-                        <div className="headerBack">
-                            <div className="left" onClick={()=>goPage()}>
-                                <span className="iconfont icon-xiangzuo1"/>
-                            </div>
-                            <div className="title">
-                                Afiliado
-                                <span> - Ganhe R$ 10.000 por dia</span>
-                            </div>
-                            <div className="right" onClick={()=>goPage('home')}>
-                                <span className="iconfont icon-company_nav_icon_home router-link-active"/>
-                            </div>
+        <div className="vux-drawer-summary">
+            <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
+                <div
+                    className="referral router-view"
+                    id="id-router-view"
+                    style={{ backgroundColor: "rgb(237, 237, 237)" }}
+                >
+                    <div className="headerBack">
+                        <div className="left" onClick={() => goPage()}>
+                            <span className="iconfont icon-xiangzuo1" />
                         </div>
-                        <div className="tabs alginLeft van-tabs van-tabs--line">
-                            <div className="van-tabs__wrap van-tabs__wrap--scrollable">
-                                <div role="tablist" className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
-                                    <div role="tab" className="van-tab van-tab--active" aria-selected="true" onClick={()=>goPage('summary')}>
-                                        <span className="van-tab__text">PAINEL</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('referrals')}>
-                                        <span className="van-tab__text">REFERÊNCIAS</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('report')}>
-                                        <span className="van-tab__text">RELATÓRIO</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('payments')}>
-                                        <span className="van-tab__text">PAGAMENTOS</span>
-                                    </div>
-                                    <div role="tab" className="van-tab" onClick={()=>goPage('faq')}>
-                                        <span className="van-tab__text">FAQ</span>
-                                    </div>
-                                    <div role="tab" className="van-tab">
-                                        <span className="van-tab__text">TUTORIAL</span>
-                                    </div>
-                                    <div className="van-tabs__line"></div>
+                        <div className="title">
+                            Afiliado
+                            <span> - Ganhe R$ 10.000 por dia</span>
+                        </div>
+                        <div className="right" onClick={() => goPage("home")}>
+                            <span className="iconfont icon-company_nav_icon_home router-link-active" />
+                        </div>
+                    </div>
+                    <div className="tabs alginLeft van-tabs van-tabs--line">
+                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
+                            <div
+                                role="tablist"
+                                className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
+                            >
+                                <div
+                                    role="tab"
+                                    className="van-tab van-tab--active"
+                                    aria-selected="true"
+                                    onClick={() => goPage("summary")}
+                                >
+                                    <span className="van-tab__text">PAINEL</span>
+                                </div>
+                                <div
+                                    role="tab"
+                                    className="van-tab"
+                                    onClick={() => goPage("referrals")}
+                                >
+                                    <span className="van-tab__text">REFERÊNCIAS</span>
+                                </div>
+                                <div
+                                    role="tab"
+                                    className="van-tab"
+                                    onClick={() => goPage("report")}
+                                >
+                                    <span className="van-tab__text">RELATÓRIO</span>
+                                </div>
+                                <div
+                                    role="tab"
+                                    className="van-tab"
+                                    onClick={() => goPage("payments")}
+                                >
+                                    <span className="van-tab__text">PAGAMENTOS</span>
                                 </div>
+                                <div role="tab" className="van-tab" onClick={() => goPage("faq")}>
+                                    <span className="van-tab__text">FAQ</span>
+                                </div>
+                                <div role="tab" className="van-tab">
+                                    <span className="van-tab__text">TUTORIAL</span>
+                                </div>
+                                <div className="van-tabs__line"></div>
                             </div>
                         </div>
-                        <div className="content">
-                            <div className="summary referral-router-view">
-                                <div className="content">
-                                    <div className="title">
-                                        <div>
-                                            {" "}
-                                            Hoje
-                                            <span className="iconfont icon-bangzhu"/>
-                                        </div>
-                                    </div>
-                                    <div className="cardMian">
-                                        <div>
-                                            <ul className="today">
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> Inscrições </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> Novos jogadores </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> Aposta válidas em equipe </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> Comissão </span>
-                                                </li>
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="content">
-                                    <div className="title">
+                    </div>
+                    <div className="content">
+                        <div className="summary referral-router-view">
+                            <div className="content">
+                                <div className="title">
                                     <div>
-                                            {" "}
-                                            Total 
-                                            <span className="iconfont icon-bangzhu"/>
-                                        </div>
+                                        {" "}
+                                        Hoje
+                                        <span className="iconfont icon-bangzhu" />
                                     </div>
-                                    <div className="cardMian">
+                                </div>
+                                <div className="cardMian">
                                     <div>
-                                            <ul className="total">
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> Inscrições </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span>  Jogadores totais  </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span>  Aposta válidas total  </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">0</span>
-                                                    <span> Comissão </span>
-                                                </li>
-                                            </ul>
-                                        </div>
+                                        <ul className="today">
+                                            <li>
+                                                <span className="num">0</span>
+                                                <span> Inscrições </span>
+                                            </li>
+                                            <li>
+                                                <span className="num">0</span>
+                                                <span> Novos jogadores </span>
+                                            </li>
+                                            <li>
+                                                <span className="num">0</span>
+                                                <span> Aposta válidas em equipe </span>
+                                            </li>
+                                            <li>
+                                                <span className="num">0</span>
+                                                <span> Comissão </span>
+                                            </li>
+                                        </ul>
                                     </div>
                                 </div>
-                                <div className="content">
-                                    <div className="title">
+                            </div>
+                            <div className="content">
+                                <div className="title">
                                     <div>
-                                            {" "}
-                                            Comissão  
-                                            <span className="iconfont icon-bangzhu"/>
-                                        </div>
-                                    </div>
-                                    <div className="cardMian">
-                                        <div className="vip">
-                                            <div className="level">
-                                                <span className="iconfont icon-vip"></span>
-                                                <span className="levelNum">1</span>
-                                            </div>
-                                            <div>
-                                                Nível de Agente
-                                                <span className="iconfont icon-tishi"></span>
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <ul className="commission">
-                                                <li>
-                                                    <span className="num">
-                                                        <span>R$</span>
-                                                        <span className="cash">0.00</span>
-                                                    </span>
-                                                    <span> Total pago </span>
-                                                </li>
-                                                <li>
-                                                    <span className="num">
-                                                        <span>R$</span>
-                                                        <span className="cash">0.00</span>
-                                                    </span>
-                                                    <span>  Não pago  </span>
-                                                </li>
-                                            </ul>
-                                            <div className="wallet">
-                                                <div className="btn"> TRANSFERIR PARA A CARTEIRA </div>
-                                                <div className="tip">
-                                                    <span className="iconfont icon-tishi1"></span>
-                                                    Valor mínimo de transferência de  10 BRL
-                                                </div>
-                                            </div>
-                                        </div>
+                                        {" "}
+                                        Total
+                                        <span className="iconfont icon-bangzhu" />
                                     </div>
                                 </div>
-                                <div className="content shareMain">
-                                    <div className="title">Compartilhe com sua comunidade social</div>
-                                    <div className="share">
-                                        <ul className="sharePlatform">
-                                            <li>
-                                                <a href="">
-                                                    <img src="/img/facebook.webp" alt="" />
-                                                </a>
-                                                <span>Facebook</span>
-                                            </li>
+                                <div className="cardMian">
+                                    <div>
+                                        <ul className="total">
                                             <li>
-                                                <a href="">
-                                                    <img src="/img/WhatsApp.webp" alt="" />
-                                                </a>
-                                                <span>WhatsApp</span>
+                                                <span className="num">0</span>
+                                                <span> Inscrições </span>
                                             </li>
                                             <li>
-                                                <a href="">
-                                                    <img src="/img/Telegram.png" alt="" />
-                                                </a>
-                                                <span>Telegram</span>
+                                                <span className="num">0</span>
+                                                <span> Jogadores totais </span>
                                             </li>
                                             <li>
-                                                <a href="">
-                                                    <img src="/img/Twitter.webp" alt="" />
-                                                </a>
-                                                <span>Twitter</span>
+                                                <span className="num">0</span>
+                                                <span> Aposta válidas total </span>
                                             </li>
                                             <li>
-                                                <a href="">
-                                                    <img src="/img/email.webp" alt="" />
-                                                </a>
-                                                <span>Email</span>
+                                                <span className="num">0</span>
+                                                <span> Comissão </span>
                                             </li>
                                         </ul>
                                     </div>
-                                    <div className="shareLink">
-                                        <div className="tip">Compartilhe este link de indicação com seus amigos</div>
-                                        <div className="copyUrl">
-                                            <span className="url omitWrap">https://www.9f.com/br/m/r/xxxxxx</span>
-                                            <span id="copy">Cópia</span>
-                                        </div>
+                                </div>
+                            </div>
+                            <div className="content">
+                                <div className="title">
+                                    <div>
+                                        {" "}
+                                        Comissão
+                                        <span className="iconfont icon-bangzhu" />
                                     </div>
                                 </div>
-                                <div className="content">
-                                    <div className="title">
-                                        <div> Grupo CHAT entre agentes por telegram oficial do 9F.COM </div>
+                                <div className="cardMian">
+                                    <div className="vip">
+                                        <div className="level">
+                                            <span className="iconfont icon-vip"></span>
+                                            <span className="levelNum">1</span>
+                                        </div>
+                                        <div>
+                                            Nível de Agente
+                                            <span className="iconfont icon-tishi"></span>
+                                        </div>
                                     </div>
                                     <div>
-                                        <div className="tel-box">
-                                            <a href="" className="telicon">
-                                                <img src="/img/telegram.webp" alt="" />
-                                            </a>
-                                            <div className="hintTitle3">
-                                                Clique o botão de ícone no lado esquerdo, junte-se ao nosso grupo afiliado do TG oficial Vamos oferecer- lo as palavras afiliadas profissionais e as ferramentas afiliadas profissionais. E ajudar-lo obter bem os benefícios reais.
+                                        <ul className="commission">
+                                            <li>
+                                                <span className="num">
+                                                    <span>R$</span>
+                                                    <span className="cash">0.00</span>
+                                                </span>
+                                                <span> Total pago </span>
+                                            </li>
+                                            <li>
+                                                <span className="num">
+                                                    <span>R$</span>
+                                                    <span className="cash">0.00</span>
+                                                </span>
+                                                <span> Não pago </span>
+                                            </li>
+                                        </ul>
+                                        <div className="wallet">
+                                            <div className="btn"> TRANSFERIR PARA A CARTEIRA </div>
+                                            <div className="tip">
+                                                <span className="iconfont icon-tishi1"></span>
+                                                Valor mínimo de transferência de 10 BRL
                                             </div>
                                         </div>
-                                        <div className="hintTitle2">
-                                            <i className="iconfont icon-tishi"></i>
-                                            Se você tem um grande público e seguidores. Temos condições especiais para você personalizar seu programa de indicações! para mais detalhes, por favorcontate- nos:  
-                                            <a href="" style={{borderBottom: "1px solid rgb(109, 155, 195)",color:"#0000EE"}}>business@9f.com</a>
-                                        </div>
                                     </div>
                                 </div>
-                                <div className="content">
-                                    <div className="title">
-                                        <div>
-                                            Regras de recompensas por comissão‰ 
-                                            <span className="iconfont icon-bangzhu"></span>
+                            </div>
+                            <div className="content shareMain">
+                                <div className="title">Compartilhe com sua comunidade social</div>
+                                <div className="share">
+                                    <ul className="sharePlatform">
+                                        <li>
+                                            <a href="">
+                                                <img src="/img/facebook.webp" alt="" />
+                                            </a>
+                                            <span>Facebook</span>
+                                        </li>
+                                        <li>
+                                            <a href="">
+                                                <img src="/img/WhatsApp.webp" alt="" />
+                                            </a>
+                                            <span>WhatsApp</span>
+                                        </li>
+                                        <li>
+                                            <a href="">
+                                                <img src="/img/Telegram.png" alt="" />
+                                            </a>
+                                            <span>Telegram</span>
+                                        </li>
+                                        <li>
+                                            <a href="">
+                                                <img src="/img/Twitter.webp" alt="" />
+                                            </a>
+                                            <span>Twitter</span>
+                                        </li>
+                                        <li>
+                                            <a href="">
+                                                <img src="/img/email.webp" alt="" />
+                                            </a>
+                                            <span>Email</span>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="shareLink">
+                                    <div className="tip">
+                                        Compartilhe este link de indicação com seus amigos
+                                    </div>
+                                    <div className="copyUrl">
+                                        <span className="url omitWrap">
+                                            https://www.9f.com/br/m/r/xxxxxx
+                                        </span>
+                                        <span id="copy">Cópia</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="content">
+                                <div className="title">
+                                    <div>
+                                        {" "}
+                                        Grupo CHAT entre agentes por telegram oficial do 9F.COM{" "}
+                                    </div>
+                                </div>
+                                <div>
+                                    <div className="tel-box">
+                                        <a href="" className="telicon">
+                                            <img src="/img/telegram.webp" alt="" />
+                                        </a>
+                                        <div className="hintTitle3">
+                                            Clique o botão de ícone no lado esquerdo, junte-se ao
+                                            nosso grupo afiliado do TG oficial Vamos oferecer- lo as
+                                            palavras afiliadas profissionais e as ferramentas
+                                            afiliadas profissionais. E ajudar-lo obter bem os
+                                            benefícios reais.
                                         </div>
                                     </div>
-                                    <div className="hint">
-                                        <div className="hintTitle">
-                                            Ganhe dinheiro indicando amigos para o 9F.COM, você ganha mais de 80% em recompensas de comissão!
+                                    <div className="hintTitle2">
+                                        <i className="iconfont icon-tishi"></i>
+                                        Se você tem um grande público e seguidores. Temos condições
+                                        especiais para você personalizar seu programa de indicações!
+                                        para mais detalhes, por favorcontate- nos:
+                                        <a
+                                            href=""
+                                            style={{
+                                                borderBottom: "1px solid rgb(109, 155, 195)",
+                                                color: "#0000EE",
+                                            }}
+                                        >
+                                            business@9f.com
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="content">
+                                <div className="title">
+                                    <div>
+                                        Regras de recompensas por comissão‰
+                                        <span className="iconfont icon-bangzhu"></span>
+                                    </div>
+                                </div>
+                                <div className="hint">
+                                    <div className="hintTitle">
+                                        Ganhe dinheiro indicando amigos para o 9F.COM, você ganha
+                                        mais de 80% em recompensas de comissão!
+                                    </div>
+                                    <div className="imgContent">
+                                        <img src="/img/cash.png" alt="" />
+                                        <div>
+                                            Número de indicações &gt; {num}
+                                            <br />
+                                            Comissão &gt; R$ {money} todo mês!
                                         </div>
-                                        <div className="imgContent">
-                                            <img src="/img/cash.png" alt="" />
-                                            <div>
-                                                Número de indicações > {num}
-                                                <br />
-                                                Comissão > R$ {money} todo mês!
-                                            </div>
-                                            <div className="slider van-slider" style={{height: "0.02rem"}} onClick={handleSlide}>
-                                                <div className="van-slider__bar" style={{width: "0.900901%",background: "rgb(0, 157, 128)"}} ref={sliderRef}>
-                                                    <div role="slider" className="van-slider__button-wrapper" >
-                                                        <div className="img"></div>
-                                                    </div>
+                                        <div
+                                            className="slider van-slider"
+                                            style={{ height: "0.02rem" }}
+                                            onClick={handleSlide}
+                                        >
+                                            <div
+                                                className="van-slider__bar"
+                                                style={{
+                                                    width: "0.900901%",
+                                                    background: "rgb(0, 157, 128)",
+                                                }}
+                                                ref={sliderRef}
+                                            >
+                                                <div
+                                                    role="slider"
+                                                    className="van-slider__button-wrapper"
+                                                >
+                                                    <div className="img"></div>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="relationSchema">
-                                            <div className="groupTitle">Unlimited development of subordinates</div>
-                                            <img src="/img/group_br.webp" alt="" className="groupImg"/>
-                                            <ul className="rules">
-                                                <li>
-                                                    Você receberá uma porcentagem de comissão diferente toda vez que um jogador indicado por você fizer uma aposta, 
-                                                    <span style={{color:"red"}}>ganhar ou perder</span>
-                                                    .
-                                                </li>
-                                                <li>
-                                                    O sistema calcula a comissão a cada 3 minutos.
-                                                </li>
-                                            </ul>
+                                    </div>
+                                    <div className="relationSchema">
+                                        <div className="groupTitle">
+                                            Unlimited development of subordinates
                                         </div>
+                                        <img src="/img/group_br.webp" alt="" className="groupImg" />
+                                        <ul className="rules">
+                                            <li>
+                                                Você receberá uma porcentagem de comissão diferente
+                                                toda vez que um jogador indicado por você fizer uma
+                                                aposta,
+                                                <span style={{ color: "red" }}>
+                                                    ganhar ou perder
+                                                </span>
+                                                .
+                                            </li>
+                                            <li>O sistema calcula a comissão a cada 3 minutos.</li>
+                                        </ul>
                                     </div>
                                 </div>
-                                <div className="content"></div>
                             </div>
+                            <div className="content"></div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
     );
 };
 

src/app/[locale]/layout.tsx

@@ -30,7 +30,7 @@ export default async function LocaleLayout({
     const messages = await getMessages();
     return (
         <html lang={locale} suppressHydrationWarning>
-            <body className={clsx("bg-white font-sans", fontSans.variable)}>
+            <body className={clsx("font-sans", fontSans.variable)}>
                 <Providers themeProps={{ defaultTheme: "dark", attribute: "class" }}>
                     <NextIntlClientProvider messages={messages}>
                         <PageTransitionEffect>{children}</PageTransitionEffect>

src/app/globals.css

@@ -28,6 +28,7 @@ html, body {
 
 html {
     font-size: 144px;
+    background: #fff !important;
 }
 
 ::-webkit-scrollbar {
@@ -41,6 +42,7 @@ html {
     margin: 0 auto;
     font-size: 0.14rem;
     position: relative;
+    background: #000;
 }
 
 
@@ -51,3 +53,5 @@ html {
 .adm-input input{
   color: #fff;
 }
+
+

src/components/Card/Card.tsx

@@ -1,5 +1,7 @@
 "use client";
 import { GameListRep, getGameDetailApi } from "@/api/home";
+import { useRouter } from "@/i18n";
+import { useGlobalStore } from "@/stores";
 import { Button, Modal, ModalBody, ModalContent, useDisclosure } from "@nextui-org/react";
 import { useTranslations } from "next-intl";
 import { FC, PropsWithChildren, ReactNode, useRef } from "react";
@@ -14,6 +16,10 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
     const app: HTMLElement = document.querySelector("#app")!;
     const t = useTranslations("Game");
     const urlRef = useRef<string>("");
+
+    const state = useGlobalStore();
+    const router = useRouter();
+
     const handler = (game: GameListRep) => {
         onOpen();
         const params = {
@@ -24,7 +30,12 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
         });
     };
     const playGameHandler = () => {
-        window.open(urlRef.current);
+        const { token } = state;
+        if (token) {
+            window.open(urlRef.current);
+        } else {
+            router.push("/login");
+        }
     };
     return (
         <>

src/components/Header/index.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@/i18n";
+import { useGlobalStore } from "@/stores";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import { FC, ReactNode } from "react";
@@ -12,20 +13,31 @@ import styles from "./style.module.scss";
 export interface HeaderProps {
     headerPlaceholder?: boolean;
     headerRender?: () => ReactNode;
+    menuHandler?: () => void;
 }
 
 const cs = clsx(["iconfont icon-gengduo", styles.menu]);
-const DefaultHeader: FC = () => {
+const DefaultHeader: FC<HeaderProps> = (props) => {
+    const { menuHandler } = props;
     const t = useTranslations("Header");
+    const state = useGlobalStore();
     return (
         <div className={styles.headerMain}>
-            <div className={styles.headerLeft}>
-                <div className={cs}></div>
+            <div className={styles.headerLeft} onClick={menuHandler}>
+                {/*<div className={cs}></div>*/}
             </div>
             <HeaderTitle />
             <div className={styles.headerRight}>
                 <div className={styles.right}>
-                    <Link href={"/login"}>{t("login")}</Link>
+                    {state.userInfo ? (
+                        <div className={"flex items-center text-[0.12rem]"}>
+                            <i className={"iconfont icon-yonghu mr-[0.03rem]"}></i>
+                            <span>0.00</span>
+                        </div>
+                    ) : (
+                        <Link href={"/login"}>{t("login")}</Link>
+                    )}
+
                     <Link href={"/login"} className={styles.rightActive}>
                         {t("register")}
                     </Link>
@@ -36,14 +48,14 @@ const DefaultHeader: FC = () => {
 };
 
 const Header: FC<HeaderProps> = (props) => {
-    const { headerPlaceholder = true, headerRender } = props;
+    const { headerPlaceholder = true, headerRender, ...other } = props;
     const cs = clsx({
         [styles.placeholder]: headerPlaceholder,
     });
     return (
         <div className={cs}>
             <div className={styles.headerWrap}>
-                {headerRender ? headerRender() : <DefaultHeader />}
+                {headerRender ? headerRender() : <DefaultHeader {...other} />}
             </div>
         </div>
     );

src/components/Layout/Sidebar.tsx

@@ -1,6 +1,7 @@
 import Box from "@/components/Box";
 import { Tab, Tabs } from "@nextui-org/react";
 import { Input } from "antd-mobile";
+import { useTranslations } from "next-intl";
 import { FC, PropsWithChildren } from "react";
 interface Props {}
 
@@ -11,9 +12,10 @@ const cardData = [
     { url: "", icon: "https://9f.com/images/homePage/card/c-firstdeposit.png", desc: "" },
 ];
 const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
+    const t = useTranslations("Sidebar");
     return (
-        <Box pt={false}>
-            <div className={"h-[0.4rem]"}></div>
+        <Box>
+            {/*<div className={"h-[0.4rem]"}></div>*/}
             {/*tabs*/}
             <div className={"relative"}>
                 <Tabs
@@ -31,9 +33,9 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
                         key="Casino"
                         className={"w-[50%]"}
                         title={
-                            <div className="flex items-center space-x-2">
+                            <div className="flex items-center space-x-2 text-[#fff]">
                                 <span className={"iconfont icon-choujiang"}></span>
-                                <span>Casino</span>
+                                <span>{t("casino")}</span>
                             </div>
                         }
                     />
@@ -41,9 +43,9 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
                         key="Esportes"
                         className={"w-[50%]"}
                         title={
-                            <div className="flex items-center space-x-2">
+                            <div className="flex items-center space-x-2 text-[#fff]">
                                 <span className={"iconfont icon-tiyu"}></span>
-                                <span>Esportes</span>
+                                <span>{t("esportes")}</span>
                             </div>
                         }
                     />
@@ -75,30 +77,34 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
                 <span
                     className={"iconfont icon-liwulipinjiangpin mr-[0.0694rem] text-[0.16rem]"}
                 ></span>
-                <span> Promoções </span>
+                <span> {t("promocoes")} </span>
             </section>
             {/*  Esportes */}
             <section
                 className={"flex items-center rounded-[3px] bg-[#3a3a3a] p-[0.08rem] text-[#fff]"}
             >
                 <i className={"iconfont icon-tiyu mr-[0.0694rem] text-[0.15rem]"}></i>
-                <div className={"flex-1"}>Esportes</div>
+                <div className={"flex-1"}>{t("esportes")}</div>
                 <i className={"iconfont icon-xiangyou1 text-[0.15rem]"}></i>
             </section>
             {/*  code */}
-            <section className={"mt-[0.11rem] text-[#fff]"}>Have a promo code?</section>
+            <section className={"mt-[0.11rem] text-[#fff]"}>{t("promoCode")}</section>
             <section className={"w-1/1 mt-[0.11rem] flex"}>
                 <div className={"flex-1 bg-[#3a3a3a] p-[0.0694rem]" + " text-[#fff]"}>
-                    <Input placeholder="Insira o código" clearable className={"text-[#fff]"} />
+                    <Input
+                        placeholder={t("codeInputPlaceHolder")}
+                        clearable
+                        className={"text-[#fff]"}
+                    />
                 </div>
                 <button
                     className={`w-[0.6rem] bg-gradient-to-b from-[#a28362] to-[#986847] text-[0.12rem] text-[#fff]`}
                 >
-                    Redeem
+                    {t("promoButton")}
                 </button>
             </section>
 
-            <section className={"mt-[0.11rem] text-[#fff]"}>Junte-se à nossa comunidade</section>
+            <section className={"mt-[0.11rem] text-[#fff]"}>{t("coumnidade")}</section>
 
             <section className={"mt-[0.11rem] text-[#fff]"}>
                 <div className={"flex"}>
@@ -123,15 +129,15 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
             <section className={"mt-[0.11rem] text-[#7d7d7d]"}>
                 <div className={"flex items-center p-[0.08rem]"}>
                     <i className={"iconfont icon-bangzhu mr-[0.0694rem] text-[0.15rem]"}></i>
-                    <div className={"flex-1"}> Visitar o Centro de Ajuda</div>
+                    <div className={"flex-1"}> {t("ajude")}</div>
                 </div>
                 <div className={"flex items-center p-[0.08rem]"}>
                     <i className={"iconfont icon-duanxinguanli mr-[0.0694rem] text-[0.15rem]"}></i>
-                    <div className={"flex-1"}> Relatar Problema </div>
+                    <div className={"flex-1"}> {t("email")}</div>
                 </div>
                 <div className={"flex items-center p-[0.08rem]"}>
                     <i className={"iconfont icon-fenxiang mr-[0.0694rem] text-[0.15rem]"}></i>
-                    <div className={"flex-1"}> Adicionar à Tela inicial </div>
+                    <div className={"flex-1"}> {t("inicial")} </div>
                 </div>
             </section>
         </Box>

src/components/Layout/index.tsx

@@ -2,40 +2,66 @@
 import Footer, { FooterProps } from "@/components/Footer";
 import Header, { HeaderProps } from "@/components/Header";
 import Sidebar from "@/components/Layout/Sidebar";
-import { FC, PropsWithChildren } from "react";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { FC, PropsWithChildren, useRef } from "react";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import styles from "./style.module.scss";
 type Props = FooterProps & HeaderProps;
 const Layout: FC<PropsWithChildren<Props>> = (props) => {
     const { children } = props;
 
+    const swiperRef = useRef<SwiperClass>();
+    const isOpen = useRef<boolean>(false);
+    const homeContainerRef = useRef<HTMLDivElement>(null);
+    const barRef = useRef<HTMLDivElement>(null);
+
     const startHandler = () => {
-        console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 12`, "start");
+        homeContainerRef.current?.classList.add(styles.containerMask);
+        barRef.current?.classList.add(styles.cross);
+        isOpen.current = true;
     };
     const endHandler = () => {
-        console.log(`🎯🎯🎯🎯🎯-> in index.tsx on 12`, "end");
+        homeContainerRef.current?.classList.remove(styles.containerMask);
+        barRef.current?.classList.remove(styles.cross);
+        isOpen.current = false;
+    };
+
+    const openSliderHandler = () => {
+        if (isOpen.current) {
+            swiperRef.current?.slideNext();
+        } else {
+            swiperRef.current?.slidePrev();
+        }
     };
     return (
         <Swiper
             initialSlide={1}
             resistanceRatio={0}
             slidesPerView={"auto"}
+            onSlidePrevTransitionStart={startHandler}
+            onSlideNextTransitionEnd={endHandler}
             slideToClickedSlide
-            onSlideChangeTransitionStart={startHandler}
-            onSlideChangeTransitionEnd={endHandler}
-            // allowTouchMove={false}
+            onSwiper={(swiper) => {
+                swiperRef.current = swiper;
+            }}
+            allowTouchMove={false}
         >
-            <SwiperSlide
-                style={{ width: "70%" }}
-                className={"mx-w-[2.2222rem] " + " bg-[rgb(31,31,31)]"}
-            >
+            <SwiperSlide style={{ width: "70%" }} className={"mx-w-[2.2222rem] bg-[rgb(31,31,31)]"}>
                 <section className="relative h-[100vh]">
                     <Sidebar></Sidebar>
                 </section>
             </SwiperSlide>
 
             <SwiperSlide style={{ width: "100%" }}>
-                <div className="relative h-[100vh]">
+                <div className="relative h-[100vh]" ref={homeContainerRef}>
+                    <div
+                        className={`absolute left-[0.1rem] top-[0.15rem] z-40 text-[#fff]`}
+                        ref={barRef}
+                        onClick={openSliderHandler}
+                    >
+                        <div className={styles.bar}></div>
+                        <div className={styles.bar} style={{ width: "0.1389rem" }}></div>
+                        <div className={styles.bar}></div>
+                    </div>
                     <Header {...props}></Header>
                     <main className={styles.main} id="maincontainer">
                         {children}

src/components/Layout/style.module.scss

@@ -4,3 +4,40 @@
   height: calc(calc(100vh - $-header-height) - $-footer-height);
   overflow-y: scroll;
 }
+
+.containerMask{
+  &::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 3;
+    background: rgba(0,0,0,0.5);
+  }
+}
+
+
+.bar {
+  position: relative;
+  display: block;
+  width: 0.2083rem;
+  height: 3px;
+  margin-bottom: 5px ;
+  background-color: #606060;
+  border-radius: 10px;
+  transition: 0.3s;
+}
+
+.cross .bar:nth-of-type(1) {
+  transform: translateY(7px) rotate(-45deg);
+}
+
+.cross .bar:nth-of-type(2) {
+  opacity: 0;
+}
+
+.cross .bar:nth-of-type(3) {
+  transform: translateY(-9px) rotate(45deg);
+}

src/utils/server/axios.ts

@@ -1,7 +1,6 @@
+import { Toast } from "antd-mobile";
 import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from "axios";
 import type { AxiosOptions } from "./type";
-import { Toast } from 'antd-mobile'
-
 type Result<T = any> = {
     code: number;
     msg: string;
@@ -10,7 +9,7 @@ type Result<T = any> = {
 
 interface CustomRequestConfig {
     toast?: boolean;
-  }
+}
 
 export default class Request {
     private axiosInstance: AxiosInstance;
@@ -42,22 +41,22 @@ export default class Request {
          * @description 全局请求拦截
          */
         axiosInstance.interceptors.request.use(
-            (config: InternalAxiosRequestConfig & CustomRequestConfig) => {
+            async (config: InternalAxiosRequestConfig & CustomRequestConfig) => {
                 if (requestInterceptor) {
                     config = requestInterceptor(config);
                     // header请求头添加token
-                    let globalStore = window.localStorage.getItem("globalStore") || '';
+                    let globalStore = window.localStorage.getItem("globalStore") || "";
                     if (globalStore) {
-                        let userInfo = JSON.parse(globalStore)
-                        config.headers['Token'] = userInfo?.state?.token;
+                        let userInfo = JSON.parse(globalStore);
+                        config.headers["Token"] = userInfo?.state?.token;
                     }
                     if (config && config?.toast) {
                         Toast.show({
-                            icon: 'loading',
-                            content: '请求中...',
+                            icon: "loading",
+                            content: "请求中...",
                             duration: 0,
                             maskClickable: false,
-                        })
+                        });
                     }
                 }
                 return config;
@@ -73,7 +72,7 @@ export default class Request {
          */
         axiosInstance.interceptors.response.use(
             (res) => {
-                Toast.clear()
+                Toast.clear();
                 if (responseInterceptor) {
                     res = responseInterceptor(res);
                 }
@@ -83,7 +82,7 @@ export default class Request {
                 if (responseInterceptorCatch) {
                     responseInterceptorCatch(error);
                 }
-                Toast.clear()
+                Toast.clear();
             }
         );
     }

tailwind.config.ts

@@ -62,7 +62,11 @@ const config: Config = {
                         primary: "#ff6a01",
                     },
                 },
-                light: {},
+                light: {
+                    colors: {
+                        primary: "#ff6a01",
+                    },
+                },
             },
         }),
     ],