0

tengo un problema con este side-bar y quisiera que me ayudarán un poco... Actualmente el side-bar se muestra de manera "desplegada"(default), y cada vez que la clickeo hay una parte del código que se modifica... Cuándo intento "encoger" el side-bar la clase del <body> se modifica y se muestra de la siguiente manera:

<body class="sidebar-mini sidebar-collapse">

Anexo imagen del side-bar "encogido"

introducir la descripción de la imagen aquí

Pero cada vez que cambio de sección, en este caso voy a cambiar de "index.php" a "productos.php" se vuelve a mostrar de manera desplegada(default)

Anexo imagen: introducir la descripción de la imagen aquí

Cada vez que se le da un click al ícono de hamburguesa(menú) se cambia la clase del side-bar, ¿cómo hago para que esa clase se siga manteniendo en las diferentes secciones? Que me valide que si no está la clase sidebar-collapse la añada y si ya lo está, me la quite ¿Me podrían ayudar? tenía pensado hacerlo con Sesiones, pero nada hasta ahora...

3
  • Hola. De momento, tu pregunta apunta a recibir opiniones porque hay muchas maneras de hacerlo y no muestras lo que has intentado. Consulta Cómo preguntar y luego entra a editar tu pregunta y pones lo que hayas tratado de hacer, para que puedan ayudarte.
    – quevedo
    Commented el 3 dic. 2020 a las 21:56
  • @quevedo ya lo actualicé... Commented el 3 dic. 2020 a las 22:24
  • No se trataba de agregar imágenes. El problema es de código, para poder ver cómo lo enfocas y sugerirte en esa dirección; porque como te dije hay muchas maneras de hacerlo. Ej. Ya que usas php podrías recoger el estado del menú y enviarlo vía post, para actualizar las preferencias del usuario, en una BD o en el objeto session. También puedes pasar la elección vía ajax y asociarla a la sesión. Si empleas cookies y el usuario las acepta puedes registrar allí y emplear esa info al servir la siguiente página, ... etc. Como ves hay muchos sabores, sin tu enfoque y código es difícil proponer algo.
    – quevedo
    Commented el 3 dic. 2020 a las 23:55

3 respuestas 3

0

Más que fijarte en esa clase que se agrega al body, yo me inclinaría por mirar la clase que tiene la entrada de menú que está abierta. Debería tener una clase (típicamente active) que la diferencie de las demás.

Si lo que quieres es que el menú no se abra por ninguna opción sólo tienes que borrar esa clase. Ahora, la cosa es dónde o cómo se agrega esa clase. Pueden haberlo hecho directamente en el HTML (lo más probable por lo que he entendido de lo que explicas) o en el js. Simplemente buscalo y quítalo.

1
  • Ya actualicé la pregunta... me podrían dar una respuesta por favor ;( Commented el 3 dic. 2020 a las 22:17
0

Usas localStorage

por ejemplo al hacer click al botón de menú hará que se despliegue. es decir, el <div> que contiene el menú cambia a una clase distinta, a veces se le agrega una clase llamada active cuando esto sucede puedes crear el el elemento localStorage

PEJ:

<div id="hamburguesa" class="hamburguesa"></div>
<body id="lateral" class="sidebar-mini sidebar-collapse">

haces click sobre el botón hamburguesa y este hace que el menú se despliege entonces le dices a JavaScript

localStorage.setItem('menu', 'abierto');//cada que haces clic sobre hamburguesa

y si le dices al menú que se cierre entonces

localStorage.setItem('menu', 'cerrado');

Ahora bien, cada que cargue la página debes hacer lo siguiente:

$(document).ready(function () {//le decimos que una vez cargue toda la página hará lo que esté aquí dentro
 var EstadoMenu = localStorage.getItem('menu');//obtiene la variable que hemos generado antes
 if(EstadoMenu == "abierto"){//leemos la información que trae

/*aquí le decimos al sistema que al elemento div, nav o lo que sea que estés usando como menú, se le añada la clase, propiedad o estilo que se le agregue cuando le haces click al botón */

   $("#lateral").addClass('sidebar-collapse');
 }else{//de lo contrario
   //hara otra cosa
   $("#lateral").removeClass('sidebar-collapse');
 }

});

la función que te acabo de mostrar lee la variable y verifica que contenga texto abierto o cerrado para decirle al menú si al cargar, actualizar o cambiar de página este deba estar cerrado o abierto

Espero esto te sirva

0

Ya pude solucionar el problema del menú, lo realicé con AJAX y con Sesiones de PHP tal cómo lo quería...

Archivo index.php:

<?php
$getMenuConfig = $_SESSION['getMenuConfig'];
?>
<ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" data-widget="pushmenu" id="botonMenu" href="#" role="button"><i class="fas fa-bars"></i></a>
    </li>
    <li class="nav-item d-none d-sm-inline-b  lock">
      <a href="index3.html" class="nav-link">Home</a>
    </li>
    <li class="nav-item d-none d-sm-inline-block">
      <a href="#" class="nav-link">Contact</a>
    </li>
  </ul>
<body id="menu" class="hold-transition sidebar-mini <?php echo $getMenuConfig; ?>">
</body>

$getMenuConfig acá tomo la variable de sesión que envío a través de un AJAX que creé con un GET de status él cuál contendrá la variable "sidebar-collapse" y a través de una función de jquery que puedo tomar todas las clases del id menú y validar si la tiene añadida o no...

Javascript:

<script type="text/javascript">
$(document).ready(function(){
  $('#botonMenu').click(function(){
    var elem = document.getElementById('menu');
    result = elem.classList.contains('sidebar-collapse');
    if (result == true) {
      $.ajax({
        url: './php/menu.php?status=',
        success:function(data){}
      });
    }else{
      $.ajax({
        url: './php/menu.php?status=sidebar-collapse',
        success:function(data){}
      });
    }
  });
});

Archivo menu.php:

<?php 
session_start();
$_SESSION['getMenuConfig'] = $_GET['status'];
echo $_SESSION['getMenuConfig'];
?>

Gracias por sus respuestas ♥

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.