react实现支持夜晚暗黑模式可伸缩折叠的菜单栏效果代码-html代码-BFW代码库

代码语言：html
代码描述：react实现支持夜晚暗黑模式可伸缩折叠的菜单栏效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
        * {
          box-sizing: border-box;
        }
        
        body {
          --main-bg: #f5f4fd;
          --item-hover: #f9f8fb;
          --secondary-bg: #251d33;
          --main-container-bg: #fff;
          --container-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          --text-color: #00071d;
        }
        
        body.dark {
          --main-bg: #00071d;
          --item-hover: #1c2339;
          --secondary-bg: #36415e;
          --main-container-bg: #131c31;
          --text-color: #fff;
          --tooltip-bg: #251d33;
          --container-shadow: rgba( #131c31, 0.2) 0px 7px 29px 0px;
        }
        
        html, body {
          width: 100%;
          margin: 0;
          height: 100%;
          font-family: "Poppins", sans-serif;
        }
        
        body {
          background-color: var(--main-bg);
          transition: 0.3s ease-in-out;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .sidebar-wrapper {
          display: flex;
          flex-direction: column;
          height: 100%;
        }
        @media screen and (max-height: 520px) {
          .sidebar-wrapper {
            overflow-y: auto;
            overflow-x: hidden;
          }
        }
        .sidebar-container {
          background-color: var(--main-container-bg);
          box-shadow: var(--container-shadow);
          border-radius: 10px;
          padding: 16px;
          transition: width 0.3s ease-in-out;
          position: relative;
          width: 240px;
          height: 100vh;
          max-height: 600px;
        }
        .sidebar-container.shrink {
          width: 92px;
        }
        .sidebar-themeInput {
          opacity: 0;
          width: 0;
          height: 0;
          position: absolute;
        }
        .sidebar-themeInputText {
          font-size: 14px;
          opacity: 1;
          transform: translatex(0);
          transition: 0.2s ease-in-out;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .shrink .sidebar-themeInputText {
          width: 0;
          opacity: 0;
          transform: translatex(-8px);
        }
        .sidebar-themeType {
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 12px 8px;
          text-align: center;
          z-index: 1;
          flex-shrink: 0;
          line-height: 20px;
        }
        .shrink .sidebar-themeType {
          width: 100%;
        }
        .sidebar-themeContainer {
          padding: 4px;
          border-radius: 4px;
          color: var(--text-color);
          overflow: hidden;
          background-color: var(--main-bg);
          overflow: hidden;
          flex-shrink: 0;
        }
        .sidebar-themeLabel {
          display: flex;
          justify-content: space-between;
          position: relative;
          cursor: pointer;
        }
        .sidebar-themeLabel svg {
          width: 18px;
          height: 18px;
        }
        .shrink .sidebar-themeLabel.switched .light {
          display: none;
        }
        .sidebar-themeLabel.switched:before {
          left: 50%;
        }
        .shrink .sidebar-themeLabel.switched:before {
          left: 2px;
        }
        .sidebar-themeLabel:not(.switched) .shrink .sidebar-themeLabel .dark {
          display: none;
        }
        .sidebar-themeLabel:before {
          content: "";
          position: absolute;
          z-index: 0;
          display: inline-block;
          width: calc(50% - 2px);
          height: calc(100% - 4px);
          border-radius: 4px;
          background-color: var(--main-container-bg);
          left: 2px;
          top: 50%;
          transform: translatey(-50%);
          transition: left 0.3s ease;
        }
        .shrink .sidebar-themeLabel:before {
          width: calc(100% - 4px);
        }
        .sidebar-viewButton {
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: none;
          right: -10px;
          top: 32px;
          display: flex;
          align-items: center;
          padding: 0;
          cursor: pointer;
          transition: 0.3s ease-in-out;
          color: #fff;
          box-shadow: var(--container-shadow);
          background-color: var(--secondary-bg);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .sidebar-viewButton:hover {
          opacity: 0.8;
        }
        .sidebar-viewButton svg {
          width: 16px;
        }
        .shrink .sidebar-viewButton {
          transform: rotatey(-180deg);
        }
        .sidebar-list {
          list-style: none;
          padding: 0;
          margin: 12px 0 0;
        }
        .sidebar-listItem {
          color: var(--text-color);
          display: flex;
          align-items: center;
          -webkit-animation: fadeInItem 0.6s forwards;
                  animation: fadeInItem 0.6s forwards;
          transition: background 0.2s ease-in;
          transform: translatex(-16px);
          opacity: 0;
          padding: 8px 0;
          position: relative;
        }
        .shrink .sidebar-listItem span {
          visibility: hidden;
        }
        .sidebar-listItem.active a {
          background-color: var(--main-bg);
        }
        .sidebar-listItem:not(.active) a:hover {
          background-color: var(--item-hover);
        }
        .sidebar-listItem:hover .sidebar-listItemText {
          display: inline-block;
          opacity: 1;
          left: calc(100% + 8px);
          visibility: visible;
        }
        .sidebar-listItem + li {
          border-top: 1px solid var(--item-hover);
        }
        .sidebar-listItem a {
          width: 100%;
          padding: 20px;
          border-radius: 4px;
          display: flex;
          align-items: center;
          cursor: pointer;
        }
        .sidebar-listIcon {
          width: 20px;
          height: 20px;
          display: inline-block;
          margin-right: 8px;
          flex-shrink: 0;
        }
        .shrink .sidebar-listIcon {
          margin-right: 0;
        }
        .sidebar-profileSection {
          display: flex;
          align-items: center;
          margin-top: auto;
          border: 1px solid var(--item-hover);
          padding: 8px 10px;
          border-radius: 28px;
          overflow: hidden;
          height: 60px;
          flex-shrink: 0;
          transition: background 0.3s ease-in-out;
          cursor: pointer;
        }
        .sidebar-profileSection:hover {
          background-color: var(--item-hover);
        }
        .sidebar-profileSection img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          -o-object-fit: cover;
             object-fit: cover;
          margin-right: 8px;
          flex-shrink: 0;
        }
        .sidebar-profileSection span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: var(--text-color);
        }
        .shrink .sidebar-profileSection span {
          display: none;
        }
        .shrink .sidebar-profileSection {
          border-radius: 50%;
        }
        .sidebar-listItemText {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 20px;
        }
        
        .shrink .sidebar-listItemText {
          position: absolute;
          padding: 8px;
          left: 100%;
          opacity: 0;
          background-color: var(--secondary-bg);
          color: #fff;
          font-size: 12px;
          border-radius: 4px;
          transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }
        
        .sidebar-listItem:nth-child(n+0) {
          -webkit-animation-delay: 0s;
                  animation-delay: 0s;
        }
        
        .sidebar-listItem:nth-child(n+1) {
          -webkit-animation-delay: 0.2s;
                  animation-delay: 0.2s;
        }
        
        .sidebar-listItem:nth-child(n+2) {
          -webkit-animation-delay: 0.4s;
                  animation-delay: 0.4s;
        }
        
        .sidebar-listItem:nth-child(n+3) {
          -webkit-animation-delay: 0.6s;
                  animation-delay: 0.6s;
        }
        
        .sidebar-listItem:nth-child(n+4) {
          -webkit-animation-delay: 0.8s;
                  animation-delay: 0.8s;
        }
        
        .sidebar-listItem:nth-child(n+5) {
          -webkit-animation-delay: 1s;
                  animation-delay: 1s;
        }
        
        @-webkit-keyframes fadeInItem {
          100% {
            transform: translatex(0px);
            opacity: 1;
          }
        }
        
        @keyframes fadeInItem {
          100% {
            transform: translatex(0px);
            opacity: 1;
          }
        }
    </style>


</head>

<body>
    <div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.........完整代码请登录后点击上方下载按钮下载查看