feat: added main link to the Navbar main menu and changed Navbar beha…

…viour
decentraland · Jul 11, 2024 · b0fff9d · b0fff9d
1 parent 0f2aa5e
commit b0fff9d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = {