How can I adapt the elements of a page when the menu is shown with a modal?

The title is a preamble to the problem that is presented to me, I am making a web page (Using Materialize) which has a fixed menu in left position in desktop mode

and when the resolution of the screen is less than 1000px changes the way in which the menu is displayed

My problem is that having the menu active (slide-out) and putting the resolution higher than 1000px, the modal does not disappear and the elements in question are out of tune (table and the navbar)

I would simply like that when the screen resolution increases, with the modal modal active as in image number 2, it will disappear, just like this YouTube and the elements will adjust to how they have to be (because if it does when refresh the page)

The navbar that execute the modal function with the menu

<div class="navbar-fixed">
  <ul id="dropdown1" class="dropdown-content">
    <li>
      <a href="<?=base_url()?>controlador/usuarioc/vcusuarioc?ci=<?=$_SESSION['ci']?>">Perfil<i class="material-icons left" style="float: left;margin-right: 5px;margin-top: -2px;">person</i></a>
    </li>
    <li>
      <a href="<?=base_url()?>controlador/loginc/logout">Salir<i class="material-icons left" style="float: left;margin-right: 5px;margin-top: -2px;">exit_to_app</i></a>
    </li>
  </ul>
  <nav class="panelfix">
    <div class="nav-wrapper">
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a class="dropdown-button" href="#!" data-activates="dropdown1"><?=$_SESSION['nomu']." ".$_SESSION['apeu']?><i class="material-icons right">arrow_drop_down</i><i class="material-icons left">person_outline
        </i></a></li>
      </ul>
    </div>
  </nav>
</div>