navegacion: al abrir, la actividad; los modulos en la pestaña Menu

docs/ESTUDIO_NAVEGACION.md compara cuatro formas de moverse por la app
(lanzador en portada, boton de menu arriba, pestaña Menu abajo, hamburguesa)
y se queda con la pestaña de abajo, el patron Mas de Android y de las apps
grandes: al alcance del pulgar y en todas las pantallas.

- la portada es la actividad; el lanzador ya no se pinta alli
- quinta pestaña fija en la barra de abajo, Menu, que abre desde abajo una
  hoja con todos los modulos por secciones; se cierra con la X, tocando fuera
  o volviendo a tocar Menu. Sin JS: una casilla y CSS
- textos en los 11 idiomas; caben cinco pestañas a 360px
- capturas, portada y esquema de la interfaz al dia
This commit is contained in:
hacklab 2026-10-19 14:23:43 +02:00
parent 6eafe5ee18
commit 382d903bc5
18 changed files with 192 additions and 34 deletions

View file

@ -114,9 +114,26 @@ module.exports = ({ i18n }) => {
const slots = pins.map(m => bbLink(
m.href, m.glyph, i18n[m.labelKey] || m.key, m.key === 'inbox' ? inboxN : 0
));
// quinta pestaña fija: Menu abre desde abajo una hoja con todos los modulos (el
// lanzador). Sin JS: una casilla y CSS. autocomplete=off para que al volver atras
// el navegador no la deje abierta. Ver docs/ESTUDIO_NAVEGACION.md
const menuLabel = i18n.bbMenu || 'Menu';
return nav(
{ class: "oasis-bottombar", attrs: { "aria-label": i18n.bbQuickActions || "Quick actions" } },
...slots
input({ type: 'checkbox', id: 'oasis-menu-toggle', class: 'menu-toggle', autocomplete: 'off', 'aria-label': menuLabel }),
...slots,
label({ class: 'bb-item bb-menu', for: 'oasis-menu-toggle' },
iconNode('bb-ico', 'modules', '▦'),
span({ class: 'bb-lbl' }, menuLabel)
),
label({ class: 'menu-sheet-backdrop', for: 'oasis-menu-toggle', 'aria-hidden': 'true' }),
div({ class: 'menu-sheet', role: 'dialog', 'aria-label': menuLabel },
div({ class: 'menu-sheet-head' },
span({ class: 'menu-sheet-title' }, menuLabel),
label({ class: 'menu-sheet-close', for: 'oasis-menu-toggle', 'aria-label': i18n.bbMenuClose || 'Close' }, '✕')
),
renderHiveNav()
)
);
};