Migración de dominio y creación de un menú hamburguesa reutilizable

Este documento resume los pasos técnicos que seguí para actualizar mi web:

Cambiar la URL principal de serblog.hopto.org a serherm.hopto.org.
Actualizar todas las rutas y enlaces internos para que apunten al nuevo dominio.
Implementar un menú hamburguesa reutilizable en todas las páginas.
Añadir el CSS necesario para el menú lateral y el submenú.
Añadir el JavaScript que controla la interacción del menú.

El objetivo fue unificar la navegación y adaptar la web al nuevo dominio sin romper la estructura existente.

1. Cambio de dominio: de serblog.hopto.org a serherm.hopto.org

Para migrar la web al nuevo dominio, fue necesario actualizar:

La configuración del servidor (Nginx).
Las rutas internas de Flask.
Los enlaces del header.
Los enlaces absolutos dentro de las plantillas HTML.

Fragmento de configuración del servidor:
server { listen 80; server_name serherm.hopto.org;

location / {
    proxy_pass http://127.0.0.1:5000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

}

Fragmento de rutas Flask actualizadas:
@app.route("/") def index(): return render_template("index.html")

@app.route("/blog") def blog(): return render_template("blog.html")

@app.route("/proyectos") def proyectos(): return render_template("proyectos.html")

@app.route("/proyectos/eclipsapp") def eclipsapp(): return render_template("eclipsapp.html")

Por qué era necesario:
El dominio anterior seguía apuntando a rutas antiguas y a un header que ya no representaba la web.
Al cambiar el dominio, todos los enlaces internos deben actualizarse para evitar redirecciones incorrectas o páginas que no cargan.

2. Actualización del header para incluir el menú hamburguesa

El header original solo tenía enlaces simples.
Se sustituyó por un header unificado con:

Logo que apunta a /
Botón hamburguesa
Menú lateral
Submenú para “Proyectos”

Fragmento del nuevo header HTML:

Por qué era necesario:
El menú hamburguesa permite una navegación coherente en todas las páginas, especialmente en móvil.
Además, evita tener que repetir botones “volver” en cada app independiente.

3. CSS añadido para el menú lateral y el submenú

El menú necesitaba estilos para:

Posicionarse como panel lateral.
Ocultarse y mostrarse correctamente.
Dar formato al submenú de proyectos.
Mantener coherencia con el diseño azul claro de la web.

Fragmento del CSS del menú:
/ Bloque corregido del submenú / .submenu-content { flex-direction: column; gap: 10px; }

.submenu-content.oculto { display: none; }

Por qué era necesario:
Sin CSS, el menú lateral aparecería siempre visible o sin formato.
El bloque corregido permite que el submenú se oculte y se despliegue correctamente mediante la clase oculto.

4. JavaScript para controlar la interacción del menú

El menú hamburguesa necesitaba lógica para:

Abrir el panel lateral.
Cerrar el panel lateral.
Desplegar el submenú de proyectos.
Volver a ocultarlo.

Fragmento del JavaScript:
const hamburger = document.getElementById("hamburger"); const menuLateral = document.getElementById("menu-lateral"); const cerrarMenu = document.getElementById("cerrar-menu");

hamburger.onclick = function() { menuLateral.classList.toggle("oculto"); };

cerrarMenu.onclick = function() { menuLateral.classList.add("oculto"); };

const submenuBtn = document.querySelector(".menu-btn"); const submenuContent = document.querySelector(".submenu-content");

submenuBtn.onclick = function() { submenuContent.classList.toggle("oculto"); };

¿Qué hace este JavaScript?

Este script controla toda la interacción del menú hamburguesa.
Su función es añadir o quitar la clase oculto en distintos elementos del menú, lo que permite mostrar u ocultar cada parte según el usuario interactúa.

El comportamiento se divide en tres acciones principales:

Abrir el menú lateral Cuando el usuario pulsa el icono hamburguesa, el panel lateral cambia entre visible y oculto.
Esto se consigue alternando la clase oculto en el contenedor del menú.
Cerrar el menú lateral El botón de cerrar dentro del panel lateral fuerza que el menú vuelva a ocultarse.
Aquí no se alterna: se asegura que la clase oculto esté aplicada.
Desplegar el submenú de “Proyectos” El botón del submenú muestra u oculta la lista de proyectos.
Igual que el menú principal, funciona alternando la clase oculto.

En resumen, este JavaScript no modifica estilos directamente:
solo añade o quita la clase oculto, y es el CSS quien decide cómo se ve cada elemento.
Esto hace que el menú sea modular, fácil de mantener y reutilizable en todas las páginas.

Por qué era necesario:
El HTML y el CSS solo definen la estructura y el estilo.
La interacción (mostrar/ocultar) depende del JavaScript, que añade y quita la clase oculto.

5. Resultado final

Tras estos cambios:

La web funciona completamente bajo serherm.hopto.org.
Todas las páginas comparten el mismo header y menú hamburguesa.
El submenú de proyectos funciona correctamente.
El CSS está unificado y no interfiere con la interacción.
El JavaScript controla el menú de forma limpia y reutilizable.