Bug using: hover and click on chrome

Navigation
0

I'm fixing a problem that I could only simulate in chrome. After clicking several times on the items anchors the menu closes for no reason. Here is the code: (I could not paste formatted because it exceeds the character limit of the question) 

<html>
   <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> 
   </head>
   <body>
      <aside class="aside">
         <div class="nav-primary nav-toggle d-none d-md-inline"> <span class="item-text"><i class="fa fa-bars"></i> </span> </div>
         <nav id="" class="sidebar">
            <ul id="menu-itens" class="nav">
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-address-card"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-boxes"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fas fa-user-tie"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-university"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false" style="">
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-object-ungroup"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-handshake"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse show" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false">
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck-loading"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-shopping-cart"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-wrench"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="far fa-shopping-basket"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-users"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-box-full"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li> 
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-cubes"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-money-check-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-university"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
            </ul>
         </nav>
      </aside>
<script>
var jDocument = $(document);
var navToggle = $('.nav-toggle');
var sidebarToggle = $('.sidebar-toggle');
var sidebar = $('.sidebar');
var collapseSelector = '[data-toggle="collapse-next"]',
colllapsibles = $('.sidebar .collapse').collapse({ toggle: false }),
toggledClass = 'aside-collapsed',
$body = $('body'),
phone_mq = 768;

function notify(a, b, c) {
   console.log(b)
}

var fixedSidebar = $('.fixed-sidebar');
var fixedMenu = 0;

fixedSidebar.off("click").on('click', function (e) {
   e.preventDefault();
   var date = new Date();
   date.setTime(date.getTime() + (1000 * 24 * 60 * 60 * 1000));
   if (fixedMenu == 0) {
      fixedMenu = 1;
      sidebar.addClass('fixo');
      notify("", "Menu fixo!", "success");
   } else {
      fixedMenu = 0;
      sidebar.removeClass('fixo');
      notify("", "Menu dinâmico!", "success");
   }
   SetCookie("fixedMenu", fixedMenu, date);
});

sidebarToggle.off("click").on("click", function () {
   sidebar.toggleClass('toggled');
});

