feat: add setting menu widget #140
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
jeremy-babylonlabs
force-pushed
the
feat/setting-menu
branch
2 times, most recently
from
a44e7ec to
74163fd
Compare
jeremy-babylonlabs
force-pushed
the
feat/setting-menu
branch
from
74163fd to
b9bc56a
Compare
jeremy-babylonlabs
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive SettingMenu widget with dark/light theme support and responsive design. The implementation follows a compound component pattern, allowing flexible composition of menu items, groups, and submenus. It supports both desktop and mobile views with appropriate styling adaptations.
- Adds a new SettingMenu widget with TypeScript type definitions and comprehensive component API
- Implements responsive design with different layouts for desktop and mobile viewports
- Refactors MenuDrawer component to use Portal for better theme synchronization on mobile
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/widgets/new-design/SettingMenu/types.ts | TypeScript interfaces for all SettingMenu component props |
| src/widgets/new-design/SettingMenu/index.ts | Main export file for the SettingMenu widget |
| src/widgets/new-design/SettingMenu/SettingMenu.tsx | Core implementation with compound components and embedded SVG icons |
| src/widgets/new-design/SettingMenu/SettingMenu.stories.tsx | Storybook stories demonstrating theme selection and menu functionality |
| src/index.tsx | Adds SettingMenu to main library exports |
| src/components/Menu/MenuDrawer.tsx | Refactors to use Portal for mobile rendering and improves backdrop handling |
| src/components/Menu/MenuContext.tsx | Changes warning to error for better development experience |
| } | ||
| }; | ||
|
|
||
| return <div className={`${getBackgroundClass()} ${className}`.trim()}>{children}</div>; |
There was a problem hiding this comment.
Use a utility like twJoin or clsx instead of manual string concatenation and trim() for better className handling and consistency with the rest of the codebase.
Copilot uses AI. Check for mistakes.
jeremy-babylonlabs
force-pushed
the
feat/setting-menu
branch
from
44916c8 to
0e6b535
Compare
|
Please wait till this PR is merged in the mono repo and create a new PR against mono repo instead https://github.com/babylonlabs-io/babylon-toolkit/pull/31/files |
Desktop and mobile view in different color theme