taler-typescript-core

commit 2a715c0ff7e03d988d9e06dc8bdd1bd2a2a9ee2b
parent 3c4de96963b3797f539b9dfa6df91b38265c549a
Author: Sebastian <sebasjm@taler-systems.com>
Date:   Fri, 23 Jan 2026 15:54:13 -0300

fix #10906

Diffstat:
M
packages/merchant-backoffice-ui/src/components/menu/index.tsx
 | 
27
++++++++++++++++++++++++---

1 file changed, 24 insertions(+), 3 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/components/menu/index.tsx b/packages/merchant-backoffice-ui/src/components/menu/index.tsx
@@ -29,7 +29,11 @@ import {
 import { LangSelector } from "./LangSelector.js";
 import { InternationalizationAPI } from "@gnu-taler/taler-util";
 
-function getInstanceTitle(path: string, id: string, i18n: InternationalizationAPI): string {
+function getInstanceTitle(
+  path: string,
+  id: string,
+  i18n: InternationalizationAPI,
+): string {
   switch (path) {
     case InstancePaths.settings:
       return i18n.ctx("title")`${id}: Settings`;
@@ -97,7 +101,11 @@ function getInstanceTitle(path: string, id: string, i18n: InternationalizationAP
   }
 }
 
-function getAdminTitle(path: string, instance: string, i18n: InternationalizationAPI) {
+function getAdminTitle(
+  path: string,
+  instance: string,
+  i18n: InternationalizationAPI,
+) {
   if (path === AdminPaths.new_instance) return i18n.ctx("title")`New instance`;
   if (path === AdminPaths.list_instances) return i18n.ctx("title")`Instances`;
   return getInstanceTitle(path, instance, i18n);
@@ -119,7 +127,7 @@ function WithTitle({
 }
 
 export function Menu(_p: MenuProps): VNode {
-  const [mobileOpen, setMobileOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(true);
 
   const { i18n } = useTranslationContext();
   const { state, deImpersonate } = useSessionContext();
@@ -134,6 +142,19 @@ export function Menu(_p: MenuProps): VNode {
   return (
     <WithTitle title={titleWithSubtitle}>
       <div
+        style={{
+          backgroundColor: "#00000050",
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          zIndex: 10,
+          display: mobileOpen ? "flex" : "none",
+        }}
+        onClick={() => setMobileOpen(false)}
+      />
+      <div
         class={mobileOpen ? "has-aside-mobile-expanded" : ""}
         onClick={() => setMobileOpen(false)}
       >