Skip to content
This repository was archived by the owner on Jul 20, 2025. It is now read-only.

feat: add menu component #138

Merged
merged 6 commits into from
Jul 18, 2025
Merged

feat: add menu component #138

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0ec961c
feat: menu component
jeremy-babylonlabs Jul 17, 2025
01b0207
feat: mobile view
jeremy-babylonlabs Jul 17, 2025
a231342
Update src/components/Menu/SubMenu.tsx
jeremy-babylonlabs Jul 17, 2025
5bc31e4
Update src/components/Menu/SubMenuItem.tsx
jeremy-babylonlabs Jul 17, 2025
6735c7c
feat:update throttle
jeremy-babylonlabs Jul 17, 2025
31516ed
feat: lodash throttle
jeremy-babylonlabs Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,10 @@
"dependencies": {
"@hookform/resolvers": "^3.9.1",
"@popperjs/core": "^2.11.8",
"decimal.js-light": "^2.5.1",
"lodash": "^4.17.21",
"react-hook-form": "^7.54.0",
"react-popper": "^2.3.0",
"decimal.js-light": "^2.5.1",
"tw-colors": "^3.3.2"
}
}
}
131 changes: 131 additions & 0 deletions src/components/Menu/Menu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import type { Meta, StoryObj } from "@storybook/react";
import { useState } from "react";
import { Menu } from "./Menu";
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",
component: Menu,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: "A menu component with support for nested submenus.",
},
},
},
};

export default meta;

type Story = StoryObj<typeof meta>;

const SettingIcon = () => (
<svg width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M24.9127 15.3708C24.9711 14.9333 25.0002 14.4812 25.0002 14C25.0002 13.5333 24.9711 13.0667 24.8982 12.6292L27.8586 10.325C28.1211 10.1208 28.194 9.72708 28.0336 9.43542L25.2336 4.59375C25.0586 4.27292 24.694 4.17083 24.3732 4.27292L20.8877 5.67292C20.1586 5.11875 19.3857 4.65208 18.5252 4.30208L18.0002 0.597916C17.9419 0.247916 17.6502 0 17.3002 0H11.7002C11.3502 0 11.0732 0.247916 11.0148 0.597916L10.4898 4.30208C9.62941 4.65208 8.84191 5.13333 8.12732 5.67292L4.64191 4.27292C4.32107 4.15625 3.95649 4.27292 3.78149 4.59375L0.996075 9.43542C0.821075 9.74167 0.879408 10.1208 1.17107 10.325L4.13149 12.6292C4.05857 13.0667 4.00024 13.5479 4.00024 14C4.00024 14.4521 4.02941 14.9333 4.10232 15.3708L1.14191 17.675C0.879408 17.8792 0.806491 18.2729 0.966908 18.5646L3.76691 23.4062C3.94191 23.7271 4.30649 23.8292 4.62732 23.7271L8.11274 22.3271C8.84191 22.8812 9.61482 23.3479 10.4752 23.6979L11.0002 27.4021C11.0732 27.7521 11.3502 28 11.7002 28H17.3002C17.6502 28 17.9419 27.7521 17.9857 27.4021L18.5107 23.6979C19.3711 23.3479 20.1586 22.8812 20.8732 22.3271L24.3586 23.7271C24.6794 23.8438 25.044 23.7271 25.219 23.4062L28.019 18.5646C28.194 18.2437 28.1211 17.8792 27.844 17.675L24.9127 15.3708ZM14.5002 19.25C11.6127 19.25 9.25024 16.8875 9.25024 14C9.25024 11.1125 11.6127 8.75 14.5002 8.75C17.3877 8.75 19.7502 11.1125 19.7502 14C19.7502 16.8875 17.3877 19.25 14.5002 19.25Z"
fill="#9E9E9E"
/>
</svg>
);

const ThemeIcon = () => (
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="20" fill="#387085" fill-opacity="0.12" />
<path
d="M20 30C25.52 30 30 25.52 30 20C30 14.48 25.52 10 20 10C14.48 10 10 14.48 10 20C10 25.52 14.48 30 20 30ZM21 12.07C24.94 12.56 28 15.92 28 20C28 24.08 24.95 27.44 21 27.93V12.07Z"
fill="#387085"
/>
</svg>
);

const ReportABugIcon = () => (
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="20" fill="#387085" fill-opacity="0.12" />
<path
d="M23.73 11H16.27L11 16.27V23.73L16.27 29H23.73L29 23.73V16.27L23.73 11ZM20 25.3C19.28 25.3 18.7 24.72 18.7 24C18.7 23.28 19.28 22.7 20 22.7C20.72 22.7 21.3 23.28 21.3 24C21.3 24.72 20.72 25.3 20 25.3ZM21 21H19V15H21V21Z"
fill="#387085"
/>
</svg>
);

const ChevronRightIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
);

export const Default: Story = {
render: () => {
const [selectedTheme, setSelectedTheme] = useState("auto");
const themes = [
{ id: "auto", label: "Auto", description: undefined },
{ id: "light", label: "Light", description: undefined },
{ id: "dark", label: "Dark", description: undefined },
];
return (
<div className="p-4">
<Menu
trigger={
<button>
<SettingIcon />
</button>
}
>
<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
</Button>
</div>
</Menu>
</div>
);
},
};
92 changes: 92 additions & 0 deletions src/components/Menu/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import React, { useState, useRef } from "react";
import { twJoin } from "tailwind-merge";

import { Popover } from "../Popover";
import { MenuProvider } from "./MenuContext";
import { MenuDrawer } from "./MenuDrawer";
import { useIsMobile } from "@/hooks/useIsMobile";
import { Placement } from "@popperjs/core";

interface MenuProps {
children: React.ReactNode;
trigger?: React.ReactNode;
open?: boolean;
onOpenChange?: (open: boolean) => void;
placement?: Placement;
offset?: [number, number];
className?: string;
}

export const Menu: React.FC<MenuProps> = ({
children,
trigger,
open: controlledOpen,
onOpenChange,
placement = "bottom-end",
offset = [0, 8],
className,
}) => {
const [internalOpen, setInternalOpen] = useState(false);
const triggerRef = useRef<HTMLDivElement>(null);
const isMobile = useIsMobile();

const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
const setIsOpen = (open: boolean) => {
if (controlledOpen === undefined) {
setInternalOpen(open);
}
onOpenChange?.(open);
};

const onClose = () => setIsOpen(false);

const menuContent = <div className="relative w-full overflow-hidden">{children}</div>;

const triggerElement = trigger || (
<button className="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={() => setIsOpen(!isOpen)}>
Menu
</button>
);

return (
<MenuProvider value={{ isOpen, setIsOpen, onClose, isMobile }}>
<div ref={triggerRef} className="inline-block">
{React.isValidElement(triggerElement) &&
React.cloneElement(triggerElement as React.ReactElement, {
onClick: () => setIsOpen(!isOpen),
"aria-haspopup": "true",
"aria-expanded": isOpen,
})}
</div>

{isMobile ? (
<MenuDrawer
isOpen={isOpen}
onClose={onClose}
onBackdropClick={onClose}
fullHeight={true}
fullWidth={true}
showBackButton={true}
showDivider={false}
>
{menuContent}
</MenuDrawer>
) : (
<Popover
anchorEl={triggerRef.current}
open={isOpen}
offset={offset}
placement={placement}
onClickOutside={onClose}
className={twJoin(
"rounded-lg border border-[#38708533] bg-[#FFFFFF] shadow-lg dark:border-[#404040] dark:bg-[#252525]",
"min-w-[294px]",
className,
)}
>
{menuContent}
</Popover>
)}
</MenuProvider>
);
};
25 changes: 25 additions & 0 deletions src/components/Menu/MenuContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import React, { createContext, useContext } from "react";

interface MenuContextValue {
isOpen: boolean;
setIsOpen: (open: boolean) => void;
onClose: () => void;
isMobile: boolean;
}

const MenuContext = createContext<MenuContextValue | undefined>(undefined);

export const useMenuContext = () => {
const context = useContext(MenuContext);
if (!context && process.env.NODE_ENV === "development") {
console.warn("useMenuContext must be used within a Menu component");
}
return context;
};

export const MenuProvider: React.FC<{
children: React.ReactNode;
value: MenuContextValue;
}> = ({ children, value }) => {
return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;
};
108 changes: 108 additions & 0 deletions src/components/Menu/MenuDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import React from "react";
import { twJoin } from "tailwind-merge";

interface MenuDrawerProps {
isOpen: boolean;
onClose: () => void;
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> = ({
isOpen,
onClose,
title,
children,
className = "",
titleAlign = "left",
backIcon,
fullHeight = false,
fullWidth = false,
showBackButton = true,
showDivider = true,
onBackdropClick,
}) => {
const titleAlignment = {
left: "text-left",
center: "text-center",
right: "text-right",
};

return (
<>
{fullHeight && isOpen && onBackdropClick && (
<div className="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300" onClick={onBackdropClick} />
)}

<div
className={twJoin(
"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,
)}
>
{/* 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>
</>
);
};
Loading