Chengzhebei/src/components/MenuSider/index.tsx

import React, { useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { isPc } from '@/utils/http'

/**
 * @param activeTab 0:一碑两面 1:一碑万象 2:无尽未竟
 */
function MenuSider({ activeTab }: { activeTab: number }) {
  const [isShowMenu, setIsShowMenu] = useState(false)
  return (
    <>
      <div
        className={classNames(isPc ? '' : styles.menuMo, styles.menu)}
        onClick={() => setIsShowMenu(true)}
      >
        <img src={require('@/assets/img/btn_menu.png')} alt='' />
      </div>
      <div
        className={classNames(
          styles.menuSider,
          isShowMenu ? 'show' : '',
          isPc ? '' : styles.menuSiderMo
        )}
      >
        <div className='sider'>
          <img
            onClick={() => setIsShowMenu(false)}
            src={require(`@/assets/img/menuSiderBtn.png`)}
            alt=''
          />
          <div className='siderContent'>
            <div
              className={`tab ${activeTab === 0 ? 'tabAc' : ''}`}
              onClick={() => window.location.replace('#/yblm')}
            >
              <div className='txt'>初识奇碑</div>
              <div className={`bottomLine`}>
                <img
                  src={require(`@/assets/img/menu_item${activeTab === 0 ? '_ac.png' : '.png'}`)}
                  alt=''
                />
              </div>
            </div>
            <div
              className={`tab ${activeTab === 1 ? 'tabAc' : ''}`}
              onClick={() => window.location.replace('#/ybwx')}
            >
              <div className='txt'>融合之光</div>
              <div className={`bottomLine`}>
                <img
                  src={require(`@/assets/img/menu_item${activeTab === 1 ? '_ac.png' : '.png'}`)}
                  alt=''
                />
              </div>
            </div>
            <div
              className={`tab ${activeTab === 2 ? 'tabAc' : ''}`}
              onClick={() => window.location.replace('#/wjwj')}
            >
              <div className='txt'>寻踪叩问</div>
              <div className={`bottomLine`}>
                <img
                  src={require(`@/assets/img/menu_item${activeTab === 2 ? '_ac.png' : '.png'}`)}
                  alt=''
                />
              </div>
            </div>
            <div className='icon'>
              <div className='paint'>
                <img src={require('@/assets/img/icon_paint.png')} alt='' />
                <div className='txt'>碑影智绘</div>
              </div>
              <div className='knowledge'>
                <img src={require('@/assets/img/icon_knowledge.png')} alt='' />
                <div className='txt'>知识图谱</div>
              </div>
              <div className='poster'>
                <img src={require('@/assets/img/icon_poster.png')} alt='' />
                <div className='txt'>分享海报</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

const MemoMenuSider = React.memo(MenuSider)

export default MemoMenuSider