From e7d4a20901a85953564ac5e86cccde5122536cac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chif.gergo@cloud.bme.hu>
Date: Thu, 27 Aug 2020 22:02:35 +0200
Subject: [PATCH] Add basic navbar
---
src/core/components/Header.tsx | 48 ++++++++++++++++++++++++++++++++--
src/index.css | 1 +
2 files changed, 47 insertions(+), 2 deletions(-)
diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx
index 11ab0b6..74e7470 100644
--- a/src/core/components/Header.tsx
+++ b/src/core/components/Header.tsx
@@ -1,5 +1,49 @@
-import React from 'react';
+import {
+ AppBar, Tab, Tabs, Toolbar,
+} from '@material-ui/core';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
-const Header = () => <div>Header</div>;
+interface AppBarMenuItem {
+ title: string;
+ redirectTo: string;
+}
+
+const MENU_ITEMS: AppBarMenuItem[] = [
+ {
+ title: 'Home',
+ redirectTo: '/',
+ },
+ {
+ title: 'News',
+ redirectTo: '/news',
+ },
+];
+
+const Header: React.FC = () => {
+ const [value, setValue] = useState(0);
+ const history = useHistory();
+ return (
+ <AppBar position="static">
+ <Toolbar>
+ <Tabs
+ value={value}
+ onChange={(event, val) => {
+ setValue(val);
+ }}
+ >
+ {MENU_ITEMS.map((item) => (
+ <Tab
+ label={item.title}
+ onClick={() => {
+ history.push(item.redirectTo);
+ }}
+ />
+ ))}
+ </Tabs>
+ </Toolbar>
+ </AppBar>
+ );
+};
export default Header;
diff --git a/src/index.css b/src/index.css
index 06f062d..03ca6df 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,6 @@
html,
body,
#root {
+ margin: 0;
height: 100%;
}
--
GitLab