web2468/src/layout/Sidebar/styles.js

import styled from 'styled-components/macro';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
// import SwipeableDrawer from "@mui/material/Drawer";
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import {Tabs} from "@mui/material";
import Tab from "@mui/material/Tab";
import ToggleButton from "@mui/material/ToggleButton";
import Button from "@mui/material/Button";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";

const COLOR_TYPE_NOMAL=0;
const COLOR_TYPE_HONER=1;
const COLOR_TYPE_ACTIVE=2;

const getColor=(colors,type)=>{
  let color="";
  if (colors!=null){
    if (colors[type])color=colors[type]+"";
  }
  return color;
}
const StyledAccordion = styled(Accordion)`
  transition: background-color var(--transition) !important;
  background-color: var(--nav-item-top) !important;
  box-shadow: none !important;
  border-radius: var(--border-radius) !important;
  &:before {
    display: none;
  }
  &.Mui-expanded {
    margin: 0 !important;
    background-color: var(--nav-item-bg) !important;
  }
  ${(props) => {
    // if (props.open){
    //   return `
    //     &.Mui-expanded {
    //       margin: 0 !important;
    //       background-color: var(--nav-item-bg) !important;
    //     }
    //   `
    // }
    // else
    // {
    //   return `
    //     background-color: transparent !important;
    //     &.Mui-expanded {
    //       margin: 0 !important;
    //     }
    //   `
    // }
      let olstyle=props.olstyle;
      let button=olstyle.button;
      let bg=getColor(button,COLOR_TYPE_NOMAL);
      let bgact=getColor(button,COLOR_TYPE_ACTIVE)
      let background=bg!=""?`background-color: ${bg} !important;`:''
      let radius=olstyle.radius?`border-radius:${olstyle.radius} !important;`:"";
      return `
        ${background}
        ${radius}
        &.Mui-expanded {
          background-color: ${bgact} !important;
        }
      `
  }}
`;
// margin: 0 -10px !important;
const StyledAccordionSummary = styled(AccordionSummary)`
  padding: 0.825rem 0.825rem !important;
  min-height: unset !important;
  border-radius: var(--border-radius) !important;
  transition: background-color var(--transition);
  
  .MuiAccordionSummary-content {
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  & .icon-chevron-down {
    will-change: transform;
    transition: all var(--transition);
    width: 1rem;
    height: 1rem;
  }
  &.Mui-expanded, &.active {
    & .icon-chevron-down {
      transform: rotate(90deg);
    }
  }
  ${(props) => {
    let olstyle=props.olstyle;
    if (olstyle==null)return ``;
    const {button,icon,radius}=olstyle;
    let btnHover=getColor(button,COLOR_TYPE_HONER);
    let icoNomal=getColor(icon,COLOR_TYPE_NOMAL);
    let icoHover=getColor(icon,COLOR_TYPE_HONER);
    let icoActive=getColor(icon,COLOR_TYPE_ACTIVE);
    return `
      border-radius:${radius} !important;
      & .icon-chevron-down {
        fill:${icoNomal};
      }
      &:hover {
        background-color: ${btnHover} !important; 
        & .icon-chevron-down {
          fill: ${icoHover};
        }
      }
      &.Mui-expanded, &.active {
        & .icon-chevron-down {
          fill: ${icoActive};
        }
      }
    `
  }}
`;

const StyledAccordionDetails = styled(AccordionDetails)`
  padding: 0px !important;
  display: flex;
  flex-direction: column;

  a {
    display: flex;
    align-items: center;
    padding: 0.825rem 0.825rem !important;
    color: var(--text);
    transition: all var(--transition);
    width: 100%;
    border-radius: var(--border-radius) !important;
    font-family: var(--heading-font);
    gap: 12px;
    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        fill: var(--text);
    }
    &:hover, &:focus,
    &.active {
      background-color: var(--nav-item-hover) !important; 
      color: var(--header);
      
      .icon {
         fill: var(--header);
      }
    }
  }
  ${(props) => {
    let olstyle=props.olstyle;
    if (olstyle==null)return ``;
    const {button,icon,text,radius,gap,fontsize,weight}=olstyle;
    let btnN=getColor(button,COLOR_TYPE_NOMAL);
    let btnH=getColor(button,COLOR_TYPE_HONER);
    let btnA=getColor(button,COLOR_TYPE_ACTIVE);
    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
    let icoH=getColor(icon,COLOR_TYPE_HONER);
    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
    let textN=getColor(text,COLOR_TYPE_NOMAL);
    let textH=getColor(text,COLOR_TYPE_HONER);
    let textA=getColor(text,COLOR_TYPE_ACTIVE);
    return `
          a {
            gap:${gap};
            color:${textN};
            font-size:${fontsize};
            font-weight:${weight};
            border-radius:${radius} !important;
            .icon {
              fill: ${icoN};
            }
            &:hover {
              background-color: ${btnH} !important; 
              color: ${textH};
              .icon {
                 fill: ${icoH};
              }
            }
            &.active {
              background-color: ${btnA} !important; 
              color: ${textA};
              .icon {
                 fill: ${icoA};
              }
            }
          }
        `
  }}
