web2468/src/layout/Navbar/index.jsx

import styles from './styles.module.scss';
// components

import SidebarTrigger from '@ui/SidebarTrigger';
import Headroom from 'react-headroom';
import Logo from '@components/Logo';
import AppBar from "@mui/material/AppBar";
import {useSidebar} from "@contexts/sidebarContext";
import {useThemeProvider} from "@contexts/themeContext";
import {useEffect, useRef, useState} from 'react';
import styled from 'styled-components/macro';
import {Tab, Tabs} from "@mui/material";
// import LINKS from "@constants/links";
import Button from "@mui/material/Button";
import {NavLink, useLocation, useNavigate} from "react-router-dom";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import ToggleButton from "@mui/material/ToggleButton";
import symbol from "@assets/symbol-defs.svg";
import symbol_m from "@assets/symbol-mobile.svg";
import {string} from "prop-types";
import IconButton from "@mui/material/IconButton";
import {animated,easings} from "@react-spring/web";
import {useSpring} from "@react-spring/core";
import {useWindowSize} from "react-use";
import ResizeObserver from "resize-observer-polyfill";
import {useSelector} from "react-redux";
import {allTopNavs, getRoute, getRouteChain, getUserInfo, isLogin, isLogined} from "@features/mainSlice";
import LazyImage from "@components/LazyImage";
import {numFormatter} from "@utils/helpers";
import {ROUTE_PATH} from "@constants/routes";
const i18n=global.i18n;

const StyledToggleGroup= styled(ToggleButtonGroup)`
  border-radius: 0px !important;
  gap: 12px;
`;
const StyledToggle=styled(ToggleButton)`
    gap: 12px;
    text-transform:none !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    padding: 0px !important;
    &:hover, &:focus ,&.Mui-selected, &.active {
      background-color: var(--nav-item-hover) !important;
      a {
        color: var(--header);
        font-weight: 700;
        .icon {
           fill:${props => props.fill};
        }
      }
    }
    a {
        display: flex;
        align-items: center;
        color: var(--text);
        padding: 12px !important;
        transition: all var(--transition);
        font-family: var(--heading-font);
        gap: 8px;
        .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            fill: var(--text);
        }
    }
`;


const DesktopNavToggle=()=>{
    const LINKS=useSelector(allTopNavs);
    const links=LINKS.slice(0,4);
    const {pathname} = useLocation();
    const [alignment, setAlignment] = useState(pathname);
    const currRoute=useSelector(getRoute(pathname));
    const getRootRoute=(pathname)=>{
        let route="";
        if (currRoute){
            let clv=currRoute.lv;
            if (clv==null)return route;
            for (let i = 0; i < LINKS.length; i++) {
                let link=LINKS[i];
                let lv=link.lv;
                if (clv.startsWith(lv)){
                    route=link.path;
                    break;
                }
            }
        }
        return route;
    }
    useEffect(() => {
        setAlignment(getRootRoute(pathname));
    }, [pathname]);
    const handleChange = (event, newAlignment) => {
        // setAlignment(newAlignment);
    };
    return (
        <StyledToggleGroup
            value={alignment}
            exclusive
            onChange={handleChange}
        >
            {
                links.map((link, index) => (
                    <StyledToggle value={link.path} fill={link.fill.split(";").pop()} key={link.title}>
                        <NavLink className="h4" to={link.path}>
                            <svg className={"icon"}>
                                <use xlinkHref={`${symbol}#${link.icon}`} />
                            </svg>
                            {i18n.t(link.title)}
                        </NavLink>
                    </StyledToggle>
                ))
            }
        </StyledToggleGroup>
    )
}


