web2468/src/layout/Sidebar/index.jsx

// styled components
import {
    Link,
    SingleLink,
    StyledAccordion,
    StyledAccordionDetails,
    StyledAccordionSummary,
    StyledBonus,
    StyledButton,
    StyledThemeTabs,
    StyledThemeTab,
    StyledAct,
    StyledRefer,
    StyledBlock,
    StyledIconLink
}
    from './styles';

// components
import Logo from '@components/Logo';
import {NavLink, useLocation,useNavigate} from 'react-router-dom';

// hooks
import {useSidebar} from '@contexts/sidebarContext';
import {useWindowSize} from 'react-use';
import {useEffect, useState} from 'react';

// constants
import LINKS from '@constants/links';

import MuiDrawer from '@mui/material/Drawer';
// import styled from 'styled-components/macro';
import { styled, useTheme } from '@mui/material/styles';
import SidebarTrigger from "@ui/SidebarTrigger";

// import {useThemeProvider} from '@contexts/themeContext';
import symbol from '@assets/symbol-defs.svg';
import MTooltip from "@components/MTooltip";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Button from "@mui/material/Button";
import TabScrollButton from "@mui/material/TabScrollButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import {useThemeProvider} from "@contexts/themeContext";

import questsimg from "@assets/activity/quests.png";
import spin_1 from "@assets/activity/spin_1.png";
import spin_2 from "@assets/activity/spin_2.png";
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 {useDispatch, useSelector} from "react-redux";
import {
    allNavs,
    getBlockColumn,
    getRoute,
    getRouteStyles,
    isFullRoute,
    isLogined,
    logout,
    nBlocks
} from "@features/mainSlice";
import {
    ROUTE_TYPE_OUTLINK,
    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";
import {reqLogout} from "@features/api";
const drawWidth = 250;
const drawMobieWidth=250;
const i18n=global.i18n;

const openedMixin = (theme,width) => ({
    width: width,
    transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
    }),
    // overflowX: 'hidden',
    overflow:'visible !important',
    backgroundColor:'var(--standard);',
    boxShadow:'var(--widget-shadow);',
    // position:'relative',
});

const closedMixin = (theme) => ({
    transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
    // overflowX: 'hidden',
    //spin显示
    overflow:'visible !important',
    width: `calc(${theme.spacing(7)} + 1px)`,
    [theme.breakpoints.up('sm')]: {
        width: `calc(${theme.spacing(8)} + 1px)`,
    },
    backgroundColor:'var(--standard);',
    boxShadow:'var(--widget-shadow);',
    // position:'absolute',
});

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
    ({ theme, open}) => ({
        width: drawWidth,
        flexShrink: 0,
        whiteSpace: 'nowrap',
        boxSizing: 'border-box',
        // overflowX:'hidden',
        ...(open && {
            ...openedMixin(theme),
            '& .MuiDrawer-paper': openedMixin(theme,drawWidth),
        }),
        ...(!open && {
            ...closedMixin(theme),
            '& .MuiDrawer-paper': closedMixin(theme),
        }),
    }),
);

const DrawerHeader = styled('div')(({ theme }) => ({
    display: 'flex',
    alignItems: 'center',
    padding: '0 10px',
    gap:'12px',
    // backgroundColor:'#000',
    boxShadow:'var(--widget-shadow)',
    position:'relative',
    '& .logo_con':{
        width:'80%'
    },
    '& .logo_con_m':{
        width:'80%'
    },
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
}));



