Use PersistentPanel in MobileMenu

package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.8",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-portal": "^1.1.1",

src/components/Nav/MobileMenu/MobileMenuClient.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import * as React from "react"
+
+import { PersistentPanel } from "@/components/ui/persistent-panel"
+import { Sheet, SheetTrigger } from "@/components/ui/sheet"
+
+import { cn } from "@/lib/utils/cn"
+
+import HamburgerButton from "./HamburgerButton"
+
+import { useCloseOnNavigate } from "@/hooks/useCloseOnNavigate"
+
+type MobileMenuClientProps = {
+  className?: string
+  side: "left" | "right"
+  children: React.ReactNode
+}
+
+const MobileMenuClient = ({
+  className,
+  side,
+  children,
+}: MobileMenuClientProps) => {
+  const [open, setOpen] = useCloseOnNavigate()
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <HamburgerButton
+          ref={triggerRef}
+          className={cn("-me-2", className)}
+          isMenuOpen={open}
+        />
+      </SheetTrigger>
+
+      <PersistentPanel
+        open={open}
+        side={side}
+        className="flex flex-col"
+        onOpenChange={setOpen}
+        triggerRef={triggerRef}
+      >
+        {children}
+      </PersistentPanel>
+    </Sheet>
+  )
+}
+
+export default MobileMenuClient

src/components/Nav/MobileMenu/index.tsx

@@ -12,13 +12,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible"
-import {
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTrigger,
-} from "@/components/ui/sheet"
-import { SheetCloseOnNavigate } from "@/components/ui/sheet-close-on-navigate"
+import { SheetFooter, SheetHeader } from "@/components/ui/sheet"
 
 import { cn } from "@/lib/utils/cn"
 import { isLangRightToLeft } from "@/lib/utils/translations"
@@ -28,8 +22,8 @@ import { MOBILE_LANGUAGE_BUTTON_NAME, SECTION_LABELS } from "@/lib/constants"
 
 import FooterButton from "./FooterButton"
 import FooterItemText from "./FooterItemText"
-import HamburgerButton from "./HamburgerButton"
 import MenuHeader from "./MenuHeader"
+import MobileMenuClient from "./MobileMenuClient"
 import ThemeToggleFooterButton from "./ThemeToggleFooterButton"
 
 import { getLanguagesDisplayInfo, getNavigation } from "@/lib/nav/links"