const DesktopSignInUp=()=>{
    const navigate=useNavigate();
    const isLogin=useSelector(isLogined);
    return (
        <div className="d-flex align-items-center justify-content-end">
            <IconButton aria-label="search">
                <svg className={"ls-icon"} style={{width:'20px',height:'20px'}}>
                    <use xlinkHref={`${symbol}#icon_Search`} />
                </svg>
            </IconButton>
            {
                !isLogin?(
                    <>
                        <Button  className={`m-button ${styles.btn_sign_in}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_IN);
                        }}>{i18n.t('sign_in')}</Button>
                        <Button className={`${styles.btn_sign_up}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_UP);
                        }}>{i18n.t('sign_up')}</Button>
                    </>
                ):(
                    <>
                    </>
                )
            }
            <Button  className="m-button">
                <svg className={"ls-icon"} style={{width:'20px',height:'20px'}}>
                    <use xlinkHref={`${symbol}#icon_Chat`} />
                </svg>
                <div className="chat-green-dont"></div>
            </Button>
            <Button  className="m-button" style={{marginLeft: '0.5rem',marginRight:'0.5rem'}}>
                <svg className={"ls-icon"} style={{width:'20px',height:'20px'}}>
                    <use xlinkHref={`${symbol}#icon_Language`} />
                </svg>
            </Button>
            {
                isLogin?(<UserInfo />):(<></>)
            }
        </div>
    )
}

