New Menu (#186)

* add basic menu

* fix storybook

* add menu content

* add menu and links styles

* mobile improvements

* mobile menu

* navbar improvements

* Fix conflict with styled-components

* add icons and remove old menu

* delete menu

* toogle styles

* show logo on mobile and fix ui issues

* mobile improvements

* add dark bg color

* fix routes and constants part 1

* const error fix

* change links to routes fromo const

* remove const folder - to be refactored in a new PR

* menu logic

* fix husky error

* menu logic

* fix menu color on mobile

* Fix navbar

* icons tets

* Convert file to .tsx

* Add icon type

* Fix icon type

* Fix network redirect

* fix style home link on mobile

* feedback point 5 - mobile links

* Display icons on menu dropdown

* Fix problems with typing

* Move menuContainer

* Fix clickoutside

* Fix when clickCloseMenuMobile, unify screenSizes mediaqueries

* Remove escaped log

* Fix close mobile menu click when click on Logo

* Fix hide mobile mene when clicking on an internal Link

* add icons to the menu

* change logo animation as we have on CoWSwap

* add external link icon

* fix logo animation

* fix cow icon size

* remove svg styles

* removed internal link attributes

* feddback 2. Removed logo animation on mobile.

* header improvement

* remove globally touch highlight color effect

* feedback 5: fix scrollbar on mobile

* feedback 4: fix menu on medium and desktop

* menu: App Data -> AppData

* delete commented code

* fix logo on mobile avoid opening the menu

* feedback 3: landscape mode on mobile

* menu item height

* code improvements

* fix storybook

* fix dropdown stories

* add MainMenu storybook

* Moving MenuIcon inside MenuTree component, addin mobile behavior to the storybook

* fix menu alignment on mobile

* change dropdown component storybook

* change component name

Co-authored-by: Henry Palacios <[email protected]>
Co-authored-by: Mati Dastugue <[email protected]>

src/apps/explorer/const.ts

@@ -28,3 +28,21 @@ export const NETWORK_ID_SEARCH_LIST = [Network.MAINNET, Network.GNOSIS_CHAIN, Ne
 export const HEIGHT_HEADER_FOOTER = 257
 
 export const TOKEN_SYMBOL_UNKNOWN = 'UNKNOWN'
+
+// Routes and Links
+export enum Routes {
+  HOME = '/',
+  APPDATA = '/appdata',
+}
+
+const GITHUB_REPOSITORY = 'cowprotocol/explorer'
+export const CODE_LINK = 'https://github.com/' + GITHUB_REPOSITORY
+export const RAW_CODE_LINK = 'https://raw.githubusercontent.com/' + GITHUB_REPOSITORY
+export const DOCS_LINK = 'https://docs.cow.fi'
+export const PROTOCOL_LINK = 'https://cow.fi'
+export const CONTRACTS_CODE_LINK = 'https://github.com/cowprotocol/contracts'
+export const DISCORD_LINK = 'https://discord.gg/cowprotocol'
+export const DUNE_DASHBOARD_LINK = 'https://dune.com/gnosis.protocol/Gnosis-Protocol-V2'
+export const TWITTER_LINK = 'https://twitter.com/CoWSwap'
+export const COWWIKI_LINK = 'https://en.wikipedia.org/wiki/Coincidence_of_wants'
+export const GNOSIS_FORUM_ROADTODECENT_LINK = 'https://forum.gnosis.io/t/gpv2-road-to-decentralization/1245'

src/apps/explorer/layout/Header.tsx

@@ -1,22 +1,26 @@
-import React, { useState, createRef } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 
-import { MenuBarToggle, Navigation } from 'components/layout/GenericLayout/Navigation'
 import { Header as GenericHeader } from 'components/layout/GenericLayout/Header'
 import { NetworkSelector } from 'components/NetworkSelector'
 import { PREFIX_BY_NETWORK_ID, useNetworkId } from 'state/network'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FlexWrap } from 'apps/explorer/pages/styled'
-import { ExternalLink } from 'components/analytics/ExternalLink'
-import { useHistory } from 'react-router'
-import useOnClickOutside from 'hooks/useOnClickOutside'
-import { APP_NAME } from 'const'
+import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint'
+import { MenuTree } from 'components/common/MenuDropdown/MenuTree'
+import { addBodyClass, removeBodyClass } from 'utils/toggleBodyClass'
 
 export const Header: React.FC = () => {
-  const history = useHistory()
-  const [isBarActive, setBarActive] = useState(false)
-  const flexWrapDivRef = createRef<HTMLDivElement>()
-  useOnClickOutside(flexWrapDivRef, () => isBarActive && setBarActive(false))
+  const isMobile = useMediaBreakpoint(['xs', 'sm'])
+  const [isMobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  // Toggle the 'noScroll' class on body, whenever the mobile menu or orders panel is open.
+  // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
+  useEffect(() => {
+    isMobileMenuOpen ? addBodyClass('noScroll') : removeBodyClass('noScroll')
+  }, [isMobileMenuOpen, isMobile])
+
+  const handleMobileMenuOnClick = useCallback(() => {
+    isMobile && setMobileMenuOpen((isMobileMenuOpen) => !isMobileMenuOpen)
+  }, [isMobile])
 
   const networkId = useNetworkId()
   if (!networkId) {
@@ -25,44 +29,19 @@ export const Header: React.FC = () => {
 
   const prefixNetwork = PREFIX_BY_NETWORK_ID.get(networkId)
 
-  const handleNavigate = (e: React.MouseEvent<HTMLAnchorElement>): void => {
-    e.preventDefault()
-    setBarActive(false)
-    history.push(`/${prefixNetwork || ''}`)
-  }
-
   return (
-    <GenericHeader logoAlt="CoW Protocol Explorer" linkTo={`/${prefixNetwork || ''}`}>
+    <GenericHeader
+      logoAlt="CoW Protocol Explorer"
+      linkTo={`/${prefixNetwork || ''}`}
+      onClickOptional={isMobileMenuOpen ? handleMobileMenuOnClick : undefined}
+    >
       <NetworkSelector networkId={networkId} />
-      <FlexWrap ref={flexWrapDivRef} grow={1}>
-        <MenuBarToggle isActive={isBarActive} onClick={(): void => setBarActive(!isBarActive)}>
-          <FontAwesomeIcon icon={isBarActive ? faTimes : faEllipsisH} />
-        </MenuBarToggle>
-        <Navigation isActive={isBarActive}>
-          <li>
-            <a onClick={(e): void => handleNavigate(e)}>Home</a>
-          </li>
-          <li>
-            <ExternalLink target={'_blank'} href={'https://cow.fi'}>
-              {APP_NAME}
-            </ExternalLink>
-          </li>
-          <li>
-            <ExternalLink target={'_blank'} href={'https://docs.cow.fi'}>
-              Documentation
-            </ExternalLink>
-          </li>
-          <li>
-            <ExternalLink target={'_blank'} href={'https://discord.gg/cowprotocol'}>
-              Community
-            </ExternalLink>
-          </li>
-          <li>
-            <ExternalLink target={'_blank'} href={'https://dune.xyz/gnosis.protocol/Gnosis-Protocol-V2'}>
-              Analytics
-            </ExternalLink>
-          </li>
-        </Navigation>
+      <FlexWrap grow={1}>
+        <MenuTree
+          isMobile={isMobile}
+          isMobileMenuOpen={isMobileMenuOpen}
+          handleMobileMenuOnClick={handleMobileMenuOnClick}
+        />
       </FlexWrap>
     </GenericHeader>
   )

src/apps/explorer/styled.ts

@@ -19,6 +19,7 @@ export const ScrollBarStyle = css`
 export const GlobalStyle = createGlobalStyle`
   html {
     height: 100%;
+    -webkit-tap-highlight-color: transparent;
   }
   html,
   body,

src/components/common/LinkWithPrefixNetwork/index.tsx

@@ -3,13 +3,17 @@ import { Link, LinkProps } from 'react-router-dom'
 
 import { usePathPrefix } from 'state/network'
 
-export function LinkWithPrefixNetwork(props: LinkProps): JSX.Element {
-  const { to, children, ...otherParams } = props
+interface LinkWithPrefixProps extends LinkProps {
+  onClickOptional?: React.MouseEventHandler<HTMLAnchorElement>
+}
+
+export function LinkWithPrefixNetwork(props: LinkWithPrefixProps): JSX.Element {
+  const { to, children, onClickOptional, ...otherParams } = props
   const prefix = usePathPrefix()
   const _to = prefix ? `/${prefix}${to}` : to
 
   return (
-    <Link to={_to} {...otherParams}>
+    <Link to={_to} onClick={(event): void => onClickOptional && onClickOptional(event)} {...otherParams}>
       {children}
     </Link>
   )

src/components/common/MenuDropdown/InternalExternalLink.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import SVG from 'react-inlinesvg'
+import { StyledIcon } from 'components/common/MenuDropdown/styled'
+import { ExternalLink } from 'components/analytics/ExternalLink'
+import { faExternalLink } from '@fortawesome/free-solid-svg-icons'
+import { LinkWithPrefixNetwork } from 'components/common/LinkWithPrefixNetwork'
+import { MenuImageProps, MenuItemKind, MenuLink } from './types'
+
+function MenuImage(props: MenuImageProps): JSX.Element | null {
+  const { title, iconSVG, icon } = props
+
+  if (iconSVG) {
+    return <SVG src={iconSVG} description={`${title} icon`} />
+  } else if (icon) {
+    return <img src={icon} alt={`${title} icon`} />
+  } else {
+    return null
+  }
+}
+
+interface InternalExternalLinkProps {
+  link: MenuLink
+  handleMobileMenuOnClick?: () => void
+}
+
+export default function InternalExternalMenuLink({
+  link,
+  handleMobileMenuOnClick,
+}: InternalExternalLinkProps): JSX.Element {
+  const { kind, title, url, iconSVG, icon } = link
+  const menuImage = <MenuImage title={title} icon={icon} iconSVG={iconSVG} />
+  const menuImageExternal = <StyledIcon icon={faExternalLink} />
+  const isExternal = kind === MenuItemKind.EXTERNAL_LINK
+
+  if (isExternal) {
+    return (
+      <ExternalLink target={'_blank'} href={url} onClick={handleMobileMenuOnClick}>
+        {menuImage}
+        {title}
+        {menuImageExternal}
+      </ExternalLink>
+    )
+  } else {
+    return (
+      <LinkWithPrefixNetwork to={url} target="_self" onClickOptional={handleMobileMenuOnClick}>
+        {menuImage}
+        {title}
+      </LinkWithPrefixNetwork>
+    )
+  }
+}