react实现一个支持暗黑模式与亮色的可伸缩菜单栏效果代码
代码语言:html
所属分类:菜单导航
代码描述:react实现一个支持暗黑模式与亮色的可伸缩菜单栏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <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.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script> <script type="text/babel"> const { useState } = React; const Sidebar = () => { const [isShrinkView, setIsShrinkView] = React.useState(false); const [isDarkMode, setIsDarkMode] = React.useState(false); const handleSidebarView = () => { setIsShrinkView(!isShrinkView); }; const handleThemeChange = () => { setIsDarkMode(!isDarkMode); document.body.classList.toggle("dark"); }; return ( <div className={`sidebar-container${isShrinkView ? " shrink" : ""}`}> <button className="sidebar-viewButton" type="button" aria-label={isShrinkView ? "Expand Sidebar" : "Shrink Sidebar"} title={isShrinkView ? "Expand" : "Shrink"} onClick={handleSidebarView} > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24".........完整代码请登录后点击上方下载按钮下载查看
网友评论0