const DesktopNav = () => {
    const {open} = useSidebar();
    const navstyle=open?styles.nav_open:"";
    return (
        <div
            className={`d-flex align-items-center justify-content-between ${styles.header} ${navstyle}`}>
            <DesktopNavToggle />
            <DesktopSignInUp/>
        </div>
    );
}
const MobileSignInUp=()=>{
    const navigate=useNavigate();
    const isLogin=useSelector(isLogined);
    return (
        <div className="d-flex align-items-center justify-content-end">
            {
                !isLogin?(
                    <>
                        <Button  className={`m-button ${styles.btn_sign_in} ${styles.btn_sign_in_mobile}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_IN);
                        }}>{i18n.t('sign_in')}</Button>
                        <Button  className={`${styles.btn_sign_up} ${styles.btn_sign_up_mobile}`} onClick={()=>{
                            navigate(ROUTE_PATH.SIGN_UP);
                        }}>{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>*/}
        </div>
    );
}
const MobileNav=()=>{
    return (
        <div
            className={`d-flex align-items-center justify-content-between ${styles.header} ${styles.header_mobile}`}>
            <div className={`d-flex flex-row flex-1`} style={{maxWidth:"55%"}}>
                <SidebarTrigger/>
                <Logo size="sm"/>
            </div>
            <MobileSignInUp/>
            <UserInfo />
        </div>
    )
}
const UserInfo=()=>{
    const isLogin=useSelector(isLogined);
    const user=useSelector(getUserInfo);
    const navigate=useNavigate();
    return (
        <>
            {
                isLogin?(
                    <div className={`d-flex align-items-center ${styles.user_info}`} onClick={()=>{
                        navigate(ROUTE_PATH.SETTINGS);
                    }}>
                        <div className={styles.info}>
                            <div className={styles.nick}>{user.NickName}</div>
                            <div className={styles.score}>{global.DOLLAR+" "+numFormatter(user.Score)}</div>
                        </div>
                        <LazyImage wrapperClassName={styles.avatar} src={user.img} alt={"Head"}/>
                    </div>
                ):(<></>)
            }
        </>
    )
}
const PageHeader = () => {
    const LINKS=useSelector(allTopNavs);
    const {initHeaderHeight} = useThemeProvider();
    const {pathname} = useLocation();
    const navigate=useNavigate();
    const barRef = useRef(null);
    const currRoute=useSelector(getRoute(pathname));
    const chain=useSelector(getRouteChain(pathname));
    const {isMobile,showHeader,setShowHeader} = useThemeProvider();
    const [showMHeader, setShowMHeader] = useState(true);
    let lastscroll=0;
    //body node
    const bodyNode = document.body;
    // 配置观察器选项
    const config = { childList: true, subtree: true }; // 观察子节点的变化，并包括子树中的所有节点

// 创建一个 MutationObserver 实例并传入回调函数
    const observer = new MutationObserver((mutationsList, observer) => {
        // 迭代每一个变化
        for(const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // 如果是子节点变化
                mutation.addedNodes.forEach(node => {
                    // console.log('一个节点被添加到了 body 中。');
                    // 这里可以进行相应的操作
                    // if (node.className==="progressier-install-banner"){
                    //     const root = document.querySelector('#root');
                    //     if (root){
                    //         root.classList.add("progressier_bar_open");
                    //     }
                    // }
                });
                mutation.removedNodes.forEach(node => {
                    // console.log('一个节点从 body 中移除了。');
                    // 这里可以进行相应的操作
                    // if (node.className==="progressier-install-banner"){
                    //     const root = document.querySelector('#root');
                    //     if (root){
                    //         root.classList.remove("progressier_bar_open");
                    //     }
                    // }
                });
            }
        }
    });

    const checkNavActive=(lv)=>{
        if (currRoute&&currRoute.lv)return currRoute.lv.startsWith(lv);
        else return false;
    }
    const getHeaderHeight = () => {
        // console.log(document.querySelector('div.progressier-install-banner'))
        const header = document.querySelector('#appbar');
        if (header!=null)return `${header.offsetHeight || 0}px`
        else return '0px';
    }
    const handleScroll=()=>{
        if (!barRef.showHeader)return;
        let scrollTop = document.documentElement.scrollTop; //滚动条滚动高度
        let dt=scrollTop-lastscroll;
        lastscroll=scrollTop;
        let show=false;
        if (dt>20){
            show=false;
            setShowMHeader(show);
        }
        else if (dt<-20){
            show=true;
            setShowMHeader(show);
        }
    }
    const changeHeaderHeight=()=>{
        document.documentElement.style.setProperty('--header-active', getHeaderHeight());
        initHeaderHeight(getHeaderHeight());
    }
    const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
            // 获取目标元素的高度
            const { height } = entry.contentRect;
            // 可在这里处理高度变化的逻辑
            changeHeaderHeight();
        }
    });
    useEffect(() => {
        // 这里的代码会在组件挂载时执行
        // console.log('Component mounted');
        window.addEventListener('scroll', handleScroll);
        observer.observe(bodyNode, config);
        if (barRef.current) {
            resizeObserver.observe(barRef.current);
        }
        return () => {
            // 可选的清除函数，当组件卸载时执行
            // console.log('Component unmounted');
            window.removeEventListener('scroll', handleScroll);
            if (barRef.current) {
                resizeObserver.unobserve(barRef.current);
            }
            observer.disconnect();
        };
    }, []);
    // }, [pathname]);
    useEffect(()=>{
        setShowMHeader(showHeader);
        barRef.showHeader=showHeader;
    },[showHeader]);

    useEffect(()=>{
        let len=chain.length;
        setShowHeader(len<=1);
    },[pathname]);

    const headerAni=useSpring({
        from: {transform: 'translateY(-100%) translateZ(0px)'},
        transform:showMHeader?'translateY(0%) translateZ(0px)':'translateY(-100%) translateZ(0px)',
        config: {
            easing: easings.easeOutBack,
            duration:300
        },
    });
    const changePath=(path)=>{
        navigate(path);
    }
    const renderHeaderRoom=()=>{
        const active=styles.active;
        return (
            <animated.div className={`${styles.header_room}`} style={headerAni}>
                <div className={`${styles['mobile-top-navigate-list']}`}>
                    <button className={`${styles['mb-top-navigate-item']}  ${pathname==='/'?active:''}`} onClick={()=>{
                        changePath('/');
                    }}>
                        <svg className={"icon"}>
                            <use xlinkHref={`${symbol_m}#icon_Home`} />
                        </svg>
                        <span>{i18n.t("links.home")}</span>
                    </button>
                    {
                        LINKS.map((link, index) => (
                            <button key={index} className={`${styles['mb-top-navigate-item']} ${checkNavActive(link.lv)?active:''}`} onClick={()=>{
                                changePath(link.path);
                            }}>
                                <svg className={"icon"}>
                                    <use xlinkHref={`${symbol_m}#${link.icon}`} />
                                </svg>
                                <span>{i18n.t(link.title)}</span>
                            </button>
                        ))
                    }
                </div>
            </animated.div>
        );
    }
    const renderMobile=()=>{
        return (
            <>
                <MobileNav />
                {
                    renderHeaderRoom()
                }
            </>
        )
    }
    const renderDesktop=()=>{
        return (
            <DesktopNav/>
        );
    }

    return (
        <div id={'appbar'} ref={barRef} className={`${styles.appbar} ${isMobile()?styles.mobile:''} ${isMobile()&&!showHeader?styles.hide_header:''}`}>
            {
                isMobile()?renderMobile():renderDesktop()
            }
        </div>
    )
}

export default PageHeader