`;

// const SingleLink = styled(StyledAccordionSummary)`
//   padding: 0 !important;
//   min-height: unset !important;
//   height: var(--nav-item-h);
//   border-radius: var(--border-radius) !important;
//   transition: background-color var(--transition);
//   background-color: var(--nav-item-top) !important;
//    ${(props) => {
//       if (!props.open){
//         return `
//             background-color: transparent !important;
//             a{
//               justify-content: center !important;
//             }
//           `
//       }
//     }}
//   .MuiAccordionSummary-content {
//     height: 100% !important;
//     margin: 0 !important;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//   }
//   a {
//     display: flex;
//     align-items: center;
//     padding: 0 10px !important;
//     color: var(--text);
//     transition: all var(--transition);
//     width: 100%;
//     height: 100%;
//     border-radius: var(--border-radius) !important;
//     font-family: var(--heading-font);
//     gap: 12px;
//     .icon {
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         width: 20px;
//         height: 20px;
//         fill: var(--text);
//     }
//     &:focus{
//       color: var(--text);
//     }
//     &:hover,
//     &.active {
//       background-color: var(--nav-item-hover) !important;
//       color: var(--header);
//       text-shadow: 0 0 0 var(--header);
//       .icon {
//          fill: var(--header);
//       }
//     }
//   }
// `;
const SingleLink=styled.div`
  padding: 0 !important;
  min-height: unset !important;
  transition: background-color var(--transition);
  a {
    display: flex;
    gap: 12px;
    padding: 0.825rem 0.825rem !important;
    align-items: center;
    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        fill: var(--text);
    }
  }
  ${(props) => {
    let olstyle=props.olstyle;
    if (olstyle==null)return ``;
    const {button,icon,text,radius,direction,gap,fontsize,weight}=olstyle;
    let btnN=getColor(button,COLOR_TYPE_NOMAL);
    let btnH=getColor(button,COLOR_TYPE_HONER);
    let btnA=getColor(button,COLOR_TYPE_ACTIVE);
    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
    let icoH=getColor(icon,COLOR_TYPE_HONER);
    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
    let textN=getColor(text,COLOR_TYPE_NOMAL);
    let textH=getColor(text,COLOR_TYPE_HONER);
    let textA=getColor(text,COLOR_TYPE_ACTIVE);
    let flex_d=direction==="horizontal"?"row":"column";
    // let gap=flex_d=="row"?"12px":"6px";
    return `
        border-radius: ${radius} !important;
        a {
          flex-direction: ${flex_d};
          gap:${gap};
          font-size:${fontsize};
          font-weight:${weight};
          border-radius: ${radius} !important;
          background-color: ${btnN} !important;
          color:${textN};
          border-radius: ${radius} !important;
          .icon {
              fill: ${icoN};
          }
          &:hover {
            background-color: ${btnH} !important;
            color:${textH};
            .icon {
              fill: ${icoH};
            }
          }
          &:focus,&.active {
            background-color: ${btnA} !important;
            color:${textA};
            .icon {
              fill: ${icoA};
            }
          }
        }
    `
  }}
`

const Link = styled.span`
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: color var(--transition);
  height: 100%;
  width: 100%;

  &:hover, &:focus,
  &.active {
    color: var(--header);
    & .icon {
       fill: var(--header);
    }
  }

  & .icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--text);
  }
  ${(props) => {
    let olstyle=props.olstyle;
    if (olstyle==null)return ``;
    const {icon,text,gap,fontsize,weight}=olstyle;
    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
    let icoH=getColor(icon,COLOR_TYPE_HONER);
    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
    let textN=getColor(text,COLOR_TYPE_NOMAL);
    let textH=getColor(text,COLOR_TYPE_HONER);
    let textA=getColor(text,COLOR_TYPE_ACTIVE);
    return `
        color:${textN};
        gap:${gap};
        font-size:${fontsize};
        font-weight:${weight};
        & .icon {
          fill:${icoN};
        }
        &:hover {
          color:${textH};
          & .icon {
            fill:${icoH};
          }
        }
        &.active {
          color: ${textA};
          & .icon {
             fill:${icoA};
          }
        }
      `
  }}
`;

