Merge branch 'add-header' into Feature/profile

src/core/components/Header.tsx

-import React from 'react';
+import {
+  AppBar,
+  Button,
+  Grid,
+  makeStyles,
+  Tab,
+  Tabs,
+  Toolbar,
+  Typography,
+} from '@material-ui/core';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
 
-const Header = () => <div>Header</div>;
+interface AppBarMenuItem {
+  id: number;
+  title: string;
+  redirectTo: string;
+}
+
+const MENU_ITEMS: AppBarMenuItem[] = [
+  {
+    id: 0,
+    title: 'News',
+    redirectTo: '/news',
+  },
+  {
+    id: 1,
+    title: 'About',
+    redirectTo: '/about',
+  },
+  {
+    id: 2,
+    title: 'FAQ',
+    redirectTo: '/faq',
+  },
+];
+
+const useStyles = makeStyles((theme) => ({
+  appBar: {
+    backgroundColor: '#E5BD2F',
+    padding: theme.spacing(1),
+  },
+  tab: {
+    fontWeight: 600,
+    padding: '0px',
+  },
+  indicator: {
+    backgroundColor: 'white',
+  },
+  navItem: {
+    flex: 1,
+    alignItems: 'center',
+    '&:first-child': {
+      marginRight: 'auto;',
+    },
+    '&:last-child': {
+      marginRight: 'auto;',
+    },
+  },
+}));
+
+const Header: React.FC = () => {
+  const classes = useStyles();
+  const history = useHistory();
+  const [value, setValue] = useState(
+    MENU_ITEMS.find((item) => history.location.pathname === item.redirectTo)?.id ?? 0,
+  );
+
+  return (
+    <AppBar className={classes.appBar} position="static">
+      <Toolbar>
+        <Grid container>
+          <Grid className={classes.navItem} item container justify="flex-start">
+            <Tabs
+              value={value}
+              onChange={(event, val) => {
+                setValue(val);
+              }}
+              TabIndicatorProps={{ className: classes.indicator }}
+            >
+              {MENU_ITEMS.map((item) => (
+                <Tab
+                  key={item.id}
+                  className={classes.tab}
+                  label={item.title}
+                  onClick={() => {
+                    history.push(item.redirectTo);
+                  }}
+                />
+              ))}
+            </Tabs>
+          </Grid>
+          <Grid className={classes.navItem} item container justify="center">
+            <Typography variant="h4">SCH-BODY</Typography>
+          </Grid>
+          <Grid className={classes.navItem} item container justify="flex-end">
+            <Button>Login</Button>
+          </Grid>
+        </Grid>
+      </Toolbar>
+    </AppBar>
+  );
+};
 
 export default Header;

src/core/components/MainRouting.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Route, Switch } from 'react-router';
 import { ProfileButton } from './ProfileButton';
 
-const Main = () => (
+const MainRouting: React.FC = () => (
   <Switch>
     <Route path="/" exact>
       <ProfileButton />
@@ -11,4 +11,4 @@ const Main = () => (
   </Switch>
 );
 
-export default Main;
+export default MainRouting;

src/index.css

 html,
 body,
 #root {
+  margin: 0;
   height: 100%;
   margin: 0;
 }