feat: mobile view

Author: jeremy-babylonlabs

src/components/Menu/Menu.stories.tsx

@@ -5,6 +5,7 @@ import { MenuItem } from "./MenuItem";
 import { SubMenu } from "./SubMenu";
 import { SubMenuItem } from "./SubMenuItem";
 import { Button } from "../Button";
+import { Text } from "../Text";
 
 const meta: Meta<typeof Menu> = {
   title: "Components/Menu",
@@ -62,9 +63,9 @@ export const Default: Story = {
   render: () => {
     const [selectedTheme, setSelectedTheme] = useState("auto");
     const themes = [
-      { id: "auto", label: "Auto", description: "Follow system preference" },
-      { id: "light", label: "Light", description: "Always use light theme" },
-      { id: "dark", label: "Dark", description: "Always use dark theme" },
+      { id: "auto", label: "Auto", description: undefined },
+      { id: "light", label: "Light", description: undefined },
+      { id: "dark", label: "Dark", description: undefined },
     ];
     return (
       <div className="p-4">
@@ -75,25 +76,49 @@ export const Default: Story = {
             </button>
           }
         >
-          <SubMenu name="Theme" description={selectedTheme} icon={<ThemeIcon />} suffix={<ChevronRightIcon />}>
-            <div className="flex flex-col">
-              {themes.map((theme) => (
-                <SubMenuItem
-                  key={theme.id}
-                  label={theme.label}
-                  description={theme.description}
-                  selected={selectedTheme === theme.id}
-                  onClick={() => {
-                    setSelectedTheme(theme.id);
-                    console.log(`Theme selected: ${theme.id}`);
-                  }}
-                />
-              ))}
-            </div>
-          </SubMenu>
-          <MenuItem name="Report a bug" icon={<ReportABugIcon />} suffix={<ChevronRightIcon />} />
-          <MenuItem name="Terms of Use" suffix={<ChevronRightIcon />} />
-          <MenuItem name="Privacy Policy" suffix={<ChevronRightIcon />} />
+          <Text variant="body1" className="px-7 pb-6 text-accent-primary md:hidden">
+            Settings
+          </Text>
+          <div className="mx-[21px] rounded-lg md:mx-0">
+            <SubMenu
+              name="Theme"
+              description={selectedTheme}
+              icon={<ThemeIcon />}
+              suffix={<ChevronRightIcon />}
+              className="bg-secondary-highlight md:bg-transparent"
+            >
+              <div className="flex flex-col">
+                {themes.map((theme) => (
+                  <SubMenuItem
+                    key={theme.id}
+                    label={theme.label}
+                    description={theme?.description ?? ""}
+                    selected={selectedTheme === theme.id}
+                    onClick={() => {
+                      setSelectedTheme(theme.id);
+                      console.log(`Theme selected: ${theme.id}`);
+                    }}
+                  />
+                ))}
+              </div>
+            </SubMenu>
+            <MenuItem
+              name="Report a bug"
+              icon={<ReportABugIcon />}
+              suffix={<ChevronRightIcon />}
+              className="mb-4 bg-secondary-highlight md:mb-0 md:bg-transparent"
+            />
+            <MenuItem
+              name="Terms of Use"
+              suffix={<ChevronRightIcon />}
+              className="bg-secondary-highlight md:bg-transparent"
+            />
+            <MenuItem
+              name="Privacy Policy"
+              suffix={<ChevronRightIcon />}
+              className="bg-secondary-highlight md:bg-transparent"
+            />
+          </div>
           <div className="my-4 flex justify-center">
             <Button className="!bg-[#D5FCE8] !text-black" variant="contained">
               Switch to BABY Staking

src/components/Menu/Menu.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef } from "react";
 import { twJoin } from "tailwind-merge";
 
-import { MobileDialog } from "../Dialog";
 import { Popover } from "../Popover";
 import { MenuProvider } from "./MenuContext";
+import { MenuDrawer } from "./MenuDrawer";
+import { useIsMobile } from "@/hooks/useIsMobile";
 import { Placement } from "@popperjs/core";
 
 interface MenuProps {
@@ -27,7 +28,7 @@ export const Menu: React.FC<MenuProps> = ({
 }) => {
   const [internalOpen, setInternalOpen] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
-  const [isMobile, setIsMobile] = useState(false);
+  const isMobile = useIsMobile();
 
   const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
   const setIsOpen = (open: boolean) => {
@@ -39,31 +40,6 @@ export const Menu: React.FC<MenuProps> = ({
 
   const onClose = () => setIsOpen(false);
 
-  // Check if mobile view - we'll need to use the same breakpoint logic as simple-staking
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
-  }, []);
-
-  // Handle escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isOpen) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-      return () => document.removeEventListener("keydown", handleEscape);
-    }
-  }, [isOpen]);
-
   const menuContent = <div className="relative w-full overflow-hidden">{children}</div>;
 
   const triggerElement = trigger || (
@@ -84,13 +60,17 @@ export const Menu: React.FC<MenuProps> = ({
       </div>
 
       {isMobile ? (
-        <MobileDialog
-          open={isOpen}
+        <MenuDrawer
+          isOpen={isOpen}
           onClose={onClose}
-          className="bg-[#FFFFFF] p-0 text-accent-primary dark:bg-[#252525]"
+          onBackdropClick={onClose}
+          fullHeight={true}
+          fullWidth={true}
+          showBackButton={true}
+          showDivider={false}
         >
           {menuContent}
-        </MobileDialog>
+        </MenuDrawer>
       ) : (
         <Popover
           anchorEl={triggerRef.current}

src/components/Menu/MenuDrawer.tsx

@@ -4,11 +4,16 @@ import { twJoin } from "tailwind-merge";
 interface MenuDrawerProps {
   isOpen: boolean;
   onClose: () => void;
-  title: string;
+  title?: string;
   children: React.ReactNode;
   className?: string;
   titleAlign?: "left" | "center" | "right";
   backIcon?: React.ReactNode;
+  fullHeight?: boolean;
+  fullWidth?: boolean;
+  showBackButton?: boolean;
+  showDivider?: boolean;
+  onBackdropClick?: () => void;
 }
 
 export const MenuDrawer: React.FC<MenuDrawerProps> = ({
@@ -19,57 +24,85 @@ export const MenuDrawer: React.FC<MenuDrawerProps> = ({
   className = "",
   titleAlign = "left",
   backIcon,
+  fullHeight = false,
+  fullWidth = false,
+  showBackButton = true,
+  showDivider = true,
+  onBackdropClick,
 }) => {
   const titleAlignment = {
-    left: "justify-start",
-    center: "justify-center",
-    right: "justify-end",
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
   };
 
   return (
-    <div
-      className={twJoin(
-        "absolute inset-0 transform rounded-lg transition-transform duration-300 ease-in-out",
-        "bg-[#FFFFFF] dark:bg-[#252525]",
-        isOpen ? "translate-x-0" : "translate-x-full",
-        className,
+    <>
+      {fullHeight && isOpen && onBackdropClick && (
+        <div className="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300" onClick={onBackdropClick} />
       )}
-    >
-      {/* Header */}
+
       <div
         className={twJoin(
-          "flex items-center gap-3 border-b border-[#38708533] p-4 dark:border-[#404040]",
-          titleAlignment[titleAlign],
+          "transform transition-transform duration-300 ease-in-out",
+          "bg-[#FFFFFF] dark:bg-[#252525]",
+          fullHeight
+            ? twJoin("fixed inset-y-0 right-0 z-50", fullWidth ? "w-full" : "w-full max-w-sm")
+            : "absolute inset-0 rounded-lg",
+          isOpen ? "translate-x-0" : "translate-x-full",
+          className,
         )}
       >
-        <button
-          onClick={onClose}
-          className="flex h-8 w-8 items-center justify-center rounded transition-colors hover:bg-accent-secondary/10"
-          aria-label="Go back"
-        >
-          {backIcon || (
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="text-accent-primary"
-            >
-              <path
-                d="M10 12L6 8L10 4"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          )}
-        </button>
-        <h3 className="text-sm font-medium text-accent-primary">{title}</h3>
-      </div>
+        {/* Header */}
+        {(showBackButton || title) && (
+          <div
+            className={twJoin(
+              "flex items-center p-4",
+              showDivider && "border-b border-[#38708533] dark:border-[#404040]",
+            )}
+          >
+            {showBackButton && (
+              <button
+                onClick={onClose}
+                className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded transition-colors hover:bg-accent-secondary/10"
+                aria-label="Go back"
+              >
+                {backIcon || (
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="text-accent-primary"
+                  >
+                    <path
+                      d="M10 12L6 8L10 4"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                )}
+              </button>
+            )}
+            {title && (
+              <h3
+                className={twJoin(
+                  "flex-1 text-sm font-medium text-accent-primary",
+                  showBackButton ? "ml-3" : "",
+                  titleAlignment[titleAlign],
+                )}
+              >
+                {title}
+              </h3>
+            )}
+          </div>
+        )}
 
-      <div className="flex-1 overflow-y-auto">{children}</div>
-    </div>
+        <div className="flex-1 overflow-y-auto">{children}</div>
+      </div>
+    </>
   );
 };

src/components/Menu/MenuItem.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { twJoin } from "tailwind-merge";
 
-import { Text } from "../Text";
 import { useMenuContext } from "./MenuContext";
 
 interface MenuItemProps {
@@ -83,14 +82,8 @@ export const MenuItem: React.FC<MenuItemProps> = ({
       <div className="flex items-center gap-3">
         {icon && <div className="flex-shrink-0">{icon}</div>}
         <div className="flex flex-col">
-          <Text variant="body1" className="text-sm font-medium text-accent-primary">
-            {name}
-          </Text>
-          {description && (
-            <Text variant="body2" className="text-xs text-accent-secondary">
-              {description}
-            </Text>
-          )}
+          <div className="text-sm font-medium text-accent-primary">{name}</div>
+          {description && <div className="text-xs text-accent-secondary">{description}</div>}
         </div>
       </div>
       {suffix}

src/components/Menu/SubMenu.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { twJoin } from "tailwind-merge";
 import { MenuDrawer } from "./MenuDrawer";
+import { useMenuContext } from "./MenuContext";
 
 interface SubMenuProps {
   /** Nested submenu content */
@@ -35,6 +36,7 @@ export const SubMenu: React.FC<SubMenuProps> = ({
   titleAlign = "left",
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const menuContext = useMenuContext();
 
   const defaultBackIcon = (
     <svg
@@ -92,7 +94,10 @@ export const SubMenu: React.FC<SubMenuProps> = ({
         title={name || ""}
         titleAlign={titleAlign}
         backIcon={backIcon || defaultBackIcon}
-        className={twJoin("z-50", contentClassName)}
+        fullHeight={menuContext?.isMobile}
+        fullWidth={menuContext?.isMobile}
+        onBackdropClick={menuContext?.isMobile ? undefined : () => setIsOpen(false)}
+        className={twJoin(menuContext?.isMobile ? "z-60" : "z-50", contentClassName)}
       >
         {children}
       </MenuDrawer>

src/hooks/useIsMobile.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Hook to detect if the viewport is in mobile size
+ * @param breakpoint - The breakpoint in pixels (default: 768)
+ * @returns boolean indicating if viewport is mobile size
+ */
+export function useIsMobile(breakpoint: number = 768): boolean {
+  const [isMobile, setIsMobile] = useState(() => {
+    // Initial state based on current window width
+    if (typeof window !== "undefined") {
+      return window.innerWidth < breakpoint;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < breakpoint);
+    };
+
+    checkMobile();
+
+    window.addEventListener("resize", checkMobile);
+
+    return () => window.removeEventListener("resize", checkMobile);
+  }, [breakpoint]);
+
+  return isMobile;
+}