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

…viour (#546)

* feat: added main link to the Navbar main menu and changed Navbar behaviour

src/components/Navbar/MainMenu/MainMenu.tsx

@@ -4,11 +4,15 @@ import classNames from 'classnames'
 import { MenuItem } from '../MenuItem/MenuItem'
 import { NavbarPages } from '../Navbar.types'
 import { MainMenuProps } from './MainMenu.types'
+import { getNavbarPagesUrls } from '../utils'
 
 import './MainMenu.css'
 
 export const MainMenu = (props: MainMenuProps) => {
   const { i18n, ...menuItemProps } = props
+
+  const urls = getNavbarPagesUrls()
+
   return (
     <div
       className={classNames(
@@ -21,26 +25,31 @@ export const MainMenu = (props: MainMenuProps) => {
         {...menuItemProps}
         section={NavbarPages.MARKETPLACE}
         title={i18n.marketplace}
+        mainUrl={urls[NavbarPages.MARKETPLACE]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.CREATE}
         title={i18n.create}
+        mainUrl={urls[NavbarPages.CREATE]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.EXPLORE}
         title={i18n.explore}
+        mainUrl={urls[NavbarPages.EXPLORE]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.LEARN}
         title={i18n.learn}
+        mainUrl={urls[NavbarPages.LEARN]}
       />
       <MenuItem
         {...menuItemProps}
         section={NavbarPages.GOVERNANCE}
         title={i18n.governance}
+        mainUrl={urls[NavbarPages.GOVERNANCE]}
       />
     </div>
   )

src/components/Navbar/MenuItem/MenuItem.tsx

@@ -1,32 +1,35 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import Menu from 'semantic-ui-react/dist/commonjs/collections/Menu'
 import classNames from 'classnames'
 
 import ArrowIcon from '../../Icons/ArrowIcon'
-import ChevronIcon from '../../Icons/ChevronIcon'
 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}
+      onClick={(e: React.MouseEvent) => {
+        isMobile ? onToggleShowSubMenu(e, true, section) : mainRedirect()
+      }}
       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} />}
       {isMobile && <ArrowIcon />}
     </Menu.Item>
   )

src/components/Navbar/MenuItem/MenuItem.types.ts

@@ -9,5 +9,6 @@ export type MenuItemProps = {
     show: boolean,
     section?: NavbarPages
   ) => void
+  mainUrl?: string
   isMobile?: boolean
 }

src/components/Navbar/utils.ts

@@ -0,0 +1,12 @@
+import { config } from '../../config'
+import { NavbarPages } from './Navbar.types'
+
+export const getNavbarPagesUrls = () => {
+  return {
+    [NavbarPages.MARKETPLACE]: config.get('MARKETPLACE_URL'),
+    [NavbarPages.CREATE]: config.get('LANDING_CREATORS_URL'),
+    [NavbarPages.EXPLORE]: config.get('EVENTS_URL'),
+    [NavbarPages.LEARN]: config.get('DOCS_ABOUT_URL'),
+    [NavbarPages.GOVERNANCE]: config.get('GOVERNANCE_URL')
+  }
+}