mui-react-sidebar/dist/styles.css

A fully customizable and theme-aware sidebar navigation component for **React** and **Material-UI (MUI)**.

.sidebar{width:var(--sidebar-width, 270px);height:100vh;padding:16px;display:flex;flex-direction:column;box-sizing:border-box;position:fixed;left:0;top:0;transition:transform .3s ease-in-out;background-color:var(--sidebar-bg, #ffffff)}.sidebar.open{transform:translate(0)}@media (max-width: 1200px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}}@media (min-width: 1200px){.menu-button{display:none!important}}.list-item-button{padding:6px 8px!important;border-radius:8px!important}.list-item-button .MuiListItemIcon-root{transition:color .3s ease}.list-item-button.selected .MuiListItemIcon-root{color:#f05c62}.logo{display:flex;align-items:center;margin-bottom:10px;padding-left:10px;padding-top:10px}.logo img{width:36px;margin-right:10px}.sidebar-list{flex-grow:1;overflow-y:auto;margin-right:-8px}.sidebar-list::-webkit-scrollbar{width:6px}.sidebar-list::-webkit-scrollbar-thumb{background-color:#ecf2ff;border-radius:10px;height:10px}.sidebar-list::-webkit-scrollbar-track{background-color:#f0f0f0}.nested-menu{position:relative;padding-left:20px}.nested-menu:before{content:"";position:absolute;top:0;left:18px;bottom:0;width:1px;background-color:#919eab}.nested-list-item:before{left:-24px;top:13px;content:"";position:absolute;width:15px;height:12px;transform:translate(calc(var(--nav-bullet-size) * -1),calc(var(--nav-bullet-size) * -.4));background-color:#919eab;mask:url("data:image/svg+xml,%3csvg%20width='143'%20height='56'%20viewBox='0%200%20143%2056'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='142.252'%20y1='50.1953'%20x2='24.002'%20y2='50.0474'%20stroke='%23B2B2B2'%20stroke-width='10'/%3e%3cpath%20d='M5.48288%202.63294C1.5%2056.5%2029.453%2050%2029.453%2050'%20stroke='%23B2B2B2'%20stroke-width='10'/%3e%3c/svg%3e") 100% 50% / 100% no-repeat}