@@ -49,73 +43,59 @@ export default async function MobileMenu({
   const dir = isRtl ? "rtl" : "ltr"
 
   return (
-    <SheetCloseOnNavigate>
-      <SheetTrigger className={className} asChild>
-        <HamburgerButton
-          className={cn("-me-2", className)}
-          isMenuOpen={false}
-          {...props}
-        />
-      </SheetTrigger>
-      <SheetContent
-        side={side}
-        hideOverlay
-        className="flex flex-col"
-        aria-describedby=""
+    <MobileMenuClient className={className} side={side} {...props}>
+      <SheetHeader>
+        <MenuHeader />
+      </SheetHeader>
+
+      <TabsPrimitive.Root
+        dir={dir}
+        defaultValue="navigation"
+        className="flex min-h-0 flex-1 flex-col"
       >
-        <SheetHeader>
-          <MenuHeader />
-        </SheetHeader>
-
-        <TabsPrimitive.Root
-          dir={dir}
-          defaultValue="navigation"
-          className="flex min-h-0 flex-1 flex-col"
+        <TabsPrimitive.Content
+          value="navigation"
+          className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
         >
-          <TabsPrimitive.Content
-            value="navigation"
-            className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
-          >
-            <NavigationContent className="flex-1 overflow-y-auto" />
-          </TabsPrimitive.Content>
-          <TabsPrimitive.Content
-            value="languages"
-            className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
-          >
-            <LanguageContent className="flex min-h-0 flex-1 flex-col" />
-          </TabsPrimitive.Content>
-
-          <SheetFooter className="h-[108px] shrink-0 justify-center border-t border-body-light px-4 py-0">
-            <TabsPrimitive.List className="grid h-auto w-full grid-cols-3">
-              <div className="flex flex-col items-center gap-1 py-2">
-                <TabsPrimitive.Trigger value="languages" asChild>
-                  <FooterButton
-                    icon={Languages}
-                    name={MOBILE_LANGUAGE_BUTTON_NAME}
-                    data-testid="mobile-menu-language-picker"
-                  >
-                    <FooterItemText>{t("languages")}</FooterItemText>
-                  </FooterButton>
-                </TabsPrimitive.Trigger>
-              </div>
-              <div className="flex flex-col items-center gap-1 py-2">
-                <ThemeToggleFooterButton />
-              </div>
-              <div className="flex flex-col items-center gap-1 py-2">
-                <TabsPrimitive.Trigger value="navigation" asChild>
-                  <FooterButton
-                    icon={Menu}
-                    data-testid="mobile-menu-navigation-picker"
-                  >
-                    <FooterItemText>{t("menu")}</FooterItemText>
-                  </FooterButton>
-                </TabsPrimitive.Trigger>
-              </div>
-            </TabsPrimitive.List>
-          </SheetFooter>
-        </TabsPrimitive.Root>
-      </SheetContent>
-    </SheetCloseOnNavigate>
+          <NavigationContent className="flex-1 overflow-y-auto" />
+        </TabsPrimitive.Content>
+        <TabsPrimitive.Content
+          value="languages"
+          className="mt-0 hidden min-h-0 flex-1 flex-col border-none p-0 data-[state=active]:flex"
+        >
+          <LanguageContent className="flex min-h-0 flex-1 flex-col" />
+        </TabsPrimitive.Content>
+
+        <SheetFooter className="h-[108px] shrink-0 justify-center border-t border-body-light px-4 py-0">
+          <TabsPrimitive.List className="grid h-auto w-full grid-cols-3">
+            <div className="flex flex-col items-center gap-1 py-2">
+              <TabsPrimitive.Trigger value="languages" asChild>
+                <FooterButton
+                  icon={Languages}
+                  name={MOBILE_LANGUAGE_BUTTON_NAME}
+                  data-testid="mobile-menu-language-picker"
+                >
+                  <FooterItemText>{t("languages")}</FooterItemText>
+                </FooterButton>
+              </TabsPrimitive.Trigger>
+            </div>
+            <div className="flex flex-col items-center gap-1 py-2">
+              <ThemeToggleFooterButton />
+            </div>
+            <div className="flex flex-col items-center gap-1 py-2">
+              <TabsPrimitive.Trigger value="navigation" asChild>
+                <FooterButton
+                  icon={Menu}
+                  data-testid="mobile-menu-navigation-picker"
+                >
+                  <FooterItemText>{t("menu")}</FooterItemText>
+                </FooterButton>
+              </TabsPrimitive.Trigger>
+            </div>
+          </TabsPrimitive.List>
+        </SheetFooter>
+      </TabsPrimitive.Root>
+    </MobileMenuClient>
   )
 }
 

src/components/ProductTable/MobileFilters.tsx

@@ -40,6 +40,7 @@ const MobileFilters = ({
   mobileFiltersLabel,
 }: MobileFiltersProps) => {
   const { t } = useTranslation("table")
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
 
   const handleOpenChange = (open: boolean) => {
     setMobileFiltersOpen(open)
@@ -59,6 +60,7 @@ const MobileFilters = ({
       <Sheet open={mobileFiltersOpen} onOpenChange={handleOpenChange}>
         <SheetTrigger className="px-4" asChild>
           <Button
+            ref={triggerRef}
             variant="outline"
             className="gap-4 border-0 ps-4"
             data-testid="mobile-filters-button"
@@ -74,12 +76,12 @@ const MobileFilters = ({
         </SheetTrigger>
       </Sheet>
 
-      {/* Persistent content that stays mounted after first render */}
       <PersistentPanel
         open={mobileFiltersOpen}
         side="left"
         className="flex h-full flex-col p-2"
         onOpenChange={handleOpenChange}
+        triggerRef={triggerRef}
       >
         <div className="sticky top-0 flex items-center justify-end p-2">
           <Button variant="ghost" onClick={handleClose}>