[libeufin] branch master updated: Add reusable navbar component

[gnunet]

This is an automated email from the git hooks/post-receive script.

heng-yeow pushed a commit to branch master
in repository libeufin.

The following commit(s) were added to refs/heads/master by this push:
     new 170fd34  Add reusable navbar component
170fd34 is described below

commit 170fd3491c331b70605a08b4aaa452d01ef732c3
Author: tanhengyeow <E0032242@u.nus.edu>
AuthorDate: Wed Jun 10 01:11:31 2020 +0800

    Add reusable navbar component
---
 frontend/src/components/navbar/Index.tsx           |  60 +++++++++++++++++++++
 frontend/src/components/navbar/NavBar.less         |  13 +++++
 .../src/components/navbar/libeufin-logo-normal.png | Bin 0 -> 2238 bytes
 3 files changed, 73 insertions(+)

diff --git a/frontend/src/components/navbar/Index.tsx 
b/frontend/src/components/navbar/Index.tsx
new file mode 100644
index 0000000..9a24137
--- /dev/null
+++ b/frontend/src/components/navbar/Index.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Menu, Button } from 'antd';
+import { connect } from 'react-redux';
+import { LogoutOutlined } from '@ant-design/icons';
+import normalLogo from './libeufin-logo-normal.png';
+import './NavBar.less';
+import { logout } from '../../actions/auth';
+
+import history from '../../history';
+
+interface Props {
+  logoutConnect: () => void;
+}
+
+const NavBar = ({ logoutConnect }: Props) => {
+  const handleClick = (key) => {
+    switch (key) {
+      case '1':
+        history.push('/home');
+        break;
+      case '2':
+        history.push('/activity');
+        break;
+      case '3':
+        history.push('/bank-accounts');
+        break;
+      default:
+        return undefined;
+    }
+    return undefined;
+  };
+
+  return (
+    <div className="navBar">
+      <img className="logo" src={normalLogo} alt="LibEuFin normal logo" />
+      <Menu
+        className="menu"
+        mode="horizontal"
+        onClick={({ key }) => handleClick(key)}
+      >
+        <Menu.Item key="1">Home</Menu.Item>
+        <Menu.Item key="2">Activity</Menu.Item>
+        <Menu.Item key="3">Bank Accounts</Menu.Item>
+      </Menu>
+      <Button
+        type="primary"
+        shape="circle"
+        icon={<LogoutOutlined />}
+        size="large"
+        onClick={logoutConnect}
+      />
+    </div>
+  );
+};
+
+const mapDispatchToProps = {
+  logoutConnect: logout,
+};
+
+export default connect(null, mapDispatchToProps)(NavBar);
diff --git a/frontend/src/components/navbar/NavBar.less 
b/frontend/src/components/navbar/NavBar.less
new file mode 100644
index 0000000..81bff9b
--- /dev/null
+++ b/frontend/src/components/navbar/NavBar.less
@@ -0,0 +1,13 @@
+.navBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  height: 100%;
+}
+
+.ant-menu-item {
+  font-family: 'Noto Sans';
+}
diff --git a/frontend/src/components/navbar/libeufin-logo-normal.png 
b/frontend/src/components/navbar/libeufin-logo-normal.png
new file mode 100644
index 0000000..a1d6248
Binary files /dev/null and 
b/frontend/src/components/navbar/libeufin-logo-normal.png differ

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.