Create basic header navbar

src/core/components/Header.tsx

-import React from 'react';
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
+import { Button, Menu } from 'semantic-ui-react';
+import styled from 'styled-components';
 
-const Header = () => <div>Header</div>;
+const StyledMenu = styled(Menu)`
+  padding: 0.5em;
+`;
 
+const Header = () => {
+  const [activeItem, setActiveItem] = useState('home');
+  const history = useHistory();
+  return (
+    <StyledMenu stackable size="large" secondary color="grey" inverted>
+      <Menu.Item
+        name="home"
+        active={activeItem === 'home'}
+        onClick={(e, { name }) => {
+          setActiveItem(name!);
+          history.push('/');
+        }}
+      >
+        Home
+      </Menu.Item>
+      <Menu.Item
+        name="news"
+        active={activeItem === 'news'}
+        onClick={(e, { name }) => {
+          setActiveItem(name!);
+          history.push('/news');
+        }}
+      >
+        News
+      </Menu.Item>
+
+      <Menu.Menu position="right">
+        <Menu.Item>
+          <Button color="orange" icon="lock" content="Log in" labelPosition="left" />
+        </Menu.Item>
+      </Menu.Menu>
+    </StyledMenu>
+  );
+};
 export default Header;