Test suspense in dynamic content manager

components/layout/header/mobile-menu/modal.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { useState } from 'react';
+import MainMenu from '../main-menu/main-menu';
+import OpenMobileMenu from './open-mobile-menu';
+
+interface MobileMenuModalProps {
+  locale: string;
+}
+
+export default function MobileMenuModal({ locale }: MobileMenuModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
+        <SheetTrigger aria-label="Open menu">
+          <OpenMobileMenu />
+        </SheetTrigger>
+        <SheetContent side="left" className="bg-app">
+          <SheetHeader>
+            <SheetTitle className="text-lg font-semibold">Menu</SheetTitle>
+          </SheetHeader>
+          <div className="mt-4">
+            <MainMenu locale={locale} />
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

components/layout/header/mobile-menu/open-mobile-menu.tsx

@@ -0,0 +1,15 @@
+import { Bars3Icon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function OpenMobileMenu({ className }: { className?: string }) {
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center text-high-contrast">
+      <Bars3Icon
+        className={clsx(
+          'h-5 stroke-current transition-all ease-in-out hover:scale-110 ',
+          className
+        )}
+      />
+    </div>
+  );
+}