Skip to content

Commit 18848e2

Browse files
cuzz-venuscuzz-venus
authored
Merge pull request #5602 from VenusProtocol/feat/landing-page-menu
feat: show full menu on lg
2 parents 15883d0 + d332d47 commit 18848e2

8 files changed

Lines changed: 36 additions & 30 deletions

File tree

‎.changeset/tough-taxes-rescue.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@venusprotocol/evm": patch
3+
---
4+
5+
feat: full menu item on 1024-1280

‎apps/evm/src/containers/Layout/NavBar/MenuItem/SubMenuContent/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const SubMenuContent: React.FC<SubMenuContentProps> = ({ variant = 'prima
1111
<div
1212
className={cn(
1313
'rounded-lg',
14-
variant === 'primary' ? 'min-w-83' : 'py-3 bg-background-active xl:min-w-137',
14+
variant === 'primary' ? 'min-w-83' : 'py-3 bg-background-active lg:min-w-137',
1515
)}
1616
>
1717
<div

‎apps/evm/src/containers/Layout/NavBar/MenuItem/index.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
3030
}
3131

3232
const sharedContainerClassName = cn(
33-
'block w-full text-left py-3 font-semibold text-light-grey transition-colors hover:no-underline hover:text-light-grey-hover active:text-light-grey-active xl:font-normal xl:px-4 xl:py-3 xl:rounded-lg xl:hover:text-white xl:hover:bg-dark-blue-active xl:whitespace-nowrap',
34-
isActive && 'xl:bg-dark-blue-active xl:text-white',
33+
'block w-full text-left py-3 font-semibold text-light-grey transition-colors hover:no-underline hover:text-light-grey-hover active:text-light-grey-active lg:font-normal lg:px-4 lg:py-3 lg:rounded-lg lg:hover:text-white lg:hover:bg-dark-blue-active lg:whitespace-nowrap group-has-[[data-rewards-button]]/navbar:lg:px-2 group-has-[[data-rewards-button]]/navbar:xl:px-4',
34+
isActive && 'lg:bg-dark-blue-active lg:text-white',
3535
);
3636

3737
// Toggle menu's open state
@@ -40,11 +40,11 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
4040
return 'items' in item ? (
4141
<div>
4242
{/* Mobile/tablet submenu */}
43-
<div className="xl:hidden">
43+
<div className="lg:hidden">
4444
<button
4545
className={cn(
4646
sharedContainerClassName,
47-
'flex items-center justify-between cursor-pointer xl:gap-x-2',
47+
'flex items-center justify-between cursor-pointer lg:gap-x-2',
4848
)}
4949
type="button"
5050
onClick={onAccordionTriggerClick}
@@ -57,7 +57,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
5757
/>
5858
</button>
5959

60-
<AccordionAnimatedContent isOpen={isSubMenuOpen} className="pb-3 xl:hidden">
60+
<AccordionAnimatedContent isOpen={isSubMenuOpen} className="pb-3 lg:hidden">
6161
<SubMenuContent
6262
{...item}
6363
items={item.items.map(i => ({
@@ -70,7 +70,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
7070

7171
{/* XL and up dropdown */}
7272
<Dropdown
73-
className="hidden xl:block"
73+
className="hidden lg:block"
7474
menuClassName="mt-5 shadow-none border-0 bg-background-active"
7575
triggerOnHover
7676
optionsDom={({ setIsDropdownOpened }) => {
@@ -91,8 +91,8 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
9191
<button
9292
className={cn(
9393
sharedContainerClassName,
94-
'flex items-center justify-between cursor-pointer xl:gap-x-2',
95-
isDropdownOpened && 'xl:text-white xl:bg-dark-blue-active',
94+
'flex items-center justify-between cursor-pointer lg:gap-x-2',
95+
isDropdownOpened && 'lg:text-white lg:bg-dark-blue-active',
9696
)}
9797
type="button"
9898
>
@@ -113,7 +113,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
113113
<span>{item.label}</span>
114114

115115
{item.isBeta && (
116-
<div className="bg-blue px-1.5 py-0.5 rounded-full text-b2s text-white">
116+
<div className="bg-blue px-1.5 py-0.5 rounded-full text-b2s text-white hidden max-lg:inline-block xl:inline-block">
117117
{t('layout.menu.beta')}
118118
</div>
119119
)}

‎apps/evm/src/containers/Layout/NavBar/Settings/GaslessTransactionSetting/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const GaslessTransactionSetting: React.FC<GaslessTransactionSettingProps>
2929
return (
3030
<div className="flex items-center gap-x-3 justify-between">
3131
<div className="flex flex-col gap-y-1">
32-
<div className="flex flex-col gap-y-3 xl:gap-y-0 xl:flex-row xl:gap-x-1 xl:items-center">
32+
<div className="flex flex-col gap-y-3 lg:gap-y-0 lg:flex-row lg:gap-x-1 lg:items-center">
3333
<Icon name="gasSlashed" className="text-green size-4" />
3434

3535
<p className="text-sm">

‎apps/evm/src/containers/Layout/NavBar/Settings/LanguageSetting/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ export const LanguageSetting: React.FC = () => {
1010
const { t, i18n, language } = useTranslation();
1111

1212
return (
13-
<div className="flex flex-col gap-y-3 xl:flex-row xl:justify-between xl:items-center xl:gap-y-0">
13+
<div className="flex flex-col gap-y-3 lg:flex-row lg:justify-between lg:items-center lg:gap-y-0">
1414
<p>{t('layout.menu.settings.language.label')}</p>
1515

1616
<Select
1717
value={language.bcp47Tag}
1818
onChange={tag => i18n.changeLanguage(tag as string)}
1919
options={selectOptions}
20-
dropdownClassName="xl:overflow-auto xl:max-h-48"
20+
dropdownClassName="lg:overflow-auto lg:max-h-48"
2121
/>
2222
</div>
2323
);

‎apps/evm/src/containers/Layout/NavBar/SettingsButton/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const SettingsButton: React.FC<SettingsButtonProps> = ({ className }) =>
2121
return (
2222
<>
2323
<NavButtonWrapper
24-
className={cn('size-9 sm:size-12 xl:hidden', className)}
24+
className={cn('size-9 sm:size-12 lg:hidden', className)}
2525
onClick={openSettingsModal}
2626
>
2727
<Icon name="gearFull" className="text-light-grey" />

‎apps/evm/src/containers/Layout/NavBar/index.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,12 @@ export const NavBar: React.FC<NavBarProps> = ({ className, ...containerProps })
4747
<nav className="relative">
4848
<div
4949
className={cn(
50-
'bg-background-active h-20 pr-5 flex items-center justify-between',
50+
'group/navbar bg-background-active h-20 pr-5 flex items-center justify-between',
5151
className,
5252
)}
5353
{...containerProps}
5454
>
55-
<div className="flex items-center gap-x-1">
55+
<div className="flex items-center xl:gap-x-1">
5656
<Link
5757
className="flex h-full flex-none items-center justify-center px-5 py-6"
5858
to={routes.landing.path}
@@ -67,37 +67,37 @@ export const NavBar: React.FC<NavBarProps> = ({ className, ...containerProps })
6767
/>
6868
</Link>
6969

70-
{/* XL and up menu */}
71-
<div className="hidden items-center gap-x-3 xl:flex">
70+
{/* LG and up menu */}
71+
<div className="hidden items-center lg:flex xl:gap-x-3">
7272
{menuItems.map(item => (
7373
<MenuItem key={item.label} item={item} onClick={closeMobileMenu} />
7474
))}
7575
</div>
7676
</div>
7777

78-
<div className="flex items-center gap-x-2 h-9 sm:h-12">
79-
<ClaimRewardsButton className="h-full hidden sm:flex" />
78+
<div className="flex items-center gap-x-3 h-9 sm:h-12">
79+
<ClaimRewardsButton className="h-full hidden sm:flex" data-rewards-button="true" />
8080

8181
<ChainSelect buttonClassName="h-9 px-3 py-0 border-dark-blue sm:h-12" />
8282

8383
<ConnectButton className="h-full max-w-xs flex-1 px-3" />
8484

85-
<NavButtonWrapper className="size-9 px-0 sm:size-12 xl:hidden" onClick={toggleMobileMenu}>
85+
<NavButtonWrapper className="size-9 px-0 sm:size-12 lg:hidden" onClick={toggleMobileMenu}>
8686
<Icon
8787
name={isMobileMenuOpen ? 'closeRounded' : 'burger'}
8888
className={cn(isMobileMenuOpen ? 'text-light-grey size-3' : 'text-white')}
8989
/>
9090
</NavButtonWrapper>
9191

92-
<SettingsButton className="h-full px-0 hidden xl:flex" />
92+
<SettingsButton className="h-full px-0 hidden lg:flex" />
9393
</div>
9494
</div>
9595

9696
{/* Mobile/tablet menu */}
9797
<div
9898
className={cn(
9999
isMobileMenuOpen ? 'fixed' : 'hidden',
100-
'top-20 bottom-0 left-0 right-0 z-40 p-5 bg-[#000000] overflow-y-auto xl:hidden',
100+
'top-20 bottom-0 left-0 right-0 z-40 p-5 bg-[#000000] overflow-y-auto lg:hidden',
101101
)}
102102
>
103103
<div className="flex items-center justify-between mb-5">

‎apps/evm/src/containers/Layout/NavBar/useMenuItems/index.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,14 @@ export const useMenuItems = () => {
7979
});
8080
}
8181

82+
if (swapRouteEnabled) {
83+
othersSubMenuItems.push({
84+
to: routes.swap.path,
85+
iconName: 'convert',
86+
label: t('layout.menu.others.swap.label'),
87+
});
88+
}
89+
8290
if (accountAddress) {
8391
othersSubMenuItems.push({
8492
to: routes.port.path,
@@ -96,13 +104,6 @@ export const useMenuItems = () => {
96104
});
97105
}
98106

99-
if (swapRouteEnabled) {
100-
menu.push({
101-
to: routes.swap.path,
102-
label: t('layout.menu.others.swap.label'),
103-
});
104-
}
105-
106107
if (statsRouteEnabled) {
107108
othersSubMenuItems.push({
108109
to: routes.stats.path,

0 commit comments

Comments
 (0)