From 2d8e1b9019716bbb2bc5d0e978124d185a6bb967 Mon Sep 17 00:00:00 2001
From: cita <juricek.chen@gmail.com>
Date: Tue, 10 Mar 2026 14:55:21 +0800
Subject: [PATCH] feat: add mobile drawer shell

---
 src/web/components/MobileDrawer.tsx       | 25 +++++++++++++++++++++++
 src/web/components/mobile-drawer.test.tsx | 25 +++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 src/web/components/MobileDrawer.tsx
 create mode 100644 src/web/components/mobile-drawer.test.tsx

diff --git a/src/web/components/MobileDrawer.tsx b/src/web/components/MobileDrawer.tsx
new file mode 100644
index 0000000..1624f45
--- /dev/null
+++ b/src/web/components/MobileDrawer.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+type MobileDrawerProps = {
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+};
+
+export default function MobileDrawer({ open, onClose, children }: MobileDrawerProps) {
+  if (!open) return null;
+
+  return (
+    <div className="mobile-drawer-root">
+      <button
+        type="button"
+        className="mobile-drawer-backdrop"
+        onClick={onClose}
+        aria-label="Close navigation"
+      />
+      <div className="mobile-drawer-panel" role="dialog" aria-modal="true">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/web/components/mobile-drawer.test.tsx b/src/web/components/mobile-drawer.test.tsx
new file mode 100644
index 0000000..1bdfe9b
--- /dev/null
+++ b/src/web/components/mobile-drawer.test.tsx
@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from 'vitest';
+import { create } from 'react-test-renderer';
+import MobileDrawer from './MobileDrawer.js';
+
+describe('MobileDrawer', () => {
+  it('renders content when open and closes on backdrop click', () => {
+    const onClose = vi.fn();
+    const root = create(
+      <MobileDrawer open onClose={onClose}>
+        <div>DrawerContent</div>
+      </MobileDrawer>,
+    );
+
+    const text = root.root.findAll(() => true)
+      .flatMap((instance) => instance.children)
+      .filter((child): child is string => typeof child === 'string')
+      .join('');
+
+    expect(text).toContain('DrawerContent');
+
+    const backdrop = root.root.find((node) => node.props?.className === 'mobile-drawer-backdrop');
+    backdrop.props.onClick();
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});