search

creativetimofficial / ct-vue-argon-dashboard-pro

Vue Argon Dashboard Pro - Premium Bootstrap 5 Vuejs Admin Template
https://www.creative-tim.com/product/vue-argon-dashboard-pro
25 stars 7 forks source link

Sidebar strange behavior #13

Closed javinievas closed 4 years ago

javinievas commented 5 years ago

!!! IF YOU DO NOT USE THIS ISSUES TEAMPLATE, YOUR ISSUE IS LIABLE TO BEING IGNORED BY US

Prerequisites

Please answer the following questions for yourself before submitting an issue.

Expected Behavior

When moving the mouse outside the sidebar, it should either remain the same or collapse to show just the icons.

Current Behavior

When movint the mouse outside the sidebar the captions of the buttons disappear, the icon remains, but the sidebar width remains the same, so you end up with a sidebar with the same size full of whitespace and just the icons.

Failure Information (for bugs)

Seems like a bug as I can reproduce it within your online demo apart from my current site.

Steps to Reproduce

  1. go to https://demos.creative-tim.com/vue-argon-dashboard-pro/#/dashboard
  2. click the "hamburguer" to make the sidebar be on top of the site
  3. resize the browser under 1200px width
  4. click the "hamburger" to show the sidebar
  5. move the mouse over the sidebar
  6. move the mouse outside the sidebar
  7. there you are, little bug!

Context

Not relevant as it also happens on the online version.

Failure Logs

Looks like the problem is with the body class g-sidenav-pinned as it shows a .g-sidenav-pinned .sidenav { max-width: 250px!important; } and with this rule: .g-sidenav-hidden:not(.g-sidenav-show) .sidenav .nav-item .collapse, .g-sidenav-hidden:not(.g-sidenav-show) .sidenav .nav-link-text { display: none!important; }

that must prevent it from collapse. I'm not sure if in these resolutions the behavior should be to collapse to icons or just to don't hide the captions. Perhaps the latter one might be the best, in my opinion.

When it is visually broken (as the image attached) if you remove the g-sidenav-hidden from the body class, captions are shown as it might be expected. So maybe there is an issue with some eventlistener not being removed as it keeps adding and removing the g-sidenav-hidden on mouse enter and leave events.

Hope this could address you right to the bug.

screenshot_361

javinievas commented 5 years ago

Answering myself....

Correcting the issue #11 with: this.initScrollbar('sidenav'); the perfectscrollbar starts to work and this issue disappears

cristijora commented 4 years ago

This issue has been fixed in v1.2.0 along with some other issues & improvements. For more details check out this changelog