filter some menu items based on Web3 status

client/src/components/organisms/Header.tsx

@@ -1,12 +1,28 @@
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
+import { User } from '../../context/User'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Header.module.scss'
 
 import menu from '../../data/menu.json'
 import meta from '../../data/meta.json'
 
+const MenuItem = ({ item, isWeb3 }: { item: any; isWeb3: boolean }) => {
+    if (item.web3 && !isWeb3) return null
+
+    return (
+        <NavLink
+            to={item.link}
+            className={styles.link}
+            activeClassName={styles.linkActive}
+            exact
+        >
+            {item.title}
+        </NavLink>
+    )
+}
+
 const Header = () => (
     <header className={styles.header}>
         <div className={styles.headerContent}>
@@ -16,17 +32,17 @@ const Header = () => (
             </NavLink>
 
             <nav className={styles.headerMenu}>
-                {menu.map(item => (
+                <User.Consumer>
-                    <NavLink
+                    {states =>
-                        key={item.title}
+                        menu.map(item => (
-                        to={item.link}
+                            <MenuItem
-                        className={styles.link}
+                                key={item.title}
-                        activeClassName={styles.linkActive}
+                                item={item}
-                        exact
+                                isWeb3={states.isWeb3}
-                    >
+                            />
-                        {item.title}
+                        ))
-                    </NavLink>
+                    }
-                ))}
+                </User.Consumer>
             </nav>
             <AccountStatus className={styles.accountStatus} />
         </div>

client/src/data/menu.json

@@ -1,15 +1,18 @@
 [
   {
     "title": "Publish",
-    "link": "/publish"
+    "link": "/publish",
+    "web3": true
   },
   {
     "title": "History",
-    "link": "/history"
+    "link": "/history",
+    "web3": true
   },
   {
     "title": "Faucet",
-    "link": "/faucet"
+    "link": "/faucet",
+    "web3": true
   },
   {
     "title": "About",