jDocument.on('click.sidebar', collapseSelector, function (e) {
   var $that = $(this);
   setTimeout(function () {
      var $target = $that.siblings('ul');
      var $targetParent = $target.parent().parent();
      if ($targetParent.has("ul").hasClass("show") == true) {
         colllapsibles.not($targetParent).collapse('hide');
      } else {
         colllapsibles.collapse('hide');
      }
      $target.collapse('show');
   }, 1);
});
</script>
      <style> .aside:hover .sidebar { left: 0; }   .aside .sidebar { display: block; left: -255px; transition: left .6s ease; }    .aside { position: absolute; margin-top: 0px; top: 0; left: 0; bottom: 0; z-index: 1031; }  .aside .nav-primary { width: 30px; position: fixed; background-color: #39a7df; /*#fafafa;*/ color: #ffffff; display: block; height: calc(100% - 29px); border-right: 1px solid #39a7df; z-index: 1; }  .aside .nav-primary>.item-text { color: #ffffff; font-size: 20px; font-weight: 100; display: block; margin: 0px 8px; /*@include rotate(-90,3);*/ }  .aside .nav-primary .item-text i { font-size: 16px; }  .aside .sidebar { position: fixed; top: 0; background-color: #39a7df; height: calc(100% - 29px); overflow-y: auto; border-right: 1px solid #39a7df; -webkit-overflow-scrolling: touch; width: 250px; z-index: 2; }  .sidebar>.nav { position: relative; margin-top: 5px; }  .sidebar>.nav>.nav-heading:first-child { padding-top: 0px; }    .sidebar .nav-heading:hover { background-color: #39a7df !important; color: #ffffff !important; }  .sidebar .nav-labels { list-style-type: none; padding: 0; margin: 0; }  .sidebar .nav-labels>.nav-labels-item { padding: 5px 25px; font-size: 13px; }  .sidebar .nav-labels>.nav-labels-item>a { color: #ffffff; }  .sidebar .nav-labels>.nav-labels-item .circle { margin-right: 20px; margin-left: 0; }  .sidebar .nav>li { border-left: 2px solid transparent; display: block; width: 100%; }  .sidebar .nav>li>a, .sidebar .nav>li>.nav-item { padding: 12px 5px 12px 10px; color: #ffffff; letter-spacing: .025em; /*font-weight: 600;*/ -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; transition: background-color 0.2s ease; display: block; text-decoration: none; }  .sidebar .nav>li>a:focus, .sidebar .nav>li>.nav-item:focus { color: #fff; background-color: #45AC6C; }  .sidebar .nav>li>a>em, .sidebar .nav>li>.nav-item>em { width: 1.5em; color: #ffffff; }  .sidebar .nav>li.active  /*.sidebar .nav > li.active > a,*/ /*.sidebar .nav > li.active > a > .item-text*/ /*.sidebar .nav > li.active .nav,*/ { background-color: #45AC6C; color: #fff; }  .sidebar .nav>li:hover, .sidebar .nav>li:hover>a, .sidebar .nav>li:hover>a>.item-text .sidebar .nav>li:hover .nav { background-color: #C1332F; color: #fff; }  .sidebar .nav>li.active>a>em, .sidebar .nav>li:hover>a>em { color: #ffffff; }  .sidebar .nav>li.active { border-left-color: #39a7df; }  .sidebar .nav .nav { padding-left: 25px; background-color: #39a7df; }  .sidebar .nav .nav>li { border-left: 0; }  .sidebar .nav .nav>li>a, .sidebar .nav .nav>li>.nav-item { display: block; position: relative; padding: 10px 2px 10px 6px; background-color: transparent !important; font-weight: normal; }  .sidebar .nav .nav>li>a:focus, .sidebar .nav .nav>li>.nav-item:focus, .sidebar .nav .nav>li>a:hover, .sidebar .nav .nav>li>.nav-item:hover { color: #fff; }  .sidebar .nav .nav>li.active>a, .sidebar .nav .nav>li.active>.nav-item { color: #fff; }  .sidebar .nav .nav>li.active>a:after, .sidebar .nav .nav>li.active>.nav-item:after { border-color: #1c75bf; background-color: #1c75bf; } </style>
   </body>
</html>

I could not simulate this problem in Firefox. The problem occurs after clicking several times by opening or closing the root elements.

Would you tell me how to fix this problem?

Follow the simulation: link

    
asked by anonymous 04.01.2019 / 14:13

1 answer

2

Use the .hover() method of jQuery by toggling a class that determines when the menu is open or closed. When adding the class with .hover() in the mouseenter event the menu will open, in the mouseleave event, the class will be removed and the menu will close. Another click event will change the value of a control variable ( estado ) to prevent the menu from closing in a short time interval determined by setTimeout .

The problem is that when you click on a menu item, aside you can lose hover (event that calls mouseleave ), which is the condition for it to remain open. By controlling by jQuery you avoid, by mouseleave , that the class that keeps the menu open is removed.

Change the first two CSS styles to: 

.aside .sidebar.ativo {
   left: 0;
}

.aside .sidebar {
   display: block;
   left: -255px;
   transition: left .6s ease;
}

And add the jQuery code in the script: 

var estado;

$(".aside").hover(
   function(){
      $(".sidebar", this).addClass("ativo");
   },
   function(){
      if(!estado){
         $(".sidebar", this).removeClass("ativo");
      }
   }
).on("click", function(){
   estado = true;
   setTimeout(function(){
      estado = false;
   }, 50);
});

Run (run in full screen): 

var jDocument = $(document);
var navToggle = $('.nav-toggle');
var sidebarToggle = $('.sidebar-toggle');
var sidebar = $('.sidebar');
var collapseSelector = '[data-toggle="collapse-next"]',
colllapsibles = $('.sidebar .collapse').collapse({ toggle: false }),
toggledClass = 'aside-collapsed',
$body = $('body'),
phone_mq = 768;

function notify(a, b, c) {
   console.log(b)
}

var fixedSidebar = $('.fixed-sidebar');
var fixedMenu = 0;

fixedSidebar.off("click").on('click', function (e) {
   e.preventDefault();
   var date = new Date();
   date.setTime(date.getTime() + (1000 * 24 * 60 * 60 * 1000));
   if (fixedMenu == 0) {
      fixedMenu = 1;
      sidebar.addClass('fixo');
      notify("", "Menu fixo!", "success");
   } else {
      fixedMenu = 0;
      sidebar.removeClass('fixo');
      notify("", "Menu dinâmico!", "success");
   }
   SetCookie("fixedMenu", fixedMenu, date);
});

sidebarToggle.off("click").on("click", function () {
   sidebar.toggleClass('toggled');
});

jDocument.on('click.sidebar', collapseSelector, function (e) {
   var $that = $(this);
   setTimeout(function () {
      var $target = $that.siblings('ul');
      var $targetParent = $target.parent().parent();
      if ($targetParent.has("ul").hasClass("show") == true) {
         colllapsibles.not($targetParent).collapse('hide');
      } else {
         colllapsibles.collapse('hide');
      }
      $target.collapse('show');
   }, 1);
});

var estado;

$(".aside").hover(
   function(){
      $(".sidebar", this).addClass("ativo");
   },
   function(){
      if(!estado){
         $(".sidebar", this).removeClass("ativo");
      }
   }
).on("click", function(){
   estado = true;
   setTimeout(function(){
      estado = false;
   }, 50);
});
.aside .sidebar.ativo {
   left: 0;
}

.aside .sidebar {
   display: block;
   left: -255px;
   transition: left .6s ease;
}

.aside { position: absolute; margin-top: 0px; top: 0; left: 0; bottom: 0; z-index: 1031; }

.aside .nav-primary { width: 30px; position: fixed; background-color: #39a7df; /*#fafafa;*/ color: #ffffff; display: block; height: calc(100% - 29px); border-right: 1px solid #39a7df; z-index: 1; }

.aside .nav-primary>.item-text { color: #ffffff; font-size: 20px; font-weight: 100; display: block; margin: 0px 8px; /*@include rotate(-90,3);*/ }

.aside .nav-primary .item-text i { font-size: 16px; }

.aside .sidebar { position: fixed; top: 0; background-color: #39a7df; height: calc(100% - 29px); overflow-y: auto; border-right: 1px solid #39a7df; -webkit-overflow-scrolling: touch; width: 250px; z-index: 2; }

.sidebar>.nav { position: relative; margin-top: 5px; }

.sidebar>.nav>.nav-heading:first-child { padding-top: 0px; }

.sidebar .nav-heading:hover { background-color: #39a7df !important; color: #ffffff !important; }

.sidebar .nav-labels { list-style-type: none; padding: 0; margin: 0; }

.sidebar .nav-labels>.nav-labels-item { padding: 5px 25px; font-size: 13px; }

.sidebar .nav-labels>.nav-labels-item>a { color: #ffffff; }

.sidebar .nav-labels>.nav-labels-item .circle { margin-right: 20px; margin-left: 0; }

.sidebar .nav>li { border-left: 2px solid transparent; display: block; width: 100%; }

.sidebar .nav>li>a, .sidebar .nav>li>.nav-item { padding: 12px 5px 12px 10px; color: #ffffff; letter-spacing: .025em; /*font-weight: 600;*/ -webkit-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; transition: background-color 0.2s ease; display: block; text-decoration: none; }

.sidebar .nav>li>a:focus, .sidebar .nav>li>.nav-item:focus { color: #fff; background-color: #45AC6C; }

.sidebar .nav>li>a>em, .sidebar .nav>li>.nav-item>em { width: 1.5em; color: #ffffff; }

.sidebar .nav>li.active  /*.sidebar .nav > li.active > a,*/ /*.sidebar .nav > li.active > a > .item-text*/ /*.sidebar .nav > li.active .nav,*/ { background-color: #45AC6C; color: #fff; }

.sidebar .nav>li:hover, .sidebar .nav>li:hover>a, .sidebar .nav>li:hover>a>.item-text .sidebar .nav>li:hover .nav { background-color: #C1332F; color: #fff; }

.sidebar .nav>li.active>a>em, .sidebar .nav>li:hover>a>em { color: #ffffff; }

.sidebar .nav>li.active { border-left-color: #39a7df; }

.sidebar .nav .nav { padding-left: 25px; background-color: #39a7df; }

.sidebar .nav .nav>li { border-left: 0; }

.sidebar .nav .nav>li>a, .sidebar .nav .nav>li>.nav-item { display: block; position: relative; padding: 10px 2px 10px 6px; background-color: transparent !important; font-weight: normal; }

.sidebar .nav .nav>li>a:focus, .sidebar .nav .nav>li>.nav-item:focus, .sidebar .nav .nav>li>a:hover, .sidebar .nav .nav>li>.nav-item:hover { color: #fff; }

.sidebar .nav .nav>li.active>a, .sidebar .nav .nav>li.active>.nav-item { color: #fff; }

.sidebar .nav .nav>li.active>a:after, .sidebar .nav .nav>li.active>.nav-item:after { border-color: #1c75bf; background-color: #1c75bf; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<aside class="aside">
         <div class="nav-primary nav-toggle d-none d-md-inline"> <span class="item-text"><i class="fa fa-bars"></i> </span> </div>
         <nav id="" class="sidebar">
            <ul id="menu-itens" class="nav">
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-address-card"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-boxes"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fas fa-user-tie"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-university"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false" style="">
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-object-ungroup"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-handshake"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse show" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck"></em><span class="item-text">item</span> </a> 
                        <ul class="nav collapse" aria-expanded="false">
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                           <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span></a></li>
                        </ul>
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-truck-loading"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-shopping-cart"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-wrench"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-file-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="far fa-shopping-basket"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-users"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li> 
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-box-full"></em><span class="item-text">item</span> </a>  </li>
                     <li>
                        <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu">
                           <em class="fal fa-dot-circle"></em><span  
                     </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li> 
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"> <span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-cubes"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-industry-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-money-bill-alt"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-dollar-sign"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-money-check-alt"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-university"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="fal fa-dot-circle"></em><span class="item-text">item</span> </a>  </li>
                  </ul>
               </li>
               <li>
                  <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-chart-line"></em><span class="item-text">item</span> </a> 
                  <ul class="nav collapse" aria-expanded="false" style="">
                     <li> <a href="javascript: void(0);" data-toggle="collapse-next" class="has-submenu"> <em class="far fa-clipboard-list"></em><span class="item-text">item</span> </a>  </li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                     <li> <a href="#" data-toggle="" class="no-submenu"><span class="item-text">item</span> </a></li>
                  </ul>
               </li>
            </ul>
         </nav>
      </aside>
    
10.01.2019 / 22:17
Can not convert object of type java.lang.String to type geoapp.cursoandroid.com.geoapp.model.Project Problem uploading and getimagesize php [closed]