.sidebar_wrap{display:flex}.sidebar{background-color:#f4f4f4;padding:10px;list-style:none;margin:0;border-right:1px solid #ddd;transition:width .3s}.sidebar .btn-collapsed{width:100%;padding:10px;margin-bottom:10px;cursor:pointer;background-color:#ddd;border:none;border-radius:4px}#user-form figure{border:1px solid #00000047}.user-avartar{display:inline-block;position:relative;cursor:pointer;width:100%;height:100%}.user-avartar:before{content:"";display:block;width:100%;height:100%;background-color:#ccc;position:absolute;top:0;left:0;opacity:0}.user-avartar.user-avartar-empty:before{opacity:1}.user-avartar:hover:before{opacity:.5}.user-avartar .icon-upload{position:absolute;top:50%;right:50%;transform:translate(50%,-50%);cursor:pointer;opacity:0}.user-avartar.user-avartar-empty .icon-upload,.user-avartar:hover .icon-upload{opacity:1}.menu-item{padding:10px;cursor:pointer;border-radius:4px;margin-bottom:5px;transition:background-color .3s,color .3s;display:flex;align-items:center;justify-content:flex-start}.menu-item.active{background-color:orange;color:#fff}.menu-item:hover{background-color:#ddd}.body-content{flex:1 1;padding:20px;background-color:#fff}