react-dynamic-snbar/dist/index.css

Responsive React sidebar with role-based navigation support and easy customization.

*{list-style:none;margin:0;padding:0}button{background:none;border:none;cursor:pointer;outline:none}.mobile-toggle{align-items:center;background-color:#1a202c;border-radius:9999px;display:flex;justify-content:center;padding:.5rem;position:fixed;top:1rem;transition:background-color .3s ease-in-out,left .3s ease-in-out;z-index:50}.mobile-toggle:hover{background-color:#4a5568}.mobile-toggle-open{left:15rem}.mobile-toggle-closed{left:1rem}@media (min-width:768px){.mobile-toggle{display:none}}.desktop-toggle{align-items:center;background-color:#1a202c;border:1px solid hsla(0,0%,50%,.284);border-radius:9999px;color:#e2e8f0;display:none;justify-content:center;padding:.5rem;position:fixed;top:1rem;transition:background-color .3s ease-in-out,left .3s ease-in-out;z-index:999}@media (min-width:768px){.desktop-toggle{display:flex}}.desktop-toggle-collapsed{left:5.5rem}.desktop-toggle-expanded{left:12.75rem}@media (min-width:768px){.desktop-toggle-expanded{left:14.5rem}}.sidebar{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);display:flex;flex-direction:column;font-family:sans-serif;height:100vh;left:0;min-height:100vh;overflow-y:auto;padding-left:1rem;padding-right:1rem;position:fixed;top:0;transition:width .3s ease-in-out,transform .3s ease-in-out;width:14rem}@media (min-width:768px){.sidebar{width:13.5rem}}.sidebar-collapsed{width:4.5rem}.sidebar-hidden{transform:translateX(-100%)}@media (min-width:768px){.sidebar-hidden{transform:translateX(0)}}.sidebar::-webkit-scrollbar{display:none}.sidebar{-ms-overflow-style:none;scrollbar-width:none}.logo-section{border-bottom:1px solid rgba(74,85,104,.3);justify-content:space-between;margin-bottom:.25rem;padding-bottom:1rem;padding-top:1rem;position:sticky;top:0}.logo-container,.logo-section{align-items:center;display:flex}.logo-container{gap:.5rem;transition:opacity .3s ease-in-out;width:100%}.logo-container-centered{justify-content:center}.logo-image{transition:width .3s ease-in-out,height .3s ease-in-out}.logo-image-expanded{height:2.5rem;width:2.5rem}.logo-image-collapsed{height:2rem;width:2rem}@media (min-width:768px){.logo-image-collapsed{height:2.5rem;width:2.5rem}}.logo-title{font-size:1.125rem;font-weight:700;transition:opacity .3s ease-in-out}@media (min-width:768px){.logo-title{font-size:1.25rem}}.category-section{margin-bottom:1.5rem}.category-title{font-size:.75rem;font-weight:600;letter-spacing:.05em;margin-bottom:.5rem;padding-left:.25rem;padding-right:.25rem;text-transform:uppercase}.nav-list{display:flex;flex-direction:column;gap:.25rem}.nav-button{align-items:center;border-radius:.375rem;display:flex;justify-content:space-between;padding:.5rem .75rem;transition:background-color .2s ease-in-out;width:100%}.nav-button:hover{background-color:rgba(75,85,99,.2)}.nav-button-centered{justify-content:center}.nav-item-content{align-items:center;display:flex;gap:.75rem}.nav-item-label{font-size:.875rem;transition:opacity .3s ease-in-out}.dropdown-icon{font-size:.75rem}.dropdown-content{overflow:hidden;transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.dropdown-content-open{max-height:24rem;opacity:1}.dropdown-content-closed{max-height:0;opacity:0}.dropdown-list{display:flex;flex-direction:column;gap:.25rem;margin-left:1.5rem;margin-top:.5rem}.dropdown-link,Link{text-decoration:none}.dropdown-link{align-items:center;border-radius:.375rem;color:#e2e8f0;display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem;transition:background-color .2s ease-in-out,color .2s ease-in-out}.dropdown-link:hover{background-color:rgba(75,85,99,.2);color:#60a5fa}.dropdown-link-active{font-weight:600}.dropdown-link-centered{justify-content:center}.dropdown-label{font-size:.875rem;transition:opacity .3s ease-in-out}.nav-link{align-items:center;border-radius:.375rem;color:#e2e8f0;display:flex;font-size:.875rem;gap:.75rem;padding:.5rem .75rem;text-decoration:none;transition:background-color .2s ease-in-out,color .2s ease-in-out}.nav-link:hover{background-color:rgba(75,85,99,.2);color:#60a5fa}.nav-link-active{font-weight:600}.nav-link-centered{justify-content:center}