@vuesax-alpha/nightly/theme-chalk/vs-sidebar.css

A Component Library for Vue 3

@keyframes delay-opacity{0%{opacity:0}100%{opacity:1}}.vs-sidebar{--vs-sidebar-z-index:var(--vs-z-index-top)}.vs-sidebar{position:fixed;left:0;top:0;transform:translate(-110%);display:flex;justify-content:space-between;align-items:flex-start;flex-direction:column;width:calc(100% - 50px);max-width:260px;height:100vh;border-radius:0 30px 30px 0;color:rgba(var(--vs-text),1);box-shadow:0 0 25px 0 rgba(0,0,0,var(--vs-shadow-opacity));background:rgba(var(--vs-background),1);transition:var(--vs-transition-ease);z-index:var(--vs-sidebar-z-index)}.vs-sidebar.is-right{left:auto;right:0;transform:translate(110%);border-radius:30px 0 0 30px}.vs-sidebar.is-right.is-open{transform:translate(0)}.vs-sidebar.is-right.is-reduce .vs-sidebar-item:hover .vs-sidebar-item__text-tooltip{opacity:1;left:auto!important;right:60px!important}.vs-sidebar.is-absolute{position:absolute!important;z-index:var(--vs-sidebar-z-index);height:100%}.vs-sidebar.is-relative{position:relative!important;z-index:var(--vs-sidebar-z-index);height:100%}.vs-sidebar.is-text-white .vs-sidebar-group__content:after{background:rgba(255,255,255,.4)}.vs-sidebar.is-text-white .vs-sidebar-item:after{background:#fff!important}.vs-sidebar.is-text-white .vs-sidebar-item.is-active{color:#fff!important}.vs-sidebar.is-not-shadow{box-shadow:none!important}.vs-sidebar.is-square{border-radius:0}.vs-sidebar.is-not-line-active .vs-sidebar__body .vs-sidebar-item:after{display:none}.vs-sidebar.is-open{transform:translate(0)}.vs-sidebar.is-reduce .vs-sidebar__body .vs-sidebar__footer{padding:10px 0}.vs-sidebar.is-reduce .vs-sidebar__body .vs-sidebar__header .vs-avatar{width:44px!important;height:44px!important}.vs-sidebar.is-reduce .vs-sidebar__body .vs-sidebar__logo img{width:80%}.vs-sidebar.is-reduce .vs-sidebar__footer{padding:10px 0}.vs-sidebar.is-reduce .vs-sidebar-item{padding-left:16px!important;min-height:47px}.vs-sidebar.is-reduce .vs-sidebar-item:not(.is-has-icon) .vs-sidebar-item__text{font-size:.5rem}.vs-sidebar.is-reduce .vs-sidebar-item.is-has-icon .vs-sidebar-item__text{transform:translate(-10px);margin-left:-50px}.vs-sidebar.is-reduce .vs-sidebar-item__arrow{position:absolute;left:36px;top:10px;animation:delay-opacity .6s ease;width:5px;height:5px}.vs-sidebar.is-reduce .vs-sidebar-item:hover .vs-sidebar-item__text-tooltip{opacity:1;left:60px}.vs-sidebar.is-reduce .vs-sidebar-item.is-has-icon{padding:0!important}.vs-sidebar.is-reduce .vs-sidebar-item.is-has-icon:after{left:-6px}.vs-sidebar__logo{display:flex;justify-content:center;align-items:center;width:100%;padding:25px 0;min-height:80px}.vs-sidebar__logo img{max-width:120px;max-height:35px}.vs-sidebar__body{display:flex;justify-content:flex-start;align-items:flex-start;overflow-x:hidden;width:100%;flex-grow:1;flex-direction:column}.vs-sidebar__body::-webkit-scrollbar{width:0}.vs-sidebar__body .vs-sidebar__header{display:flex;justify-content:center;align-items:center;width:100%;padding:10px}.vs-sidebar__body .vs-sidebar__footer{display:flex;align-items:center;justify-self:flex-start;width:100%;padding:10px}.vs-sidebar__footer{display:flex;justify-content:center;align-items:center;justify-self:flex-start;width:100%;padding:10px}