From 4d33ccd9abe19e1804ccbca9e5e117324d638da7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chif.gergo@cloud.bme.hu>
Date: Sun, 9 Aug 2020 12:27:23 +0200
Subject: [PATCH] Create basic header navbar
---
src/core/components/Header.tsx | 43 ++++++++++++++++++++++++++++++++--
1 file changed, 41 insertions(+), 2 deletions(-)
diff --git a/src/core/components/Header.tsx b/src/core/components/Header.tsx
index 11ab0b6..ca7a298 100644
--- a/src/core/components/Header.tsx
+++ b/src/core/components/Header.tsx
@@ -1,5 +1,44 @@
-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;
--
GitLab