feat: Navbar adjustments (#205)

decentraland · Nov 22, 2024 · 2fd4929 · 2fd4929
1 parent 3098b78
commit 2fd4929
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 11 deletions.
diff --git a/src/components/Navbar/MainMenu/MainMenu.tsx b/src/components/Navbar/MainMenu/MainMenu.tsx
@@ -64,6 +64,7 @@ export const MainMenu = (props: MainMenuProps) => {
           mainUrl={extraButton.link}
           textColor={extraButton.textColor}
           backgroundColor={extraButton.backgroundColor}
+          isExtraButton
         />
       ) : null}
     </MainMenuContainer>

diff --git a/src/components/Navbar/MenuItem/MenuItem.tsx b/src/components/Navbar/MenuItem/MenuItem.tsx
@@ -13,6 +13,7 @@ const MenuItem = (props: MenuItemProps) => {
     isMobile,
     textColor,
     backgroundColor,
+    isExtraButton,
   } = props
 
   const mainRedirect = useCallback(() => {
@@ -23,7 +24,7 @@ const MenuItem = (props: MenuItemProps) => {
     <MenuItemContainer
       active={activePage === section}
       onClick={(e) => {
-        isMobile && onToggleShowSubMenu(e, true, section)
+        isMobile && !isExtraButton && onToggleShowSubMenu(e, true, section)
       }}
       onMouseEnter={(e) => !isMobile && onToggleShowSubMenu(e, true, section)}
       onMouseLeave={(e) => !isMobile && onToggleShowSubMenu(e, false, section)}

diff --git a/src/components/Navbar/MenuItem/MenuItem.types.ts b/src/components/Navbar/MenuItem/MenuItem.types.ts
@@ -11,6 +11,7 @@ export type MenuItemProps = {
   ) => void
   mainUrl?: string
   isMobile?: boolean
+  isExtraButton?: boolean
   textColor?: string
   backgroundColor?: string
 }
diff --git a/src/components/Navbar/SubMenu/SubMenu.styled.ts b/src/components/Navbar/SubMenu/SubMenu.styled.ts
@@ -61,7 +61,7 @@ const MenuItemContainer = styled(Box)((props: {
     modifiedStyles = {
       opacity: 1,
       top: 0,
-      zIndex: 10,
+      zIndex: 1099,
       boxShadow: theme.shadows[20],
     }
     mobileModifiedStyles = {

diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts
@@ -135,6 +135,21 @@ type GovernanceTenderPassedNotificationProps = RawDecentralandNotification<
   CommonGovernanceNotificationMetadataProps
 >
 
+type GovernanceVotedOnBehalfNotification = RawDecentralandNotification<
+  NotificationType.GOVERNANCE_VOTED_ON_BEHALF,
+  CommonGovernanceNotificationMetadataProps
+>
+
+type GovernanceWhaleVoteNotification = RawDecentralandNotification<
+  NotificationType.GOVERNANCE_WHALE_VOTE,
+  CommonGovernanceNotificationMetadataProps
+>
+
+type GovernanceCliffEndedNotification = RawDecentralandNotification<
+  NotificationType.GOVERNANCE_CLIFF_ENDED,
+  CommonGovernanceNotificationMetadataProps
+>
+
 type GovernanceNotificationsProps =
   | GovernanceAnnouncementNotificationProps
   | GovernanceProposalEnactedNotificationProps
@@ -145,6 +160,9 @@ type GovernanceNotificationsProps =
   | GovernanceNewCommentOnProjectUpdateNotificationProps
   | GovernancePitchPassedNotificationProps
   | GovernanceTenderPassedNotificationProps
+  | GovernanceVotedOnBehalfNotification
+  | GovernanceWhaleVoteNotification
+  | GovernanceCliffEndedNotification
 
 // Worlds Notifications
 

diff --git a/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.tsx b/src/components/UserMenu/UserMenuSignedIn/UserMenuSignedIn.tsx
@@ -264,15 +264,19 @@ const UserMenuSignedIn = React.memo((props: UserMenuSignedInProps) => {
   return (
     <UserMenuSignedInContainer>
       {notifications && <Notifications {...notifications} />}
-      <IconButton aria-label="activity" onClick={handleClickActivity}>
-        <Badge color="secondary" variant="dot" invisible={!hasActivity}>
-          <ActivityIcon />
-        </Badge>
-      </IconButton>
-      <ManaBalances
-        manaBalances={manaBalances}
-        onClickBalance={onClickBalance}
-      />
+      {!isTabletAndBelow && (
+        <IconButton aria-label="activity" onClick={handleClickActivity}>
+          <Badge color="secondary" variant="dot" invisible={!hasActivity}>
+            <ActivityIcon />
+          </Badge>
+        </IconButton>
+      )}
+      {!isTabletAndBelow && (
+        <ManaBalances
+          manaBalances={manaBalances}
+          onClickBalance={onClickBalance}
+        />
+      )}
       <AvatarFaceContainer onClick={handleClickToggle}>
         <AvatarFace size="medium" avatar={avatar} />
       </AvatarFaceContainer>