Skip to content

Update panel orientation #1405

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
AMaestroG wants to merge 1 commit into
base: main
Choose a base branch
from
+16 −15
Draft

Update panel orientation #1405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions assets/js/sliding-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (menu.classList.contains('left-panel')) {
document.body.classList.toggle('menu-open-left', open);
} else if (menu.classList.contains('right-panel')) {
// menu-open-right previously shifted the body via CSS transform.
// The transform has been disabled, so toggling is no longer needed
// for layout. Preserve hook for other effects if required.
// document.body.classList.toggle('menu-open-right', open);
document.body.classList.toggle('menu-open-right', open);
} else if (menu.classList.contains('top-panel')) {
document.body.classList.toggle('menu-open-top', open);
}
Expand Down Expand Up @@ -116,8 +113,10 @@ document.addEventListener('DOMContentLoaded', () => {
const anyPanelOpen = document.querySelectorAll('.menu-panel.open').length > 0;
const sidebarOpen = document.getElementById(sidebarMenuId)?.classList.contains('open');
const anyOpen = anyPanelOpen || sidebarOpen;
const leftPanelOpen = document.querySelector('.menu-panel.left-panel.active');
const leftPanelOpen = document.querySelector('.menu-panel.left-panel.open');
const rightPanelOpen = document.querySelector('.menu-panel.right-panel.open');
document.body.classList.toggle('menu-open-left', !!leftPanelOpen);
document.body.classList.toggle('menu-open-right', !!rightPanelOpen);

if (window.audioController && typeof window.audioController.handleMenuToggle === 'function') {
window.audioController.handleMenuToggle(anyOpen);
Expand Down
8 changes: 5 additions & 3 deletions docs/index-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ Este bloque fijo aparece al inicio de cada página y mantiene visibles los contr
Estos son los accesos que incorpora por defecto:

- `#consolidated-menu-button` abre el panel lateral con toda la navegación.
- `#open-unified-panel-button` despliega el nuevo panel IA y la barra de idiomas.
- `#ai-chat-trigger` abre directamente el cajón IA. En móviles no se clona al panel lateral.
- `#open-unified-panel-button` abre el panel de navegación principal (desliza desde la izquierda).
- `#ai-chat-trigger` abre directamente el cajón IA que se desliza desde la derecha. En móviles no se clona al panel lateral.
- `#theme-toggle` alterna entre modo claro y oscuro.
Al añadir más elementos al contenedor puede ser necesario ajustar la posición de los paneles deslizantes. Para ello define la variable `--menu-extra-offset` con la altura del contenedor y úsala junto a `--language-bar-offset` en `assets/css/menus/consolidated-menu.css`:

Expand Down Expand Up @@ -185,7 +185,9 @@ Al enviar el formulario se regenerará `config/forum_agents.php` con la nueva in

## Nuevo panel IA

El botón `#open-unified-panel-button` (con `data-menu-target="unified-panel"`) abre `#unified-panel`, un cajón lateral que integra navegación, herramientas del sitio y el asistente de inteligencia artificial. Dentro de este panel el chat se incrusta desde `fragments/header/ai-drawer.html` sin su cabecera original. Los eventos de apertura y cierre se gestionan en `assets/js/ui-drawers.js`.
El botón `#open-unified-panel-button` (con `data-menu-target="unified-panel"`) abre `#unified-panel`, un cajón lateral que integra navegación, herramientas del sitio y el asistente de inteligencia artificial. Este panel se desliza desde la **izquierda** y dentro de él el chat se incrusta desde `fragments/header/ai-drawer.html` sin su cabecera original. Los eventos de apertura y cierre se gestionan en `assets/js/ui-drawers.js`.

El panel `#ai-chat-panel` se despliega desde la **derecha** y utiliza el mismo script para su animación.

Este nuevo panel, junto al de traducción superior, facilita el acceso inmediato a contenido multilingüe y al soporte conversacional. Su objetivo es reforzar nuestra misión de **promocionar el turismo en Cerezo de Río Tirón y proteger su patrimonio arqueológico y cultural**.

Expand Down
14 changes: 7 additions & 7 deletions fragments/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?php
// fragments/header.php
// UNIFIED PANEL RIGHT STRUCTURE
// UNIFIED PANEL LEFT STRUCTURE
require_once __DIR__ . '/../includes/auth.php'; // For is_admin_logged_in()
require_once __DIR__ . '/../includes/config.php';
?>
Expand All @@ -14,7 +14,7 @@
</div>

<div class="flex items-center space-x-3">
<button id="open-unified-panel-button" aria-label="Abrir Menú y Herramientas" aria-expanded="false" aria-controls="unified-panel" class="text-old-gold hover:text-white transition-colors">
<button id="open-unified-panel-button" data-menu-target="unified-panel" aria-label="Abrir Menú y Herramientas" aria-expanded="false" aria-controls="unified-panel" class="text-old-gold hover:text-white transition-colors">
<i class="fas fa-bars text-2xl"></i>
</button>
<button id="ai-chat-trigger" data-menu-target="ai-chat-panel" aria-label="Abrir chat IA" aria-haspopup="dialog" aria-expanded="false" aria-controls="ai-chat-panel" class="text-old-gold hover:text-white transition-colors">
Expand All @@ -24,13 +24,13 @@
</div>
</header>

<!-- Unified Sliding Panel (Right) -->
<aside id="unified-panel" class="fixed top-0 right-0 w-80 md:w-96 h-full bg-gray-900 text-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-[70]" role="dialog" aria-modal="true" aria-labelledby="unified-panel-title" tabindex="-1" aria-hidden="true">
<!-- Unified Sliding Panel (Left) -->
<aside id="unified-panel" class="menu-panel left-panel fixed top-0 left-0 w-80 md:w-96 h-full bg-gray-900 text-white shadow-lg transition-transform duration-300 ease-in-out z-[70]" role="dialog" aria-modal="true" aria-labelledby="unified-panel-title" tabindex="-1" aria-hidden="true">
<div class="flex flex-col h-full">
<!-- Panel Header -->
<div class="flex justify-between items-center p-4 border-b border-gray-700 flex-shrink-0">
<h2 id="unified-panel-title" class="text-xl font-headings text-old-gold">Menú y Herramientas</h2>
<button id="close-unified-panel-button" aria-label="Cerrar Panel" class="text-2xl text-gray-300 hover:text-old-gold">&times;</button>
<button id="close-unified-panel-button" data-menu-target="unified-panel" aria-label="Cerrar Panel" class="text-2xl text-gray-300 hover:text-old-gold">&times;</button>
</div>

<!-- Panel Content (Scrollable) -->
Expand Down Expand Up @@ -107,8 +107,8 @@
</div>
</aside>

<!-- AI Chat Sliding Panel (Left) -->
<aside id="ai-chat-panel" class="menu-panel left-panel" role="dialog" aria-modal="true" aria-labelledby="ai-chat-title" tabindex="-1" aria-hidden="true">
<!-- AI Chat Sliding Panel (Right) -->
<aside id="ai-chat-panel" class="menu-panel right-panel" role="dialog" aria-modal="true" aria-labelledby="ai-chat-title" tabindex="-1" aria-hidden="true">
<?php
if (file_exists(__DIR__ . '/header/ai-drawer.html')) {
echo file_get_contents(__DIR__ . '/header/ai-drawer.html');
Expand Down