From b0fff9d0fd737dd0a0baadf3520ae40ff3d0a549 Mon Sep 17 00:00:00 2001
From: Braian Mellor <braianj@gmail.com>
Date: Thu, 11 Jul 2024 17:06:57 -0300
Subject: [PATCH] feat: added main link to the Navbar main menu and changed
 Navbar behaviour

---
 src/components/Navbar/MainMenu/MainMenu.tsx   |  8 +++++-
 src/components/Navbar/MenuItem/MenuItem.tsx   | 27 ++++++++++++-------
 .../Navbar/MenuItem/MenuItem.types.ts         |  1 +
 src/components/Navbar/Navbar.types.ts         |  8 ++++++
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/Navbar/MainMenu/MainMenu.tsx b/src/components/Navbar/MainMenu/MainMenu.tsx
index cb231c17..e927e3cc 100644
--- a/src/components/Navbar/MainMenu/MainMenu.tsx
+++ b/src/components/Navbar/MainMenu/MainMenu.tsx
@@ -2,13 +2,14 @@ import React from 'react'
 import classNames from 'classnames'
 
 import { MenuItem } from '../MenuItem/MenuItem'
-import { NavbarPages } from '../Navbar.types'
+import { NavbarPages, NavbarPagesUrls } from '../Navbar.types'
 import { MainMenuProps } from './MainMenu.types'
 
 import './MainMenu.css'
 
 export const MainMenu = (props: MainMenuProps) => {
   const { i18n, ...menuItemProps } = props
+
   return (
     <div
       className={classNames(
@@ -21,26 +22,31 @@ export const MainMenu = (props: MainMenuProps) => {
         {...menuItemProps}
         section={NavbarPages.MARKETPLACE}
         title={i18n.marketplace}
+        mainUrl={NavbarPagesUrls[NavbarPages.MARKETPLACE.toUpperCase()]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.CREATE}
         title={i18n.create}
+        mainUrl={NavbarPagesUrls[NavbarPages.CREATE.toUpperCase()]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.EXPLORE}
         title={i18n.explore}
+        mainUrl={NavbarPagesUrls[NavbarPages.EXPLORE.toUpperCase()]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.LEARN}
         title={i18n.learn}
+        mainUrl={NavbarPagesUrls[NavbarPages.LEARN.toUpperCase()]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.GOVERNANCE}
         title={i18n.governance}
+        mainUrl={NavbarPagesUrls[NavbarPages.GOVERNANCE.toUpperCase()]}
       />
     </div>
   )
diff --git a/src/components/Navbar/MenuItem/MenuItem.tsx b/src/components/Navbar/MenuItem/MenuItem.tsx
index 9dda1d75..e61052ba 100644
--- a/src/components/Navbar/MenuItem/MenuItem.tsx
+++ b/src/components/Navbar/MenuItem/MenuItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Menu from 'semantic-ui-react/dist/commonjs/collections/Menu'
 import classNames from 'classnames'
 
@@ -9,24 +9,31 @@ import { MenuItemProps } from './MenuItem.types'
 import './MenuItem.css'
 
 export const MenuItem = (props: MenuItemProps) => {
-  const { activePage, section, title, onToggleShowSubMenu, isMobile } = props
+  const { activePage, section, title, onToggleShowSubMenu, isMobile, mainUrl } =
+    props
+
+  const mainRedirect = useCallback(() => {
+    mainUrl && window.open(mainUrl, '_self')
+  }, [mainUrl])
 
   return (
     <Menu.Item
       active={activePage === section}
-      onMouseEnter={(e: React.MouseEvent) =>
-        !isMobile && onToggleShowSubMenu(e, true, section)
-      }
-      onMouseLeave={(e: React.MouseEvent) =>
-        !isMobile && onToggleShowSubMenu(e, false, section)
-      }
       onClick={(e: React.MouseEvent) => {
         isMobile && onToggleShowSubMenu(e, true, section)
       }}
       className={classNames('dui-menu-item', section, isMobile && 'mobile')}
     >
-      {title}
-      {!isMobile && <ChevronIcon down={true} />}
+      <div onClick={mainRedirect}>{title}</div>
+      {!isMobile && (
+        <div
+          onClick={(e: React.MouseEvent) => {
+            onToggleShowSubMenu(e, true, section)
+          }}
+        >
+          <ChevronIcon down={true} />
+        </div>
+      )}
       {isMobile && <ArrowIcon />}
     </Menu.Item>
   )
diff --git a/src/components/Navbar/MenuItem/MenuItem.types.ts b/src/components/Navbar/MenuItem/MenuItem.types.ts
index 0f6bc1c7..c8d9aff4 100644
--- a/src/components/Navbar/MenuItem/MenuItem.types.ts
+++ b/src/components/Navbar/MenuItem/MenuItem.types.ts
@@ -9,5 +9,6 @@ export type MenuItemProps = {
     show: boolean,
     section?: NavbarPages
   ) => void
+  mainUrl?: string
   isMobile?: boolean
 }
diff --git a/src/components/Navbar/Navbar.types.ts b/src/components/Navbar/Navbar.types.ts
index 22b6f2f4..189e2a85 100644
--- a/src/components/Navbar/Navbar.types.ts
+++ b/src/components/Navbar/Navbar.types.ts
@@ -12,6 +12,14 @@ export enum NavbarPages {
   GOVERNANCE = 'governance'
 }
 
+export enum NavbarPagesUrls {
+  MARKETPLACE = 'https://decentraland.org/marketplace',
+  CREATE = 'https://decentraland.org/create/',
+  EXPLORE = 'https://decentraland.org/events/',
+  LEARN = 'https://docs.decentraland.org/player/',
+  GOVERNANCE = 'https://decentraland.org/governance/'
+}
+
 export type NavbarMenuI18nProps = Record<NavbarPages, NavbarPages>
 
 export type NavbarSubMenuItemsProps = {