Come creare una Sidebar in Javascript

Che cosa realizzeremo in questo progetto ?

In questo progetto andremo a realizzare una sidebar che da mobile presenta un menù laterale. Per realizzarla, andremo ad occuparci del cambio (toggle) della classe su alcuni elementi.

Selezioniamo i nodi dal DOM

Per prima cosa andremo a selezionare dal DOM i nodi che ci interessano. In questo caso selezioneremo il bottone che una volta premuto mostrerà il menù a tendina, il div che contiene il menù con i vari link, ed il pulsante presente nella sidebar che ci permetterà di chiuderla.

const toggleBtn = document.querySelector(".sidebar-toggle-btn");
const sidebar = document.querySelector(".sidebar");
const closeBtn = document.querySelector(".close-btn");

Come effettuare un cambio di classe per avere un cambio di stile

Il nostro obiettivo è quello di, dopo aver premuto sul bottone, modificare l'aspetto di un div, il quale parte come invisibile all'utente, modificando la classe assegnatagli.

Per farlo utiliziamo la proprità classList sul nodo navLinks (che rappresenta il div). Così facendo accediamo a tutte le classi che sono assegate a questo elemento. Successivamente utiliziamo il metodo .contains() che controllare che il div in questione contenga o meno la classe che vogliamo aggiungere.

Aggiungiamo un addEventListener al bottone, e al "click" andiamo ad invocare una callback all'interno della quale ad effettuare il controllo sulla classe per capire se aggiungere o rimuovere la classe al menù.

toggleBtn.addEventListener("click", () => {
   if (sidebar.classList.contains("show-sidebar")) {
     sidebar.classList.remove("show-sidebar");
   } else {
     sidebar.classList.add("show-sidebar");
   }
});

Metodo furbo

Tutto il controllo che abbiamo appena scritto è facilmente sostituibile tramite il metodo .toggle(), che permette di fare la medesima operazione.

In questo modo:

toggleBtn.addEventListener("click", function () {
  sidebar.classList.toggle("show-sidebar");
});