Make Navbar buttons configurable

ismaelbej · Mar 27, 2020 · c4b49a0 · c4b49a0
1 parent 6ab8baa
commit c4b49a0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -19,10 +19,17 @@ import TxList from './views/TxList';
 import Account from './views/Account';
 import Contract from './views/Contract';
 
+const menu = [
+  { path: "/", icon: "home", label: "Home" },
+  { path: "/block", icon: "cubes", label: "Blocks" },
+  { path: "/tx", icon: "content", label: "Transactions" },
+  { path: "/contract", icon: "signup", label: "Contracts" },
+];
+
 const App = () => (
   <Router>
     <Container>
-      <Navbar />
+      <Navbar menu={menu} />
       <BlockchainInfo />
       <Container style={{ marginTop: '1em' }}>
         <Switch>

diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
@@ -6,13 +6,12 @@ import {
   Icon,
 } from 'semantic-ui-react';
 
-const Navbar = () => (
+const Navbar = ({ menu }) => (
   <Container>
     <Menu icon="labeled">
-      <Menu.Item as={Link} to="/"><Icon name="home" color="orange" />Home</Menu.Item>
-      <Menu.Item as={Link} to="/block"><Icon name="cubes" color="orange" />Blocks</Menu.Item>
-      <Menu.Item as={Link} to="/tx"><Icon name="content" color="orange" />Transactions</Menu.Item>
-      <Menu.Item as={Link} to="/contract"><Icon name="signup" color="orange" />Contracts</Menu.Item>
+      {menu.map(({ path, icon, label }) => (
+        <Menu.Item key={label} as={Link} to={path}><Icon name={icon} color="orange" />{label}</Menu.Item>
+      ))}
     </Menu>
   </Container>
 );