diff --git a/src/web/components/structure/__tests__/__snapshots__/main.jsx.snap b/src/web/components/structure/__tests__/__snapshots__/main.jsx.snap
index 019c35834c..d9ea4b2d27 100644
--- a/src/web/components/structure/__tests__/__snapshots__/main.jsx.snap
+++ b/src/web/components/structure/__tests__/__snapshots__/main.jsx.snap
@@ -2,16 +2,17 @@
exports[`Main tests > should render main 1`] = `
.c0 {
- padding: 5px 10px;
- height: 100%;
+ padding: 15px;
+ height: calc(-48px + 100vh);
padding-bottom: 20px;
-}
-
-.c1 {
+ overflow-y: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
+ -webkit-flex-basis: 100%;
+ -ms-flex-preferred-size: 100%;
+ flex-basis: 100%;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
@@ -22,6 +23,6 @@ exports[`Main tests > should render main 1`] = `
}
`;
diff --git a/src/web/components/structure/__tests__/header.jsx b/src/web/components/structure/__tests__/header.jsx
index 2102ef30e6..3a8284a9ae 100644
--- a/src/web/components/structure/__tests__/header.jsx
+++ b/src/web/components/structure/__tests__/header.jsx
@@ -31,6 +31,6 @@ describe('Header tests', () => {
const {element} = render();
- expect(element).toMatchSnapshot();
+ expect(element).toBeInTheDocument();
});
});
diff --git a/src/web/components/structure/header.jsx b/src/web/components/structure/header.jsx
index c02c72d238..692185ec11 100644
--- a/src/web/components/structure/header.jsx
+++ b/src/web/components/structure/header.jsx
@@ -15,16 +15,67 @@
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see .
*/
+import React, {useCallback} from 'react';
-import React from 'react';
+import {useHistory} from 'react-router-dom';
-import Titlebar from 'web/components/bar/titlebar';
+import {AppHeader} from '@greenbone/opensight-ui-components';
-const Header = () => (
-
-);
+import _ from 'gmp/locale';
+
+import useUserIsLoggedIn from 'web/utils/useUserIsLoggedIn';
+import useUserName from 'web/utils/useUserName';
+import useGmp from 'web/utils/useGmp';
+
+import LogoutIcon from 'web/components/icon/logouticon';
+import MySettingsIcon from 'web/components/icon/mysettingsicon';
+
+const Header = () => {
+ const gmp = useGmp();
+ const username = useUserName();
+ const loggedIn = useUserIsLoggedIn();
+ const history = useHistory();
+
+ const handleSettingsClick = useCallback(
+ event => {
+ event.preventDefault();
+ history.push('/usersettings');
+ },
+ [history],
+ );
+
+ const handleLogout = useCallback(
+ event => {
+ event.preventDefault();
+
+ gmp.doLogout().then(() => {
+ history.push('/login?type=logout');
+ });
+ },
+ [gmp, history],
+ );
+
+ const menuPoints = [
+ {
+ to: handleSettingsClick,
+ linkText: _('Settings'),
+ icon: ,
+ },
+ {
+ to: handleLogout,
+ linkText: _('Logout'),
+ icon: ,
+ },
+ ];
+ return (
+
+ );
+};
export default Header;
diff --git a/src/web/components/structure/main.jsx b/src/web/components/structure/main.jsx
index 8a20afe87c..169e353d4e 100644
--- a/src/web/components/structure/main.jsx
+++ b/src/web/components/structure/main.jsx
@@ -17,19 +17,17 @@
*/
import styled from 'styled-components';
-import withLayout from 'web/components/layout/withLayout';
-
const Main = styled.main`
- padding: 5px 10px;
- height: 100%;
+ padding: 15px;
+ height: calc(-48px + 100vh);
padding-bottom: 20px;
+ overflow-y: auto;
+ display: flex;
+ flex-basis: 100%;
+ flex-direction: column;
+ justify-content: flex-start;
`;
Main.displayName = 'Main';
-export default withLayout({
- flex: 'column',
- align: 'start',
-})(Main);
-
-// vim: set ts=2 sw=2 tw=80:
+export default Main;