Menu text is still visible on mouseover while sidebar is hidden

I'm working on making a sidebar on My main page something like google ventures (http://ift.tt/1mK16vC). but the problem I'm getting is when I click to any menu item in the sidebar , the side bar gets collapse but the text for menu item is still there. I want to keep the sidebar open till the mouse cursor is in the sidebar area (even when user clicks on any menu it should remain opened/expended) but it gets collapse on cliking on any item while the text for the menu item remain in the air. I don't know how to fix it as Im not much hands-on with css and designing.

here is my jquery code for adding classes for collapse/expand the side bar

$('[data-toggle="offcanvas"]').mouseenter(function(e) {
    e.preventDefault();
    if ($("body").hasClass('sidebar-collapse')) {
        $("body").removeClass('sidebar-collapse');
        $("body").addClass('sidebar-open')
    }
});

$('[data-toggle="offcanvas"]').mouseleave(function(e) {
    e.preventDefault();
    if ($("body").hasClass('sidebar-open')) {
        $("body").removeClass('sidebar-open');
        $("body").addClass('sidebar-collapse')
    };
});

and here are css classes (with media queries) for this

.main-sidebar, 
.left-side {
position: absolute;
top: 0px;
left: 0;
padding-top: 50px;
min-height: 100%;
width: 230px;
z-index: 0;
-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s       ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

@media (max-width: 767px) {
.main-sidebar,
.left-side {
  -webkit-transform: translate(-230px, 0);
  -ms-transform: translate(-230px, 0);
  -o-transform: translate(-230px, 0);
  transform: translate(-230px, 0);
}
}

@media (min-width: 768px) {
.sidebar-collapse .main-sidebar,
.sidebar-collapse .left-side {
-webkit-transform: translate(-230px, 0);
-ms-transform: translate(-230px, 0);
-o-transform: translate(-230px, 0);
transform: translate(-230px, 0);
}
}

@media (max-width: 767px) {
.sidebar-open .main-sidebar,
.sidebar-open .left-side {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}

.sidebar {
 padding-bottom: 10px;
}

and here is html code where my side resides

<aside class="main-sidebar" data-toggle="offcanvas">
  <section class="sidebar">
    <ul class="sidebar-menu">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
  </section>
 <aside>

I tried to implement it on mouseclick event by keeping adding the sidebar-open class but this didn't work. Any help would be highly appreciated. Thanks