menuInferior.html

<!--Letras usadas-->
<link
  href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&display=swap"
  rel="stylesheet"
/>

<ul class="ItemsNavegacion">
  <li class="Opciones">
    <button onclick="inicio()" class="botonesBarraMenu Inferior">
      <i class="fas Icono Oscuro fa-home"></i>
    </button>
  </li>
  <li class="Opciones">
    <button
      onclick="buscar()"
      class="botonesBarraMenu Inferior"
      id="busquedaBoton"
    >
      <i class="fas Icono Oscuro fa-search"></i>
    </button>
    <div id="panelBusqueda">
      <input id="textoBusqueda" />
      <button id="botonBusqueda" onclick="buscarBD()">
        <i class="fas fa-location-arrow"></i>
      </button>
    </div>
  </li>
  <li class="Opciones" id="subirArchivo">
    <button class="botonesBarraMenu Inferior" onclick="subirArchivo()">
      <i class="fas Icono Oscuro fa-upload"></i>
    </button>
  </li>
  <li class="MiAula">
    <button class="botonesBarraMenu Inferior Letra Claro" id="miAulaBoton">
      <i class="Icono Oscuro fas fa-school" id="miAulaBoton"></i>
    </button>
    <ul id="panelUsuario">
      <li>
        <button
          onclick="miAulaBoton()"
          class="botonesBarraMenu Letra Oscuro"
          id="toggleBoton"
        >
          <i
            class="Icono Oscuro fas fa-chalkboard-teacher"
            id="toggleBoton"
          ></i>
          Mi aula
        </button>
      </li>
      <li>
        <button
          onclick="cerrarSesion()"
          class="botonesBarraMenu Letra Oscuro"
          id="toggleBoton"
        >
          <i class="Icono Oscuro fas fa-sign-out-alt" id="toggleBoton"></i>
          Salir
        </button>
      </li>
    </ul>
    <button
      onclick="ingresarBoton()"
      class="botonesBarraMenu Inferior Letra Oscuro"
      id="ingresarBoton"
    >
      <i class="Icono Oscuro fas fa-school"></i>
    </button>
  </li>
</ul>

<script>
  $(function() {
    $("#miAulaBoton").hide();
    $("#subirArchivo").hide();
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        $("#ingresarBoton").hide();
        $("#miAulaBoton").show();
        $("#subirArchivo").show();
      } else {
        $("#ingresarBoton").show();
        $("#ingresarBoton").append("Ingresar");
      }
    });
    $("#panelUsuario").hide();
    $("#panelBusqueda").hide();
    $("#miAulaBoton").click(function() {
      $("#panelUsuario").slideToggle();
    });
    $("#busquedaBoton").click(function() {
      $("#panelBusqueda").slideToggle();
    });
  });
  $(window).click(function(e) {
    if (e.target.id != "miAulaBoton" && e.target.id != "toggleBoton") {
      $("#panelUsuario").slideUp();
    }
  });
</script>