Salnaya/script.js at main · Melendo/Salnaya · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
const toggleBtn = document.getElementById('darkToggle');
const logoImg = document.getElementById('logoImg');
const LIGHT_LOGO = './resources/img/LogoD.webp';
const DARK_LOGO = './resources/img/LogoW.webp';

// --- Al cargar la página ---
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    // Si no hay preferencia guardada => usar dark por defecto
    if (savedTheme === 'dark' || !savedTheme) {
        document.body.classList.add('dark-mode');
        logoImg.src = DARK_LOGO;
        toggleBtn.querySelector('i').classList.replace('bi-moon', 'bi-sun');
        localStorage.setItem('theme', 'dark');
    } else {
        logoImg.src = LIGHT_LOGO;
    }
});

// --- Al hacer clic ---
toggleBtn.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
    const icon = toggleBtn.querySelector('i');
    if (document.body.classList.contains('dark-mode')) {
        icon.classList.replace('bi-moon', 'bi-sun');
        logoImg.src = DARK_LOGO;
        localStorage.setItem('theme', 'dark');
    } else {
        icon.classList.replace('bi-sun', 'bi-moon');
        logoImg.src = LIGHT_LOGO;
        localStorage.setItem('theme', 'light');
    }
    // Colapsar navbar si está abierto
    const navbarCollapse = document.getElementById('navbarNav');
    if (navbarCollapse.classList.contains('show')) {
        new bootstrap.Collapse(navbarCollapse).hide();
    }
});

async function cargarMenu() {
    const res = await fetch('menu.json');
    const menu = await res.json();

    for (const seccion of ['desayuno', 'comida', 'bebidas', 'extras']) {
        const contenedor = document.getElementById(`${seccion}-content`);
        contenedor.innerHTML = generarAccordion(menu[seccion], seccion);
    }
}

function generarAccordion(categorias, seccionId) {
    let html = `<div class="accordion" id="accordion-${seccionId}">`;
    categorias.forEach((cat, i) => {
        html += `
      <div class="accordion-item">
        <h2 class="accordion-header" id="heading-${seccionId}-${i}">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-${seccionId}-${i}" aria-expanded="false" aria-controls="collapse-${seccionId}-${i}">
            <span class="subsection-title"><i class="bi ${cat.icono}"></i> ${cat.categoria}</span>
          </button>
        </h2>
        <div id="collapse-${seccionId}-${i}" class="accordion-collapse collapse" aria-labelledby="heading-${seccionId}-${i}" data-bs-parent="#accordion-${seccionId}">
          <div class="accordion-body">
            <div class="row row-cols-1 row-cols-md-2 g-4 menu-row">
              ${cat.platos.map(plato => `
                <div class="menu-item">
                  <h5><i class="bi ${cat.icono}"></i>${plato.nombre} <span>${plato.precio}</span></h5>
                  ${plato.descripcion ? `<p>${plato.descripcion}</p>` : ''}
                </div>
              `).join('')}
            </div>
          </div>
        </div>
      </div>
    `;
    });
    html += `</div>`;
    return html;
}

document.addEventListener('DOMContentLoaded', cargarMenu);

document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
    link.addEventListener('click', function (e) {
      const targetId = this.getAttribute('href');
      if (targetId.startsWith('#')) {
        e.preventDefault();
        const navbarCollapse = document.getElementById('navbarNav');
        if (navbarCollapse.classList.contains('show')) {
          new bootstrap.Collapse(navbarCollapse).hide();
          setTimeout(() => {
            const section = document.querySelector(targetId);
            if (section) {
              section.scrollIntoView({ behavior: 'smooth' });
            }
          }, 350); // Ajusta el tiempo si la animación es más lenta
        } else {
          const section = document.querySelector(targetId);
          if (section) {
            section.scrollIntoView({ behavior: 'smooth' });
          }
        }
      }
    });
  });

// Cerrar navbar al hacer clic fuera de él
document.addEventListener('click', function (event) {
  const navbarCollapse = document.getElementById('navbarNav');
  const navbarToggler = document.querySelector('.navbar-toggler');
  // Si el navbar está abierto y el clic no es dentro del navbar ni en el toggler
  if (
    navbarCollapse.classList.contains('show') &&
    !navbarCollapse.contains(event.target) &&
    !navbarToggler.contains(event.target)
  ) {
    new bootstrap.Collapse(navbarCollapse).hide();
  }
});