Non-responsive input with Menubar is minimized

Question

I have a search input with an icon in a sidebar that when minimizing the menu, the input icon "goes out" from the menu according to the images:

Does anyone know how to fix it? I’ve tried with Aria-Hidden but it didn’t work.

Follows my html:

<div class="navbar" style="padding-bottom: 0px; padding-top: 14px">

  <div class="input-group" style="margin-bottom: 6px" aria-hidden="true">

    <input class="form-control border-right-0" type="search" [(ngModel)]="searchAll" (input)="Pesquisar($event.target.value)" placeholder="Pesquisar.." aria-hidden="true">


    <span class="input-group-addon bg-white border-left-0" aria-hidden="true">
          <i class="fa fa-search">
        </i>
        </span>
    <!-- <a class="clear" (click)="searchAll = null">
            <span class="fa fa-times"></span>
        </a> -->



  </div>
</div>

.nested-menu {
  .list-group-item {
    cursor: pointer;
  }
  .nested {
    list-style-type: none;
  }
  ul.submenu {
    display: none;
    height: 0;
  }
  & .expand {
    ul.submenu {
      display: block;
      list-style-type: none;
      height: auto;
      li {
        a {
          padding: 10px;
          display: block;
        }
      }
    }
  }
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #777777;
}

// input{
//     border:#ddd solid 1px;
//     float:left;
//     padding:5px 20px 5px 5px
//  }

Answer 1

When the menu wins the class .nested-menu when it is minimized, just add the property display: none in the input:

.nested-menu input{ display: none; }