const Sidebar = () => {

    // const theme = useTheme();

    const {open, setOpen} = useSidebar();

    const [expanded, setExpanded] = useState("");
    const {pathname,hash} = useLocation();
    const navigate=useNavigate();
    const {width} = useWindowSize();
    const {theme, toggleTheme} = useThemeProvider();

    const [isActHovered, setIsActHovered] = useState(false);

    const visiblecls=isActHovered?"overflow-visible":"";

    const navBlocks=useSelector(nBlocks);
    const currRoute = useSelector(getRoute(pathname));
    const blocksColumn=useSelector(getBlockColumn);
    const routeStyles=useSelector(getRouteStyles);
    const isLogin=useSelector(isLogined);
    const dispatch = useDispatch();
    const handleActEnter = () => {
        if (open)return;
        setIsActHovered(true);
    };
    const handleActLeave = () => {
        if (open)return;
        setIsActHovered(false);
    };
    // manually handle accordion expansion
    const handleChange = (panel,path) => (event, isExpanded) => {
        if (isExpanded)navigate(path);
        // setExpanded(isExpanded ? panel : false);
        if (!isExpanded){
            let arr=panel.split("_");
            let s=arr.length-2;
            if (s<0)panel="";
            else
            {
                arr.splice(s,1);
                panel=arr.join("_");
            }
        }
        setExpanded(panel);
    }

    const checkNavOpen=()=>{
        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();
    }, [pathname]);
    const checkCkey=(lv)=>{
        if (expanded==null)return false;
        else return expanded.startsWith(lv);
    }
    const checkPath=(link)=>{
        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||link.type===ROUTE_TYPE_OUTLINK;
        let linkIcon=(<SvgIcon className={"icon"} herf={link.icon}/>);
        let target=link.type===ROUTE_TYPE_OUTLINK?"_blank":"";
        let linkA=ispop?(
            <a href={link.path} target={target}>
                {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 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
                                {
                                    return renderLink(page);
                                }
                            })
                        }
                    </StyledAccordionDetails>
                </StyledAccordion>
            ):renderIconLink(link,styles);
        return linkItem
    }

    const renderRLink=(link)=>{
        let isActive=checkPath(link);
        let ispop=link.type===ROUTE_TYPE_POP||link.type===ROUTE_TYPE_POP_OR_FULL||link.type===ROUTE_TYPE_OUTLINK;
        let clname=`${isActive?'active':''} h4`;
        let linktxt=(
            <>
                <SvgIcon className={"icon"} herf={link.icon}/>
                {i18n.t(`${link.title}`)}
            </>
        )
        let target=link.type===ROUTE_TYPE_OUTLINK?"_blank":"";
        return ispop?(<a className={clname} target={target} href={link.path}>{linktxt}</a>):(<NavLink className={clname} to={link.path}>{linktxt}</NavLink>)
    }
    const renderSingleLink=(link)=>{
        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===""){
            linkItem=renderSingleLink(link);
        }
        else
        {
            linkItem=renderLink(link);
        }
        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 (
            <>
                <StyledBlock open={open} column={column}>
                    {
                        block.map((link, index) => {
                            return renderLinkNav(link)
                        })
                    }
                </StyledBlock>
                {renderLine()}
            </>
        )
    }
    const renderLinkBlocks=()=>{
        return (
            <>
                {
                    navBlocks.map((block,index)=>{
                        return renderBlock(block);
                    })
                }
            </>
        )
    }
    const renderBonus=()=>{
        let styles=getOLStyles(0);
        let herf="/bonus";
        let link={type:0,title:'links.bonus',icon:'icon_Gift',path:herf}
        return (
            <StyledBlock open={open}>
                <StyledBonus className="d-flex flex-column g-6" open={open}>
                    {
                        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"}/>
                                {open?i18n.t("links.quest"):""}
                            </button>
                        </div>
                        <div className="bonus-item li-spin">
                            <button className="bonus-item-btn">
                                <div className="spin-anim active">
                                    <img className="img-spinbg" src={spin_1} alt={"spin-bg"}/>
                                    <img className="img-turntable" src={spin_2} alt={"spin-turntable"}/>
                                    <img className="img-pointer" src={spin_3} alt={"spin-pointer"}/>
                                </div>
                                {
                                    open?(
                                        <div className="spin-txt">
                                            {i18n.t("links.spin")}
                                        </div>
                                    ):(<></>)
                                }
                            </button>
                        </div>
                    </StyledAct>
                </StyledBonus>
            </StyledBlock>
        );
    }
    const renderLogout=()=>{
        return (
            <>
                {
                    isLogin?(
                        <StyledButton open={open} className="h4" onClick={()=>{
                            dispatch(reqLogout());
                            setOpen(false);
                        }}>
                            <SvgIcon className={"icon"} herf={"icon_Logout"}/>
                            {open?i18n.t("links.log_out"):""}
                        </StyledButton>
                    ):(<></>)
                }
            </>
        )
    }
    const renderSuport=()=>{
        return (
            <StyledBlock open={open}>
                {renderLogout()}
                <MTooltip disableHoverListener={open} title={i18n.t("links.live_support")} arrow placement="right">
                    <StyledButton open={open} className="h4" fill={"#3bc117"}>
                        <SvgIcon className={"icon"} herf={"icon_Support"}/>
                        {open?i18n.t("links.live_support"):""}
                    </StyledButton>
                </MTooltip>
            </StyledBlock>
        )
    }
    const handleTheme = (event, value) => {
        if (value){
            toggleTheme();
        }
        else {

        }
    }
    const renderThemeTabs=()=>{
        if (open){
            return (
                <StyledBlock open={open} >
                    <StyledThemeTabs sx={{
                        marginTop:'16px',
                    }} className={theme} exclusive value={theme} onChange={handleTheme}>
                        <div className="theme-bg"/>
                        <StyledThemeTab value={"dark"}>
                            <SvgIcon className={"icon"} herf={"icon_Dark"}/>
                            {i18n.t("theme.dark")}
                        </StyledThemeTab>
                        <StyledThemeTab value={"light"}>
                            <SvgIcon className={"icon"} herf={"icon_Light"}/>
                            {i18n.t("theme.light")}
                        </StyledThemeTab>
                    </StyledThemeTabs>
                </StyledBlock>
            )
        }
        else return(<></>);
    }
    const renderLine=(key="1")=>{
        // 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 (
            <StyledBlock open={open}>
                <MTooltip disableHoverListener={open} title={i18n.t("refer.title")} arrow placement="right">
                    <StyledRefer open={open}>
                        <img alt={"refer"} src={refimg}/>
                        {
                            open?(
                                <div className={"ref-right"}>
                                    <div className={"t"}>{i18n.t("refer.title")}</div>
                                    <div className={"s"}>{i18n.t("refer.des")}</div>
                                </div>
                            ):(<></>)
                        }
                    </StyledRefer>
                </MTooltip>
            </StyledBlock>
        )
    }
    const renderContent=()=>{
        return (
            <>
                {renderBonus()}
                {renderBanner()}
                {renderLine()}
                {renderLinkBlocks()}
                {renderSuport()}
                {renderThemeTabs()}
            </>
        )
    }
    const renderDesktop=()=>{
        return (
            <Drawer variant="permanent" open={open} sx={{
            }}>
                <DrawerHeader>
                    <SidebarTrigger/>
                    {
                        open?(
                                <div className={'logo_con'}>
                                    <Logo/>
                                </div>
                            ):<></>
                    }
                </DrawerHeader>
                <div className={`d-flex flex-column sidebar-nav ${visiblecls}`}>
                    <div className={`d-flex flex-column g-4 ${visiblecls}`}>
                        {
                            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?(
                            <div className={'logo_con_m'}>
                                <Logo/>
                            </div>
                        ):<></>
                    }
                </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()?(renderMobile()):renderDesktop()
            }
        </>
    )
}

export default Sidebar