const StyledBonus=styled.div`
  padding: 6px;
  background-color: var(--nav-item-bg) !important;
  border-radius: var(--border-radius) !important;
  ${(props) => {
    if (!props.open){
      return `
          padding: 0px;
          overflow-x: visible !important;
        `
    }
  }}
`;
const StyledButton=styled.button`
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px !important;
  min-height: unset !important;
  height: var(--nav-item-h);
  border-radius: var(--border-radius) !important;
  transition: background-color var(--transition);
  background-color: var(--nav-item-top) !important;
  width: 100%;
  & .icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }
  &:hover,&.active {
    background-color: var(--nav-item-hover) !important; 
    color: var(--header);
    text-shadow: 0 0 0 var(--header);
  }
  ${(props) => {
    return `
        & .icon {
            fill:${props.fill?props.fill:'var(--text)'}
         }
        ${!props.open?'justify-content: center !important;':''}
        ${!props.open?'background-color: transparent !important':''};
        &:hover,&.active {
          & .icon {
            fill:${props.fill?props.fill:'var(--header)'}
          }
        }
        `
  }}
`
const StyledThemeTabs=styled(
    ToggleButtonGroup
)`
  position: relative;
  transition: background-color var(--transition);
  background-color: var(--nav-item-top) !important;
  border-radius: var(--border-radius) !important;
  width:100%;
  height:var(--nav-item-h);
  ${(props) => {
    let children=props.children;
    let len=props.children.length-1;
    let select=0;
    let width=Math.floor(100/len);
    for (let i = 0; i < len; i++) {
      let child=children[i];
      if (child){
        let value=child.props.value;
        if (value!=undefined){
          if (value==props.value){
            // select--;
            break;
          }
          select++; 
        }
      }
    }
    let left=width*select;
    return `
      
       & .theme-bg{
          position:absolute;
          width:${width}%;
          height:100%;
          pointer-events: none;
          border-radius: var(--border-radius);
          background-color: var(--nav-item-hover);
          transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
          left:${left}%;
       }
    `
  }}
  
`;
const StyledThemeTab=styled(ToggleButton)`
  height:100%;
  color: var(--text) !important;
  gap: 12px;
  flex:1;
  text-transform:none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  padding: 0px !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  & .icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    fill:var(--text) !important;
  }
  &.Mui-selected {
    color: var(--header) !important;
    font-weight: 600;
    & .icon{
      fill: var(--header) !important;
    }
    cursor: not-allowed;
    pointer-events: none;
  }
`;
const StyledAct=styled.div`
  display:flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  .bonus-item{
    display:flex;
    align-items: center;
    width:109px;
    //width: 100%;
    height: 42px;
    border-radius: var(--border-radius) !important;
    cursor: pointer;
    & .bonus-item-btn{
      height: 100%;
      width:100%;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: flex-start;
      flex: none;
      gab:g-4;
      font-size: 12px;
      font-weight: 700;
      color:var(--header);
      & .icon-bonus{
        margin-left: 0.3rem;
        margin-right: 0.3rem;
        width: 1.8rem;
        height: 1.8rem;
        fill:#b891ff;
      }
      & .img-bg{
        width: auto;
        height: 2.375rem;
        display: inline-block;
        vertical-align: top;
        margin-left: 2px 
      }
      & .spin-txt{
          position: absolute;
          display: flex;
          justify-content: center;
          flex-direction: column;
          left: 46px;
      }
      & .spin-anim{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 100%;
        width:46px;
        &.active{
          & .img-turntable{
            animation: rotate 2s infinite linear;
          }
        }
        & .img-spinbg{
          position: absolute;
          width: 1.9375rem;
          height: 1.9375rem;
          z-index: 1;
          opacity: 1;
        }
        & .img-turntable{
          position: absolute;
          width: 2rem;
          height: 2rem;
          z-index: 2;
        }
        & .img-pointer{
          position: absolute;
          width: 1.125rem;
          height:auto;
          z-index: 3;
          top: -0.075rem;
        }
      }
    }
  }
  .li-quests{
    background: linear-gradient(26.79deg,rgba(109,43,255,.480402) 1.86%,rgba(109,43,255,.04) 85.25%,rgba(109,43,255,.04) 85.25%),rgba(216,216,216,.05);
  }
  .li-spin{
    background: linear-gradient(19.92deg,rgba(175,13,132,.511772) -6.45%,rgba(175,13,132,.04) 78.77%),rgba(216,216,216,.05);
  }
  ${(props) => {
    if (!props.open){
      let nw='100%';
      if (props.enter)nw='100px';
      return `
        border-radius: var(--border-radius) !important;
        height:var(--nav-item-h);
        width:${nw};
        background-color: var(--nav-item-bg) !important;
        overflow-x: visible !important;
        padding-left:6px;
        gap: 0.5rem;
        .li-quests{
          background:none;
        }
        .li-spin{
          background:none;
        }
        .bonus-item{
          overflow-x: visible !important;
          width:var(--nav-item-h);
          height:var(--nav-item-h);
          & .bonus-item-btn{
             overflow-x: visible !important;
          }
        }
      `
    }  
  }}
`;
const StyledRefer=styled.div`
  margin:12px 0px;
  width: 100%;
  height: 48px;
  border-radius: var(--border-radius) !important;
  background-color: var(--nav-item-bg) !important;
  cursor: pointer;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  & .ref-right{
    flex: 1;
    display: block;
    position: absolute;
    left: 4.6875rem;
    width: 100%;
    font-size: 15px;
    font-style: italic;
    text-align: left;
    color: #fff;
    line-height: 1;
    top: 50%;
    height: auto;
    transform: translateY(-50%);
    padding-right: 0.625rem;
    & .t{
      font-size: .9375rem;
      font-weight: 800;
      background-image: linear-gradient(0deg,#fff,#fff),linear-gradient(180deg,#0f7119 17.89%,#0f7119 58.61%,#0f7119 102.56%);
      background-clip: text;
      filter: drop-shadow(2px 2px 0 #0f7119);
      color: transparent;
    }
    & .s{
      font-size: .625rem;
      font-weight: 800;
      margin-top: 0.1875rem;
    }
  }
  img{
    width:100%;
    object-fit:contain;
  }
  ${(props) => {
    if (!props.open){
      return `
        margin:0px !important;
        img{
          width:80% !important;
        }
      `;
    }
  }}
`;
//新修改
const StyledBlock=styled.nav`
  position: relative;
  gap: 0.375rem;
  ${(props) => {
    let column=props.column;
    let open=props.open;
    let display=column>1?"grid":"flex";
    let grid_template_columns=column>1&&open?`grid-template-columns: repeat(${column}, minmax(0, 1fr));`:'';
    let flex_direction=column>1?'':'flex-direction: column;';
    let padding=props.open?'padding: 0px 0.75rem;':'padding: 0px 0.43rem;';
    return`
      display: ${display};
      ${grid_template_columns}
      ${flex_direction}
      ${padding}
    `
  }}
`
const StyledIconLink=styled.div`
  padding: 0 !important;
  min-height: unset !important;
  transition: background-color var(--transition);
  a {
    display: flex;
    padding: 0.825rem 0.825rem !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius) !important;
    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        fill: var(--text);
    }
  }
  ${(props) => {
    let olstyle=props.olstyle;
    if (olstyle==null)return ``;
    const {button,icon}=olstyle;
    let btnN=getColor(button,COLOR_TYPE_NOMAL);
    let btnH=getColor(button,COLOR_TYPE_HONER);
    let btnA=getColor(button,COLOR_TYPE_ACTIVE);
    let icoN=getColor(icon,COLOR_TYPE_NOMAL);
    let icoH=getColor(icon,COLOR_TYPE_HONER);
    let icoA=getColor(icon,COLOR_TYPE_ACTIVE);
    return `
          a {
            
            .icon {
                fill: ${icoN};
            }
            &:hover {
              background-color: ${btnH} !important;
              .icon {
                fill: ${icoH};
              }
            }
            &:focus,&.active {
              background-color: ${btnA} !important;
              .icon {
                fill: ${icoA};
              }
            }
          }
      `
  }}
`
export {SingleLink, Link, StyledAccordion, StyledAccordionSummary, StyledAccordionDetails,StyledBonus,StyledButton,StyledThemeTabs,StyledThemeTab,StyledAct,StyledRefer,StyledBlock,StyledIconLink}