Add reusable navbar component

3 files changed, 73 insertions, 0 deletions

diff --git a/frontend/src/components/navbar/Index.tsx b/frontend/src/components/navbar/Index.tsx
new file mode 100644
index 00000000..9a241370
--- /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 00000000..81bff9bf
--- /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 00000000..a1d62480
--- /dev/null
+++ b/frontend/src/components/navbar/libeufin-logo-normal.png